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: easier editing 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

1. 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.
2. 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.
3. Alignment: This is for the block itself.
4. Block-specific controls: Here, headings can be changed to other heading levels (H1, H3, H4).
5. Text alignment: This is for those blocks that are text.
6. Text styling: Anything that adds styling to text, for example bold, italic, and linking.
7. 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.
8. 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.

Figure 1.10 – Secondary block controls

Moving a block is easy; you use the movers. You must have selected the block to see these, with the keyboard or mouse.

In Figure 1.11, you can see there are arrows within the toolbar. These can be used to move the block and are called the block movers.

Figure 1.11 – Showing the block movers and the selection of a block

This isn’t the only way to move a block. Figure 1.12 shows using the “more” menu to move a block by selecting Move to. This is another option when looking to order your content.

Figure 1.12 – Selecting and moving a block

As well as the arrows shown in the toolbar and the Move to option, there are even more ways to move blocks. You can move them using List View, which allows you to move them while seeing the entire overview. This can be found under Document Overview.

Now that we know what a block is, let’s find out what we can do with them by exploring the design tools.

Reset values

Within the editor, there is always the option to undo and redo; this is great as a step-by-step method of going back and forward. You can access that at the top of the editing screen, as shown in Figure 1.13.

Figure 1.13 – Undo and redo controls

Design tools is a term for anything relating to the appearance of blocks. WordPress has an “everything is a block” concept, meaning all content. This translates to design tools impacting all of your content’s appearance. These tools cover everything from colors, typography, alignments, and positioning to filters and cropping. It’s a simple interface to apply styles.

At the start, things were very different in WordPress if you wanted to style content. Often, it was hard, as we have learned, and you either needed to know how to code, know someone who could code, or know the “ways” of WordPress. This has changed fundamentally with the new editing experience and design tools. Historically, if you wanted to go down the non-code route for styling, you could look away from the core WordPress product and consider a framework, or perhaps even a stack of plugins and a complicated theme system. It wasn’t something that could be taken lightly and often meant you couldn’t easily change things if you wanted to later – for example, freshening up your theme or even updating WordPress rapidly becoming more complex.

One of the ways in which easier styling has been achieved is by setting boundaries to style within. This means you can experiment, grow, and flourish as you style. Your site won’t crash or cause conflicts or problematic situations you need to debug. Due to being supported by the system you are working on, within the core, the interface works no matter what design tool you use. Developers can provide options even in the themes and plugins they create that use these styling boundaries.

Design tools level the ground, providing everyone with a base to build on. They bring an interface you know you can come to trust as each tool uses the same principles. For example, you can learn about font sizing, using the same interface no matter the block. The same applies to each design tool, from color picking and duotone to gradients and more.

Note

These tools can also be set within the theme by the creator, so what you see might depend on the theme you are using.

