WordPress Basic Documentation Blocks

Consider reading our Classic Editor instructions first to cover the general process of working within WordPress. This page covers a few brief aspects of using the Block Editor. See additional resources in the sidebar of the Classic instructions page. Understand that WordPress Block development is progressing rapidly, so instructions can become outdated.

Setting up your workspace

The first thing I do (when editing a page or post) is click the three vertical dots in the upper right and unclick Fullscreen mode; that makes the left navigation show (on larger screens). For sites using Genesis themes, the “G” icon can be clicked for theme options such as Layout with or without a Sidebar, although this has likely already been set by me in your theme. The Settings icon (gear) will toggle the options panel, and the Page and Block tabs display the available options including Permalink, Featured Image, Parent Page, and Sidebar Selection.

The “+” sign, upper left opens the tool chest of Blocks, Patterns, and Reusable Blocks (if any). You can also access and search for a block from within the page.

Page Structure – “Where Am I?”

As in any “drag and drop” layout program, it can sometimes be challenging to find your place within the page amongst all the blocks. WordPress “Blocks” is less of a drag and drop than some other systems during the “+” tool selection process. Once in the page, blocks can be moved by dragging and dropping or with arrows.

Put your cursor approximately where you want to be. You will likely see “plus” signs appear to allow adding new blocks. If a “+” doesn’t appear in the workspace, you can hit an “enter” from the previous block, or click the upper left “+”, add some content, and then move that block as needed.

You may not be sure, for example, whether you are within a column block or below the entire block. To find your place easily, click the three horizontal lines in the upper left to display the Block navigation and that will help you get exactly where you want. If you are still not where you want to be, click your cursor in the title, then click the three horizontal lines and you will see the overall block structure; click the block you want to be in, then further refine your location. Or click in the title, hit enter, chose a block, type or fill it, then move it down with the arrow or drag it to where you want it. This challenge is not unique to WordPress; you can end up with blocks inside of blocks unintentionally in any system.

Populating Your Page or Post

The entire page can be single column, populated typically by headings, paragraphs, and perhaps a list or images—the most commonly used blocks. In fact, some pages carried over from a previous website might be presented in a “Classic” Block such as this one, where all formatting is done in the icon bar above rather than in the sidebar with Block options.

For more visual appeal you may want a page with a sidebar (populated with widgets, and layout chosen under the Genesis icon upper right). A more flexible alternative is to insert a Column Block and then fill it with containers, paragraphs, images, lists, etc. This page is full width so very wide images can be displayed.

For emphasis and understanding, I have coded this page to show each of the Blocks (along with “figures” and “divs” within them) when you hover with your mouse.

The following block is a Table (and this is the end of the “Classic” Block):

Row 1 Column 1	Row 1 Column 2	Row 1 Column 3
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3
Row 3 Column 1	Row 3 Column 2	Row 3 Column 3

Tables will maintain their rows and columns even on small devices, check it out.

Columns can be very useful as a means of housing various blocks and providing the ability to drag and drop with a more creative result. Balancing content in columns for appealing display on all device sizes can be a bit challenging. Note how the columns stack on small devices, so order the content by importance and flow. Perhaps a second column block will help with additional content flow. Blocks can be specified as regular, wide, or full width in some themes.

Following is a (regular) Column block, ironically the tool that allows specified percentage widths and a fixed margin between.

Following is an Advanced Column block which allows variable margin between but only specified column percentages. Either of these column blocks allows wide or full width when the theme supports that feature.

Following are two versions of “Media & Text” blocks. The first, within the “Layout Elements” block choices, simply floats an image to one side of a paragraph. Delete and change what you don’t want.

The second, within the Genesis Blocks “Layouts” block choices, or the icon at top left in the admin, includes some preformatted text and an image, each in a column, and can be set to align wide or align full width for visual variety. Additionally, because it is within columns, the margins and padding can be specified.

Following is a full width Image (not properly displayed due to sidebar and lack of appropriate CSS):

Text can be modified using settings at right under the Block tab. Your developer can pre-set theme colors in the palette or define CSS classes if you request. A CSS class can be a way of adding font styling, a background, or border to a type of content, similarly to how “Quote” and “Testimonial” styling is already predefined within blocks.

Injustice anywhere is a threat to justice everywhere.

Martin Luther King Jr.

The following block is a YouTube embed. Simply copy the URL and a visual snippet will be shown:

The following block is a WordPress site embed.

Japanese knotweed facts