Key concepts

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.