WordPress Styling with Blocks, Patterns, Templates, and Themes E-Book

Tammie Lister

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Veröffentlichungsjahr: 2024

Beschreibung

Experience a revolutionary WordPress styling transformation with WordPress Styling with Blocks, Patterns, Templates, and Themes by uncovering a wealth of features that redefine the future of WordPress. This guide introduces you to full-site editing and block design tools that enable you to shape the overall aesthetics and layout of your dream website with unprecedented ease.
Get ready to harness the power of diverse cutting-edge features as you delve into this WordPress book, focusing on the Gutenberg editing experience. Guided by examples that demonstrate effortless customization entirely suited to your preferences, you’ll master the design tools, patterns, and full site editing capabilities to shape impactful websites that mirror your distinct vision and creativity. As you immerse yourself in the core of WordPress styling, you’ll understand the rationale and terminology underpinning each element and how to use it to its full potential.
By the end of this book, you'll be equipped to build your dream website, reflecting your distinctive style.

Leseprobe

WordPress Styling with Blocks, Patterns, Templates, and Themes

Explore WordPress styling with step-by-step guidance, practical examples, and tips

Tammie Lister

WordPress Styling with Blocks, Patterns, Templates, and Themes

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Alok Dhuri

Publishing Product Manager: Puneet Kaur

Book Project Manager: Prajakta Naik

Senior Editor: Esha Banerjee

Technical Editor: Jubit Pincy

Copy Editor: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Prafulla Nikalje

DevRel Marketing Coordinator: Deepak Kumar and Mayank Singh

First published: February 2024

Production reference: 1220224

Published by Packt Publishing Ltd.Grosvenor House 11 St Paul’s SquareBirmingham B3 1RB, UK

ISBN 978-1-80461-850-9

www.packtpub.com

Contributors

About the author

Tammie Lister is a versatile creator with a hybrid background in psychology, coding, design, and art. She creates effective products, experiences, communities, and practices for a sustainable future. Tammie has contributed to WordPress core releases and led design for the Gutenberg editor during phase one. She got her start within the community through contribution and recognizes with thanks everyone that supported and enabled her.

Throughout her career, she has worked in various industries, with a focus on open source and startups. She has spoken, taught, and educated people worldwide on how to empower themselves by using these tools, regardless of their background.

This book couldn’t have been written without the work that every contributor did to create the current state of WordPress, Blocks, Patterns, Templates, and Styling. Every single commit I would like to recognize.

I would like to call out specificallyJessica for being an incredible guide during this and for being much more than just a technical editor.

Thank you to those who have been leading knowledge and developer relations in this area; you all deserve recognition. If you have ever created a pattern or even shared a tip – thank you.

Thank you to those who have led, co-led, and been part of each release squad across the phases of the core editor, codename Gutenberg. You have all moved the project forward, including each feature, commit, line, and pixel. Thanks to those who have tested and those who have documented and written tutorials on the new things. As the project progressed, this constantly growing resource helped everyone.

To the contributors and code poets.

– Tammie Lister

About the reviewer

Jessica Lyschik is a front-end and WordPress developer at Greyd with more than 17 years of experience creating web solutions for clients of all sizes. After spending almost a decade coding with Python, she went full-time on developing for WordPress in 2015. She enjoys diving deep into creating solutions with CSS, the Block and Site Editor, and the performance optimization of WordPress websites. Jessica has been contributing to WordPress in multiple ways, most notably being the Default Theme Co-Lead for the Twenty Twenty-Four theme released with WordPress 6.4 in November 2023. She also speaks at WordCamps and other events on a regular basis.

I’d like to thank my family, friends, and the many people from the WordPress community who supported me in my journey. The WordPress community had a huge influence on my personal growth over the past decade and I’m grateful for this. Also, a special thank you to Tammie for suggesting me as technical reviewer and the team at Packt Publishing for their guidance.

Table of Contents

Preface

Part 1: Styling and Design Tools

1

Introducing Blocks

A new way of creating

Discovering WordPress

What is a block?

What are design tools?

Key concepts

Block first

Intrinsic web design

Interface not code

Summary

Answers

Further reading

2

Block Design Tools

Stepping into design tools

Variations in design tools

Resetting design tools

