in the HTML for no good reason. It feels like a hack that we should not be teaching users. My gut was telling me that my preferred solution was the right one. It was also the simplest to implement without resorting to hacking columns. It uses the content alignment matrix control for the Cover block combined with a set width on an inner Group block. However, I ran into issues with this but did not understand why. That was until I dove back into it this week (I will get to this later). Plus, I am stubborn enough to keep trying something until it magically works. Therefore, I went back to the drawing board. Tired of looking at the previous design, I pulled up one of the first pattern ideas I had about a year ago and recreated it with the latest design tools: I also wanted to make sure this solution worked well on any screen size. When moving toward smaller viewports, the content should take up more room until it hits the edge. The method in this tutorial handles this beautifully: This entry in the Building with Blocks series walks through how to create this layout. As a bonus, I will also show how to accomplish it with the new Stack block in WordPress 6.0 for cases where a Cover container does not make sense. Building With a Cover Block For this walkthrough, I am using a custom theme. However, I have also tested with Archeo , Avant-Garde , and Twenty Twenty-Two . It has worked consistently across the entire group. I am also running WordPress 6.0 Beta 1 without the Gutenberg plugin active. Step 1: Add Cover Block Cover block with left-aligned content. For this step, insert a new Cover block along with your preferred image. Most of the settings are not going to matter. I chose toggle on the full-height and full-width options. The most crucial part of this step is to select an option from the content alignment matrix control. In the toolbar, it will be an icon with nine tiny squares, almost dots (see screenshot). To align the blocks from the next steps in the left-middle of the Container, select the first “dot” on the second row. Of course, feel free to play around with different options. Everything else about the Cover design is up to you. Step 2: Add Fixed-Width Group Adding a Group block with specific width. To contain the content you will add in step #3, insert a Group block within the Cover from step #1. The “Layout” tab in the block sidebar panel contains the only necessary options you must set. You will need to define the content and wide options. This is the point where I hit a roadblock in my earlier tests. Percent (%) units behave differently from all others. When used, the Group block is always full-width, and its contents are always centered. No others have this issue. However, not all of them may be used for this particular layout. Viewport-width (vw) and viewport-height (vh) units will align as expected but not expand across the screen on smaller devices. The vital thing to remember is to use a unit type like px, em, or rem. You may also select “Inherit default layout,” but how it behaves will depend on your active theme. I set both the Content and Wide options to 40rem (there is no need for the Wide setting to be larger than Content for this type of design). Technically, this is a max-width value rather than a fixed width. This allows it to adjust to smaller screen sizes. Step 3: Add Content Adding custom content. For the final step, you simply need to add your preferred content inside the Group from step #2. I opted for adding Heading, Paragraph, and Buttons blocks. This can be anything you want—there are no rules. Building With a Stack Block WordPress 6.0 will introduce a new Stack variation of the Group block. Instead of the typical top-down flow, it is a vertical flex layout. I covered this new block in the Gutenberg 13.0 release post this week. To test the following technique, you must either install WordPress 6.0 Beta 1 or the latest version of the Gutenberg plugin. The alternative option is to wait a few weeks for the general release. Step 1: Add a Stack Block Adding a Stack and aligning its content to the left. Insert a new Stack block in the content canvas for the first step. You may choose to give it a background color or gradient. I chose the latter to keep things fun. Unlike the Group block, Stack has content justification controls. If you made it through the first part of this tutorial, you should probably already know where I am going with this. There is a “Justification” control in the sidebar for aligning nested blocks left, center, or right. A duplicate option is also in the toolbar. As with the Cover block, feel free to play around with the options. Otherwise, set it to “left” to follow along. Step 2–3: Rinse and Repeat Fixed-width Group aligned left inside of a Stack variation. Steps #2 and #3 are literally the same as when using the Cover block as the outer container. Therefore, you need to only repeat the process outlined earlier. Again, the most important thing is to define a fixed width for the Group block. This ended up being surprisingly easy after the frustration I had last week. This is also an example of how powerful the block editor has become and how the user experience can sometimes not live up to expectations. If I am hitting roadblocks as someone who lives and breathes WordPress almost every waking moment, other users are likely running into those same issues. I hope that I at least shined a little light on one aspect of layout building in this tutorial. WPTavern : Gutenberg Contributors Begin Early Exploration of a New Distraction Free Mode A truly zen, distraction-free writing experience is my white whale of WordPress features. The one that landed in WordPress 3.2 was pretty close to perfect, but the block editor changed everything. In the early days of the Gutenberg project, contributors worked on different ways to improve the writing experience after reviewers said they found it distracting and disruptive , that the concept of blocks may not be fully compatible with the simple task of writing . The block editor introduced settings like Fullscreen mode, top toolbar, and Spotlight mode, in part to mitigate the less than optimal writing experience. Plugins like MRW Simplified Editor and Iceberg have attempted to bridge the gap, but it’s not the same as having a built-in, core option for distraction-free writing. WordPress does so many things well but I would love to see it provide the best writing experience on the web, without a third-party plugin. Gutenberg contributors have returned to this challenge again with an early exploration of what a drastically reduced interface might look like as a new setting for improving focus. The PR outlines the reasons for the exploration: The UI of the post editor is so heavy it makes it hard to focus. Things appear and disappear: mostly the floating block toolbar and the insertion point flashes depending where your mouse rests on the screen. Using the top toolbar eats screen real estate. Using reduced interface does not reduce much. Writing and general content creation can be more pleasant on a blank canvas with little chrome to obfuscate line of thought. Having full UI power at the press of a key (ESC) is simple enough. Automattic-sponsored Gutenberg engineer Andrei Draganescu created a video to demonstrate what a “reduced interface” setting might look like. Most notably, this mode keeps the editor top bar hidden and prevents the block toolbar and insertion point from appearing. It also hides the drag handle in the block toolbar and some icons in the editor top bar. After some feedback, contributors agreed that it would be good to make the top toolbar available on hover. They also explored the possibility of detaching panels from the top bar so that they float on the canvas. In this mode, users familiar with the keyboard shortcuts can still invoke them to bring the hidden panels to the forefront again. “I wouldn’t call this a writing mode per se because for some people the best writing environment would be the default one, or top toolbar; for others it might be spotlight, etc,” Gutenberg lead architect Matias Ventura said. “The ‘reduced interface’ (which I hope to rename ‘distraction free’) is more about removing UI from the canvas and working more with keyboard and shortcuts.” The PR for exploring a drastically reduced interface is still in the exploratory stage. It’s a good start at reducing the pain points felt by users who just want to write without the distraction of block-related interface elements constantly popping into view.