8. WordPress’s New Block Editor

Introduction

WordPress recently (Dec. 2018) was updated to version 5. With that update, WordPress released a new visual editor called Gutenberg in development and Block Editor in production. The old visual editor remains available and is called the Classic Editor.

Since I didn’t use the old (classic) visual editor much, it’s been easy to switch to the new (block) visual editor. While this post is not intended as a tutorial, a good tutorial for the block editor can be found on wpbeginner.

The purpose of this post is threefold: (1) briefly list some of the advantages of the block editor over the classic editor, (2) look at how the blocks are stored in code to get a rough understanding of what the blocks are, and (3) conclude with a cautionary tale and an example of the reusable block (unrelated to the tale).

Advantages

By assigning a related chunk of HTML code to a named block, WordPress can provide more control to the user, defining in advance what is and is not appropriate for that block. As a result, the HTML code is kept clean (unlike as is often the case with a “page builder” that forces the HTML code to fit the visual design). In addition, many functions that were previously provided through plugins are now native to the block editor.

Here is an incomplete and brief list of advantages the block editor brings. The ability to create …

  • tables
  • columns
  • drop-caps (such as the “W” at the beginning of this post)
  • re-usable blocks for blocks you have customized
  • embedded media (such as YouTube videos)
Tables
DefaultCustom
column widths adjust automaticallyleaving it, but you can turn it off in Table Settings
no bordersapparently you need to use a plugin or add HTML code
(which I’ll do, using something like:
style=”border:1px solid #cccccc;”)

After I entered the border code, WordPress detected that the table no longer conformed to its table block requirements. The elegant thing is that WordPress prompted me with a choice to convert to HTML or to repair the table, and once I chose to repair the table, I was shown a preview of the changes that the repair would make (this is the elegant part):

The repair would have removed all my border code (shaded dark red), and so I chose instead to convert to HTML.

Once I chose “convert,” the table became HTML, pure and simple (as shown in the left column in the illustration above). In other words, there is no What You See Is What You Get after conversion, even in the visual editor.[1] This is fine with me: the Block Editor laid out the basic table (very time consuming) and I like editing code for the final touches. But people who do not like editing code should look for a theme or a plugin that supports customized tables.

Columns

The columns block, at least with the theme I’m using (a theme that has not been updated for WordPress 5), is hardly different from a one-row, two-column table. The text does not flow from the bottom of one column to the top of the other.

So I move my cursor and type here, too. Out of the box (again, with an older theme), the columns may not be sufficiently responsive to hand-held devices. This article, however, offers detailed instructions on addressing that and other issues through CSS styling.

Drop-caps

By default, following a heading (such as “Drop-caps”), a paragraph block is created. To create a drop-cap, simply toggle the “Drop Cap” control under the “Block” settings.

Instructions (which I’ve followed) for styling the drop cap are explained here. As you’ll note, getting the drop-cap to display as you want it in a browser is one thing (modifying style.css in your child theme). Getting it to display as you’ve styled it in the WP editor is another (adding a “blocks.css” style sheet to your child theme).

Reusable Blocks

Of the advantages provided by the block editor, one of the chief may be the reusuable block. First I will create a block which is designed to hold an image and text (“Media and Text”—easy to find with the search box provided in the block editor).

favicon

This is my site’s favicon. Using the Block settings (opened via the gear in the top right of the screen), I shrank the default text size and added a background color. In the HTML code I added transparency to the background and re-sized the image. A couple of my efforts broke the block, so I went to the revisions for this post and stepped back to a version that worked.

That block took some work, so I’m saving it by dropping down the 3 vertical dots in the tool bar and selecting “Add to Reusable Blocks.” At the end of this post, I’ll re-use the block to demonstrate its function. Once you save a block as “reusable” the HTML refers only to the block id and not to the elements in the block, so you cannot go back into the HTML to make further edits. In that respect, it’s good to get everything the way you want it before turning it into a Reusable block.

You can, however, edit a block (using the edit button). When you do this—say, changing the word “can” to “may”—every instance of the block in that particular WordPress site will reflect the change. If one has not been made yet, I suspect a plugin will be created that allows you to clone a Reusable block, giving it a new name and making changes that will not affect instances of the original block.

Embedded Objects

Below this paragraph, I am embedding a very important video on how to turn an old pair of running shoes into running-on-ice-and-snow shoes.

Since this video is on YouTube, I chose the “YouTube” embed icon. In the process I learned that Google has disabled the parameter ?rel=0 that used to allow one to suppress the related videos at the end of the embedded video—but that matter is unrelated to WordPress[2].

How Blocks are Designated Behind the Scenes

How Blocks Appear in the Code Editor

The block assignments look like this in WordPress code. The start of a paragraph (i.e. text block): <!-- wp:paragraph -->. The end of a paragraph: <!-- /wp:paragraph -->. After the assignment, standard HTML follows.

Here’s how the reusable block is referred to in the code. Note the closing slash (unlike paragraphs that have an opening comment and a closing comment): <!-- wp:block {"ref":1120} /-->.

How Blocks Appear in the Generated HTML

Seeing how simple the markup for the blocks appears in the WordPress code, I was curious about how WordPress converted the blocks to HTML, so I inspected the source code of this post when it was rendered in a browser. It’s remarkably clean HTML:

  • paragraphs: simple HTML, opening with a <p> and closing with a </p>
  • tables: standard table element followed by a class, <table class="wp-block-table">
  • columns: a parent div (<div class="wp-block-columns has-2-columns">) followed by a div for each column (<div class="wp-block-column">)
  • drop-caps (such as the “W” at the beginning of this post): a paragraph with a class, <p class="has-drop-cap">
  • re-usable blocks for blocks you have customized: the HTML depends upon the type of block you make reusable, of course; in my case the block involves a parent div (<div class="wp-block-media-text alignwide" style="grid-template-columns:33% auto">) followed by a figure element for the image (<figure class="wp-block-media-text__media">) followed by a div for the text (<div class="wp-block-media-text__content")
  • embedded media (such as YouTube videos): a figure element followed by a div that contains the URL.
In Closing…

Cautionary Tale: Using the code editor (which I find indispensable) and the block editor gives rise to some tug-a-wars eventually.

For example, because the block editor appears to constantly monitor the post being edited, even when editing in the code editor, I’ve learned to close all my element tags even if I’ve not finished editing the tag. On several occasions, I began to enter a URL, such as <a href=”thisURL.com” and, at that point, touched something in the WP user interface that triggered an unsuccessful code cleanup. Because I did not close the <a href…, the code cleanup sprinkled quotation marks on the following text:

On several occasions, I began to enter a URL, such as <a href=”thisURL.com” and,=”” at=”” that=”” point,=”” went=”” to=”” look=”” up=”” the=”” color=”” i=”” add=”” for=”” external=”” links=”” (darker=”” blue).=”” but=”” because=”” left=”” element=”” open,=”” wordpress=”” editor

Without dwelling on the matter, since it only applies to those who use the code editor, I must mention that the block editor complicates matters in ways the classic editor did not. For example, when I add an element for which there is not a block, such as an <h5> or a <p>&nbsp;</p> in order to add some vertical spacing beneath a block (which several needed)—when I add the elements and return to the block editor, the interface marks elements not contained in blocks with a header that displays “Classic.” This distinction is necessary because those elements are given a different editor toolbar (the classic toolbar), but the distinction makes the editing page busier.

Finally, below is the reusable block I said I’d insert. If one had frequent use of boilerplate, whether text or mixed media, this could prove quite useful.

favicon

This is my site’s favicon. Using the Block settings (opened via the gear in the top right of the screen), I shrank the default text size and added a background color. In the HTML code I added transparency to the background and re-sized the image. A couple of my efforts broke the block, so I went to the revisions for this post and stepped back to a version that worked.

 

 

______Footnotes______

[1] The reason the HTML appears as code in the visual (block) editor is because it is assigned a specific block type: <!-- wp:html -->. If one were to delete the opening and closing wp comment, the table would appear as a table with an editing header above it that labels it as “classic” (i.e. editable with the classic visual editor).

[2] The “related videos” would not bother me if the videos were closely related, but as is often the case, they do not come close.

None of these related videos has anything to do with running or winterizing shoes.
None of these related videos has anything to do with running or winterizing shoes.

Leave a Reply

http-www-in1accord-net-wp