Typography

Dimensions and spacing

Color

Layout

Borders

Shadows

Leveling up design tools

Example 1 – a cover block

Example 2 – styling a Gallery block

Copy and pasting styles

Summary

Questions

Answers

3

Block Styles

Technical requirements

What is a block style?

Block variations

Adding a block style using PHP or JavaScript

Adding a block style from a theme

Removing a default block style

Using PHP

Approaches to creating a block style

Custom block style using PHP with inline CSS

Custom block style using PHP with a stylesheet

JavaScript approaches

Summary

Questions

Answers

Further reading

4

Blocks and Styles Wrap-Up

Unleashing creativity – combining design tools

Effects on groups to create shadows

Design tools are evolving

Sidebar controls and component system

Growing the blocks and tools

Adding options

Tips and tricks

block.json and block styles

Summary

Questions

Answers

Part 2: Block Patterns

5

Understanding Block Patterns

What is a block pattern?

The power of block patterns

Discovering patterns in the editor

Summary

Questions

Answers

6

Discovering and Creating Block Patterns

Creating your own patterns

Sharing your patterns

Creating your own patterns and sharing in a theme

Reusable blocks and synced patterns

Detaching a pattern

Using the reusable blocks section for patterns

Summary

Questions

Answers

Further reading

7

Discovering the WordPress Pattern Directory

What is the WordPress Pattern Directory?

Finding and using a pattern

Using the Pattern Directory itself

Finding patterns within the editor

Adding your own pattern

Questions

Answers

Further reading

8

Wrapping Up Patterns

Let’s get creative – inspiring patterns

Finding inspiration

Openverse

Pattern Directory

Community search

Default theme inspiration

Combining beyond core blocks

Summary

Questions

Answers

Part 3: Template Parts and Templates

9

An Introduction to Site Editing

What is site editing?

Exploring template parts and templates

A quick guide to the interface

Site blocks

Spacer block

Navigation block

Query loop block

Design tools in site editing

Layout

Sticky position

Dimensions – Fit, Fill, Fixed

Summary

Questions

Answers

10

Discovering and Creating Template Parts

Creating a template part

Using a template part

Editing a template part

Deleting a template part

Detaching a template part

Summary

Questions

Answers

Reference

11

Discovering and Creating Templates

Managing templates

Creating a template

Editing a template

Using a template

Deleting a template

Summary

Questions

Answers

12

Templates Wrap-Up

The possibilities of templates

Template hierarchy

Setting a front page

Query Loop block

Getting inspiration

Summary

Questions

Answers

Part 4: Themes

13

Understanding How Themes Have Changed

A brief history of themes

The changing nature of themes

The new possibilities – no more code

Summary

Questions

Answers

14

Discovering Styles

What are Styles?

Why do we need Styles?

A walkthrough of the Styles interface

Revisions

Adjusting block by block

Additional CSS

Style variations

Discovering the Style Book

Summary

Question

Answers

15

Discovering WordPress Block Themes

What is a block theme?

How do you use a block theme?

Where can you find block themes?

Community initiative themes

Summary

Questions

Answers

16

Wrapping Up Themes

How block themes spark inspiration

Themes that have additional functionality

The Create Block Theme plugin

Theme resources

Summary

Questions

Answers

Index

A Book That You May Enjoy

Preface

WordPress just celebrated its 20th anniversary. From its early days, this open-source project had a concept of themes that allowed styling to be packaged and customized. Later on, an entire experience for doing that customization was created. Styling content along with creating it has been at the heart because it’s what someone wants to do. Creating something is amazing, but having control over how that appears without having to go and ask someone to make a small change – that’s where the true power of a system like WordPress comes in.

It’s been two decades with a lot of changes and even more recently with the new editing experience and potential with styling. You might have used a theme, you might have added some custom styling, or even used a plugin to customize before; now things have changed with WordPress offering built-in capabilities and opening a world of possibilities. This means you can start to create those visions in your head and truly unlock the power of WordPress to deliver your content.

In this book, we are going to learn about the available design tools and explore new editing options, including blocks and patterns. These design tools empower and make things easier that were far too complex before. Together, we will discover the site editing experience, and explore block themes, with template and template parts, along with styles.

