Part Two – WordPress Full Site Editing and Gutenberg Blocks New Interface

In this video, we’re diving back into the WordPress Full Site Editing and Gutenberg Blocks New Interface experience with the release candidate for WordPress 6.3. If you’re ready to level up your website design game, let’s get started!

Here is the second video in the series, feel free to give if a thumbs up if you like it or if you have any questions to leave them on the video comments:

Intro to the New Interface (0:00): Before we begin, let me quickly explain some essential elements of this new interface. Previously shown as Template Oarts, they are now under Patterns, here we have all the templates and other interactive features at our disposal. But for now, we’ll focus on creating an eye-catching header and setting up the footer.

WordPress Full Site Editing List View

The ListView is critical here, just like layers in Photoshops. We have blocks, which contain inner blocks, or what I would call containing blocks and they can be a Group, Row or Stack block, aligning elements either horizontally or vertically.

Defining a Row by Row (1:13): In our header, we have a Row housing our Site Logo and we’ll be using a group block to add more structure for housing the Site Title and Site Tagline,. You can easily switch between row and stack alignment, and we have a handy sidebar for quick access to block settings.

Setting the Settings for a Block (3:00): Let’s talk about editing block settings. You’ll find the settings icon for a block, and within it, we have two tabs: Settings and Sub Settings.

And then there are Global styles which will affect the entire site, while block styles allow more fine-tuning for individual blocks. It’s essential to understand these distinctions to ensure consistent design.

WordPress block stettings and styles

Alignment and Justification (4:48): The alignment settings inside the inner block are critical for control over horizontal alignment and justification. These settings can be inherited from the parent group block, which saves time when designing multiple elements with consistent styles.

Group blocks and settings (6:58): The group block is our friend when it comes to full site editing. It will be used throughout our design, providing a smooth flow for our elements. Global styles set in the group block will be inherited by its contents, ensuring a cohesive look for the entire site.

Conclusion: In the video we’ve covered the basics of navigating this new full site editing experience. More information about part one can be found here. See you in the next video!


Leave a Reply

Your email address will not be published. Required fields are marked *