In this chapter, we are using Twenty Twenty-Four (https://wordpress.org/themes/twentytwentyfour/) which has design tools active as shown in Figure 1.14.

Figure 1.14 – Editor side panel showing design tools

The preceding screenshot shows how you can combine design tools to create powerful combinations, for example, using a solid color opacity on a duotone set on a cover block image background.

Imagine this: you want to change the border radius of a button block. Before blocks, there was no button block, and before design tools, you couldn’t easily do this. Now, you can simply click those options under the Styles tab and jump into them. See Figure 1.14.

Figure 1.15 – Editor side panel showing design tools for a button

The styling options can be simple or incredibly complex; for example, with the fancy styling of the duotone filter of the image block as shown in Figure 1.16.

Figure 1.16 – Duotone options under block settings

By providing these design tools that people know they can trust and rely on, people can be empowered to create. The tools are baked into the system, iterated, and predictable. Since the same tools and interface are used, we can easily rely on them. This was one of the past issues with WordPress, where styling often meant learning about multiple interfaces.

Design tools solve this problem, by providing an interface for tools, which was previously accessible only in code. Powerful options are in the hands of creators of all levels. With regard to options, you will find a fine balance – neither too many nor too few.

One key part of these tools is they can be combined across blocks with patterns, but we will cover that later. They are also growing in the blocks they support and becoming increasingly unified, so what is covered here might change, but reflects the current state of WordPress.

The challenge of using these design tools is balancing giving you the styling you want without getting in the way of the theme you are using or what you want to view your site on.

Types of design tools

Design tools contain a wealth of features. They also have common categories across blocks:

• Typography: font size/weight/family, for example, but much more
• Dimensions and spacing, padding, margins, and so much more
• Colors: text, background, and even fantastic things such as duotone features
• Layout: only applying to content blocks such as buttons, columns, and gallery – impact the layout of blocks with these
• Border: radius, color, and even style
• Shadows: a feature since WordPress 6.2

In Chapter 2, we will go into each of these in more detail.

It’s useful to call out a few key concepts around the design tools as we wrap up this chapter and dig deeper into each of them.

Block first

By their nature, they are “block first.” They are attached to the blocks themselves, either exposed within the toolbar as in the case of duotone or through the side panel as in the case of other options such as margin and padding.

If you combine blocks into a group, you can apply the design tools to that block. This is a powerful way to build up applying styles. Hence, everything starts with the block, and that includes design tools and your content.

Intrinsic web design

One of the first questions you may ask while exploring more is where are the responsive controls within the design tools?

There are none within the editor today. While this doesn’t mean there won’t be at some point, they’ll have to – like all tools – be the right ones. The editor is built on intrinsic web design principles. This means that it works irrespective of screen size. The layout adapts and doesn’t add the complexity of trying to work out how to handle things across patterns or blocks. Intrinsic web design is a website design approach that focuses on creating flexible and adaptable layouts.

What does the term intrinsic web design mean though?

Well, it was coined in 2018 by Jen Simmons in her presentation titled Everything You Know About Web Design Just Changed. In simple terms, she talks about true responsiveness, flexibility, and adaptability that is true to the nature of the web. This includes using all the new features, at the time, of CSS, to create an experience that works no matter what you are viewing it on.

What does that mean for you, using the WordPress editor today?

The reality is there are enormous amounts of screen sizes now and supporting every single point, fixing content to those is not getting any easier. There will often be a time when using points where the styling looks bad as you stagger up and down in size.

Intrinsic in the editor means your content is created from the block to look good no matter what device it is viewed on, to be truly adaptable. There are also design tools that exist today, such as typography and layout tools, to help you keep to this concept without having to know anything else or set each breakpoint. This avoids missing one of the so many screen sizes and variations that exist today.

Interface not code

A rather obvious concept is adding an interface to many things for which previously you would have needed to know how to code. This means that the editor not only provides an interface but also allows us to use the same styling options for the same thing across tools. For example, let’s look at range controls. These are controls that allow you to set styling, typically with a slider between a range of options. See Figure 1.17.

Figure 1.17 – Editor side panel showing range controls on button block.

This quote from the Block Editor Handbook explains some of the key interface concepts.

Blocks come in many different forms but also provide a consistent interface. They can be inserted, moved, reordered, copied, duplicated, transformed, deleted, dragged, and combined. Blocks can also be reused, allowing them to be shared across posts and post types and/or used multiple times in the same post. If it helps, you can think of blocks as a more graceful shortcode, with rich formatting tools for users to compose content.

https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/

The interface empowers you, as you can learn how to do something once, and then you can do it across any block that has that tool or setting in the future. For example, once you learn how to change the size of a font, move a block, or even set borders and background colors, it’s the same for all blocks going forward using the design tools in WordPress.

We are just starting our adventure together discovering WordPress styling. Today, you can create far more than what was previously possible. In this chapter, we have learned a lot together. So, let’s go through what we have covered:

• Gutenberg is the code name for a new editing experience in WordPress. This has opened up the opportunity to do things for which previously you needed to understand code.
• Today’s content in WordPress is built up using blocks of different types, from images to text, with unique blocks such as the cover block and traditional ones such as headings.
• We learned that blocks have settings that we can access through primary and secondary areas.
• Also, we learned how to set the mode and style of our editing experience, along with the outline, and see the details of the content we are creating.
• WordPress has a concept of design tools, which are tools to empower styling. Further, we learned that there are concepts that all design tools use.
• Finally, we familiarized ourselves with the different types of design tools, which are color, layout, border, and shadow.

This is all great, but design tools have a lot more to them. In the next chapter, we will look at each of these and even see how you can combine them powerfully to create incredible style combinations.

Questions

Answer the following questions to test your knowledge of this chapter:

1. Please select the false statement

   a. The code name for the block-based editor of WordPress is Gutenberg.

   b. The code name for the block-based editor of WordPress is Blockberg.

2. Movers for blocks can be found:

   a. By the block in the block toolbar.

   b. In the settings sidebar.

3. Which new feature came out in 6.2 for design tools?

   a. Typography

   b. Dimensions

   c. Shadows

4. Define a block.

   a. Blocks are the smallest unit of content and when combined they form the content or layout of a webpage.

   b. WordPress blocks are a brand new plugin that is a page builder.

   c. WordPress blocks are limited units of content that can only be ordered in a set way to create pages and posts on a WordPress website.

Answers

1. Please select the false statement

   b. The code name for the block-based editor of WordPress is Blockberg.

2. Movers for blocks can be found:

   a. By the block in the block toolbar.

3. Which new feature came out in 6.2 for design tools?

   c. Shadows

4. Define a block.

   a. Blocks are the smallest unit of content and when combined they form the content or layout of a webpage.

To learn more about the topics that were covered in this chapter, take a look at the following resources:

• Block Editor Handbook: https://developer.wordpress.org/block-editor/
• The Ship of Theseus, changing the editor: https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
• Release of Gutenberg, the Block Editor in WordPress 5.0: https://wordpress.org/news/2018/12/bebo/
• Hidden features of the editor: https://gutenbergtimes.com/the-secret-manual-hidden-features-wordpress-gutenberg/
• Jen Simmon’s Intrinsic Web Design Lab: https://labs.jensimmons.com/