This knowledge is going to be applied to create those designs you have in your mind without the need for extensive code. WordPress has a mission of democratizing publishing, and the recent changes in styling decorative styling – making it open to everyone who wants to do it without knowing complex code.

Who this book is for

This book is your go-to resource for exploring and unleashing your creative potential using the latest styling features available in WordPress. Whether you’re a non-coder, a hobbyist, or a seasoned WordPress user, this guide will help you discover the full range of new options. With no prior knowledge assumed, each step is carefully explained to ensure that you make the most of the latest version. Starting with a no-code approach, the book progressively introduces some coding for those interested in taking their learning further.

What this book covers

Chapter 1, Introducing Blocks, helps us learn what a block is and what are WordPress design tools. Readers will go on to learn the history and background.

Chapter 2, Block Design Tools, builds on the previous chapter, taking the knowledge of the design tools and moving into understanding each category.

Chapter 3, Block Styles, explores what block styles are and how to use the existing ones.

Chapter 4, Block and Styles Wrap-Up, concludes our section on blocks and ends with combining everything we have learned so far. It will include the design tools and also provide some tips along the way.

Chapter 5, Understanding Block Patterns, begins our journey with patterns. It will take the reader by the hand and begin by sharing what patterns are and their power.

Chapter 6, Discovering and Creating Block Patterns, guides the reader through discovering how to create patterns and then share them. It is a very practical chapter focused on walking through each step.

Chapter 7, Discovering the WordPress Pattern Directory, focuses on the WordPress Pattern Directory, which is a free resource of patterns, available for anyone. The reader will learn how to find a pattern, add it to their content, and be able to use it. This chapter will unlock a world of possibilities for them.

Chapter 8, Wrapping Up Patterns, ends the journey around patterns and looks to inspire with some creative ones. Looking beyond simple patterns and how even they might be art, it encourages the reader to explore and unleash their creativity.

Chapter 9, An Introduction to Site Editing, takes the reader through the concept of WordPress site editing. This introduction itself should inspire the reader to create their own templates.

Chapter 10, Discovering and Creating Template Parts, takes the reader through understanding what template parts are and how they are different from templates. They will be able to learn how to use them fully.

Chapter 11, Discovering and Creating Templates, talks about what templates are and how to use them in the editor and full site editing experience. Through examples, they will be guided and shown how to use, edit, and manage.

Chapter 12, Templates Wrap-Up, delves a little more into how you can, by knowing the template hierarchy, unlock some pretty cool aspects of templates, from creating one just for single posts to truly custom experiences.

Chapter 13, Understanding How Themes Have Changed, takes the reader through a brief history to understand why themes have changed and how we got here, and why. It also shared some inspiring samples.

Chapter 14, Discovering Styles, delves into styles and why, in the recent times, they are central to WordPress styling and themes. They unlock powerful styling for which you would need to know CSS beforehand.

Chapter 15, Discovering WordPress Block Themes, explores the concept called block themes and what this means. From there, they will learn how to use and find these new themes – truly unlock their power to take advantage of all the new styling possibilities.

Chapter 16, Wrapping Up Themes, closes the book, and the topic of themes will be wrapped up – showing the reader how inspiring themes can be. This will leave the reader hopeful for the future of WordPress styling, excited and optimistic about all the possibilities.

To get the most out of this book

Readers will discover WordPress styling is far more than just themes, and the entire world from blocks, patterns, and templates – will open up and empower them all without having to know code. Learn how to use these features together as they build up to create WordPress your way truly.

Historically people felt they needed to know code to style WordPress, from CSS to even more. This is no longer the case, and incredible tools are built in. However, discovering those is hard; this book uncovers and supports them and guides you to unleash your creativity.

You need to have WordPress installed for trying out the learnings from this book.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/WordPress-styling-with-blocks-patterns-templates-and-themes-. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

The color images in this book can be viewed at https://packt.link/gbp/9781804618509.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “ If you want to do this via JavaScript you can use a similar path using the unregister_block_style function.”

A block of code is set as follows:

function prefix_remove_core_block_styles() { wp_dequeue_style( 'wp-block-quote' ); } add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' ); [default]

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “ This editor can be found under Appearance by selecting Editor, as you can see in Figure 9.1.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read WordPress styling with blocks, patterns, templates and themes, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your e-book purchase not compatible with the device of your choice?

