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.

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).

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. Note that this page (because of the sidebar) does not (yet) display full width images correctly.

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. Also note that the blocks which have been specified as “wide” or “full” width, may not look as good on this page because the sidebar has also been specified.

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.

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