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.

The first thing I do 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. The Settings icon (gear) will toggle the Document and Block options including Permalink, Featured Image, Parent Page, and Sidebar Selection.

It can be challenging to find your place within the page amongst all the blocks. Put your cursor approximately where you want to be. You will likely see “plus” signs appear to allow adding new blocks, but you may not be exactly where you want to be such as within a column block. Click the three horizontal lines in the upper left to display the Block navigation and that will help you get exactly where you want.

The entire page can be single column, populated typically by headings, paragraphs, and perhaps a list or images. For more visual appeal you may want a page with a sidebar (populated with widgets) and/or columns. 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:

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.

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 can be a bit challenging. Note how the columns stack on narrow 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 Atomic 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. 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 pre-defined 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