Don’t worry!, Now with every Packt book, you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the following link:

https://packt.link/free-ebook/9781804618509

Submit your proof of purchase.That’s it! We’ll send your free PDF and other benefits to your email directly.

Part 1: Styling and Design Tools

Blocks are the foundation of the WordPress editor. In this part, you will discover what is a block, how to style it, and what is a design tool.

This section has the following chapters:

Chapter 1, Introducing BlocksChapter 2, Block Design ToolsChapter 3, Block StylesChapter 4, Block and Styles Wrap-up

1

Introducing Blocks

Our main objective in this book is to learn about the new editing experience in WordPress, which was code-named Gutenberg, and find out how to style with a block-based editor. This starts with understanding the concepts of block-based editors. In order to set up the work to be done in this book, we will explore what setup you will need and also how default themes work. We’ll then move on to creating styling that was previously hard to achieve. We do this by discovering design tools. In this chapter, we will cover the following topics:

A new way of creatingDiscovering WordPressWhat is a block?What are design tools?Key concepts

By the end of this chapter, you will be able to add blocks and find whatever block you want, use the editor, and know how to add simple design tools.

A new way of creating

Before the changes to the editor in WordPress, creating and editing content was done using a simpler format with limited functionality. This editor, often referred to as the “Classic Editor,” while easy to use, was not very flexible and often made it difficult to create complex layouts and designs without using code or plugins. Often people would have to learn frameworks and systems to get simple tasks done, which on other platforms would be built-in. This meant that, for anything complicated, you would have to either learn coding or hire someone to assist you.

The world outside WordPress was starting to use block-based interfaces you could drag and drop, putting content at the heart of creating and empowering users through built-in tools. A decision was made that, to compete, the editor needed to change. This project was called Gutenberg, after Johannes Gutenberg, the printing press inventor, who revolutionized how information was shared and distributed.

Note

Gutenberg for WordPress was first introduced as a plugin in 2017 and later released into the product core in 2018 with WordPress 5.0.

This new editor made it possible to create much more complex and dynamic layouts and allowed users to interact with content blocks and styles without knowing the code.

There are several phases of this WordPress project, called Gutenberg, and so far, two have been completed: easierediting and customization. The current phase of the project is collaboration, and then multilingual.

It wasn’t just the interface that changed, though. The system of using blocks to create content, and the manner in which this was done, brought about a change in styling opportunities that were also drastically different. This allowed the creation of rich content that was flexible and available to a whole new range of people who were previously unable to use it due to the need for custom code or plugins. Here, as you can see in Figure 1.1, we have the editor itself. This is also known as the Block Editor when you are using blocks to create your site, not editing your entire site – where it would be referred to as the Site Editor.

Figure 1.1 – WordPress Block Editor

The Block Editor has paved an entirely new way to create and style content within WordPress. Previously, where you needed to code, you can now add a block and style using design tools. This has been a foundational change in how things are created within WordPress.

Have you ever wanted to change something such as a font family or even something fancy, such as implementing some incredible duotone effect you’ve seen on images online? Previously, you’d have to do this using custom CSS or a plugin. This meant it was often inaccessible to many, yet it formed the basics of content creation – controlling simple styling.

One of the foundations of the work done in the first phase of the new editor was to bring the possibility of styling to more people. To do this, it had to go back to basics; it needed to start with the most simple format, that is, starting with blocks.

Note

If you are creating a new WordPress install, you most likely will have Twenty Twenty-Four activated by default at the time of this being published. What theme you use is up to you.

Throughout this book, we are going to be using default themes and alternating different ones all the way back to Twenty Twenty-Two. It’s useful to get to explore and know different ones, so as you walk through the examples, take time to get to know each theme also.

Discovering WordPress

In this book, there are many opportunities to follow along with examples. You can do that using your own site, often referred to as a local install or a demo site:

Use WordPress Playground: This enables you to have a demo site, but is just in the browser, so anything you create will be removed each time. You can start trying this right here: https://wordpress.org/playground/.Install locally: This means having a server on your own computer you can use. There is a helpful guide on this within the WordPress handbook: https://make.wordpress.org/core/handbook/tutorials/installing-a-local-server/.Use hosting: You can have a website on a host and use file transfer, often even editing files through a hosting dashboard. Many hosts have “one-click” WordPress installs that make this easy for you too.

