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 1) click the three vertical dots in the upper right and 2) (un)click Fullscreen mode; that makes 3) the left navigation show (on larger screens).

The resulting screen is shown below with the left admin nav displayed. Also in the upper right, the Settings icon (gear) will toggle the options panel. 4) The Page and Block tabs display the available options for each. The Page Block options that will appear under that tab include Permalink (which is under the Title in Classic mode), Featured Image, Parent Page, and (if enabled) Sidebar Selection.

5) Click the List View Icon (three staggered lines) to expand the page structure and assist in moving through the various contents. 6) Notice that when the Gallery Block is selected in the List View (in blue), 7) the Settings are shown and accessed under the Block tab at right.

For sites using Genesis themes, a “G” icon in the upper right 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.

8) To add more content, hover in the approximate location, watch for and click the “+” sign. The Block selector will open. Your most frequently used blocks will appear first. If you don’t see the Block you want, start typing in the search bar or click Browse All at the bottom to expand the full choice of blocks; the full list will appear at left in place of the List View.

Populating Your Page or Post

To add a block, put your cursor approximately where you want to be within the Page content. You will likely see one or more “plus” signs appear to allow adding a new block. Click the “+” and add your block, reviewing #8 above if needed.

In a paragraph flow such as this part of this page, you can hit an “enter” at the end of a paragraph and select a new block.

Within the page content, a highlighted block can be moved with the Drag and Drop handle, second icon from left in its icon bar, or with arrows, third icon from left. Blocks can now be moved or deleted in the List View as well.

The “+” sign, upper left, to the left of the List View icon, opens the entire tool chest of Blocks, Patterns, and Reusable Blocks (if any).

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 where all formatting is done in the icon bar above rather than in the sidebar with Block options. A Classic block can easily be converted to blocks when more flexibility is desired.

For more visual appeal you may want a page with a sidebar (populated with widgets, and layout chosen under the Genesis icon upper right). This is useful for a well-populated blog where categories and recent posts might want to be shown on every blog page.

A more flexible alternative is to insert a Column Block and then fill it with containers and/or groups, and inside of those insert paragraphs, images, lists, etc. This page is full width so very wide images can be displayed. Groups are handy when you want to move sensible groupings around to test various layouts or orders. A typical way to group, if you didn’t start with a group block, is to click a sub-heading, hold the shift key, then click the last paragraph in that group, then click the three-dot option icon at right and click “group.”

For emphasis and understanding, I have coded the remainder of 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, 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. However, balancing content in columns for appealing display on all device sizes can be a bit challenging; for this reason I often “align” an image within text content rather than placing the two in columns. 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 (so that your columns flow left right left right rather than long left long right). Blocks can be specified as regular, wide, or full width in some themes. Take a look at how the columns flow on mobile vs. how the table cells above don’t flow.

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:

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 above YouTube embed will automatically render at approximately only 500px wide. To show it the full width of your content column or page width, use a Custom HTML Block instead and change the width and height as appropriate. For example, a 4/3 aspect ratio might be 840px wide and 630px high, or a 16/9 aspect ratio might be 1140px wide and 640px high. This page explains more detail about getting what you need from YouTube in “2. Use Embed Codes to Create iFrames:” https://kinsta.com/blog/wordpress-iframe/

The following block is a WordPress site embed:

Japanese knotweed facts

The following is a Twitter embed:

Every time I walk into a restaurant with my mask affixed for 30 seconds before being seated, then spend 45 minutes unmasked eating and drinking, and then affix my mask again for 30 seconds while leaving, I give thanks for how many thousands of lives this practice has surely saved

— Michael Tracey (@mtracey) October 17, 2021