What is a block?

Blocks are the smallest unit of content and when combined they form the content or layout of a webpage. These blocks can contain text, images, videos, buttons, and many more types of content.

You can combine these blocks to create the structure and shape of your site, the same way you used building blocks as a child to play and build a variety of things. Within the editing interface, blocks can be added, removed, and rearranged using drag-and-drop or keyboard interactions.

They are a flexible and intuitive way to create content in WordPress without using any code. Blocks already come in the editor, but you can create your own with some coding or get them from the WordPress plugin directory.

Whatever you can think of – there is a block for that!

Discovering blocks in the editor

Finding blocks is done in several different ways; first, start typing. That’s it ... you’ve found your first block – the paragraph one. See Figure 1.2. Here, you can see the paragraph block added to the editor.

Figure 1.2 – The paragraph block

Want a header? Let’s do that together and show two methods of finding blocks.

Click the + icon, as shown in Figure 1.3, to browse whatever block you want and click and add it. The + icon is also known as the plus icon and enables you to add things to your content. It will appear in different places, as we will discover together now.

Figure 1.3 – Selecting a block from the block inserter

Here, in Figure 1.3, you can see the + icon appending blocks within the content. This appears just like the one in the toolbar to help you add content. You can also click Browse all to see the block library in its complete form, and even previews. See Figure 1.4.

Figure 1.4 – Browsing the full block library panel

Click the block you want to add, and there you go.

Adding blocks faster

The / (forward slash) command is another easy way to add blocks. It allows you to quickly get the blocks added while you are in the flow of adding. In the following screenshot, you can see what you get when clicking /.

Figure 1.5 – Using / to add blocks

At times when you wish to focus on your writing, you can use the fullscreen mode (see Figure 1.5). This typically is your default view when first editing. In this mode, even with the sidebar visible to show the block’s properties, you get to use all the space on your screen.

Figure 1.6 – Selecting fullscreen mode

Note

Under modes, you can adjust a range of options for your views. This way, you can customize your editing experience to how you want it. There is even Spotlight mode! Look at Figure 1.6. Using Spotlight mode and Distraction free, you can create an experience as shown in Figure 1.7. Have you ever wanted to see the outline of your content when in the editor? This handy little tip will allow you to do just that. Click Document overview, the stacked line icon, in the toolbar, and the following screen (Figure 1.7) opens; you can then navigate around it.

There is a lot you can do in this view, from grouping blocks to navigation and reordering.

Figure 1.7 – List view within the editor

Want to know things such as stats – how much you’ve written, for example? No problem. Click the second tab, called Outline, as shown in Figure 1.8. You can also see useful heading structures, which really help SEO and accessibility.

Figure 1.8 – The Outline tab

Blocks have several essential functions they all share. These can be found under block settings within the block toolbar. Let’s look into each block setting, one by one, as numbered in Figure 1.9.

Figure 1.9 – Block settings

Block label: What appears here depends on the theme and block. From quick transform to changing types, styles and patterns – you can access a range of helpful options.Movers and drag handles: This gives you the ability to grab the block to drag it up and down. Using the arrows is a way to click to reorder.Alignment: This is for the block itself.Block-specific controls: Here, headings can be changed to other heading levels (H1, H3, H4).Text alignment: This is for those blocks that are text.Text styling: Anything that adds styling to text, for example bold, italic, and linking.Additional tools: There is a dropdown that offers additional tools such as the use of footnotes, highlights, inline code, inline images, keyboard input, language, strikethrough, and sub and superscript. This opens the extra menus for text styling.More options: This is where you get block-specific controls for all blocks, for example, copy, duplicate, and add before/after. It also includes copy/paste styles, lock, rename, create pattern, move to, and edit as HTML, along with delete.

There is also a secondary place where you can find controls in the sidebar. To get there, you click the second icon from the right in the top toolbar, which is a rectangle with a smaller one to the side. See Figure 1.10. These block controls allow you to do extra things with a block that might be specific to it. They also have some styling options, which we will explore later.