Gutenberg’s Block Element Wrappers
A reference sheet of Gutenberg’s block element wrappers. Used when writing in the code editor. Use these to lessen the chance of conflict when someone moves between the visual and code editors.
At this point, the Gutenberg editor in WordPress is a mixed blessing. It’s great for simple edits, and as far as visual editors go, it’s pretty good.
If your doing anything complicated it’s still a bit unpolished. First, you either can’t find a block that does what you need it too, or if you can find a block that should work, the user interface may not let you see what you’re doing and you end up with a rat’s nest of empty containers or, more likely, you delete the block and start over.
Normally I would just use the code editor to begin with, but sometimes the Gutenberg visual mode is faster, so I’ve been trying to use it to my advantage. When Gutenberg fails me I swap over to the code editor and “usually” I don’t have any further problems. …but sometimes when I save my code, WordPress or Gutenberg (I’m not sure witch), jumbles, deletes, and/or adds to the code that I’ve written.
WordPress has always been bad about “Helping” you by adding breaks and paragraphs, but now it will flat out delete stuff.
The “solution” to this is to trick Gutenberg into thinking it wrote the code.
When you use the Gutenberg visual editor, it adds wrappers that look like comments to the code. You can see this when you add something in the visual editor, and then swap over to the code editor.
When Gutenberg starts acting up, I use the code references below to write my code the way Gutenberg expects it to be. It has the added benefit that when you swap over to the visual editor, you are far less likely to have a block that can’t be displayed correctly.
This works for the the majority of the time, but sometimes you have to fiddle with it more than you should need to, but now I rarely have to redesign a section of a page because Gutenberg won’t play nice.
This page is very much a work in progress. One, because I’m not done adding all of the wrappers that already exist, and Secondly, Gutenberg is a living program and they are making a lot of improvements to the program.
If you’re wondering, I actually like Gutenberg. It’s a bit rough around the edges, but I think it’s pros outweigh it’s cons.
A
B
C
CLEARFIX
<!-- wp:paragraph {"className":"clearfix"} -->
<p class="clearfix">
CONTENT
</p>
<!-- /wp:paragraph -->
<!-- wp:html -->
<div class="clearfix"></div>
<!-- /wp:html -->
<!-- wp:columns {"columns":2} -->
<div class="wp-block-columns has-2-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
COLUMN 1
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
COLUMN 2
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:columns {"columns":2} -->
<div class="wp-block-columns has-2-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image {"id":253} -->
<figure class="wp-block-image">
<img src="#" alt="" class="wp-image-253"/>
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
PARAGRAPH CONTENT
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:code -->
<pre class="wp-block-code">
<code>
<div>CONTENT</div>
</code>
</pre>
<!-- /wp:code -->
D
DROPCAP
<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap">
CONTENT
</p>
<!-- /wp:paragraph -->
E
F
G
H
H2
<!-- wp:heading -->
<h2>
CONTENT
</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3} -->
<h3>
CONTENT
</h3>
<!-- /wp:heading -->
<!-- wp:heading {"level":4} -->
<h4>
CONTENT
</h4>
<!-- /wp:heading -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:html -->
CONTENT
<!-- /wp:html -->
<!-- wp:html -->
<figure>
<iframe src="#" width="600" height="450" frameborder="0" data-mce-fragment="1">
</iframe>
</figure>
<!-- /wp:html -->
<!-- wp:html -->
<script>
jQuery();
</script>
<!-- /wp:html -->
I
IMAGE – ALIGN CENTER – NO id
<!-- wp:image {"align":"center"} -->
<div class="wp-block-image">
<figure class="aligncenter">
<img src="#" alt=""/>
</figure>
</div>
<!-- /wp:image -->
<!-- wp:image {"align":"left"} -->
<div class="wp-block-image">
<figure class="alignright">
<img src="#" alt=""/>
</figure>
</div>
<!-- /wp:image -->
<!-- wp:image {"id":-****,"align":"right"} -->
<div class="wp-block-image">
<figure class="alignright">
<img src="#" alt="" class="wp-image--****"/>
</figure>
</div>
<!-- /wp:image -->
<!-- wp:image {"align":"right"} -->
<div class="wp-block-image">
<figure class="alignright">
<img src="#" alt=""/>
</figure>
</div>
<!-- /wp:image -->
J
K
L
LIST – ORDERED
<!-- wp:list {"ordered":true} -->
<ol>
<li>
CONTENT
</li>
</ol>
<!-- /wp:list -->
<!-- wp:list -->
<ul>
<li>
CONTENT
</li>
</ul>
<!-- /wp:list -->
M
N
O
P
PARAGRAPH
<!-- wp:paragraph -->
<p>
CONTENT
</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"alignleft"} -->
<p class="alignleft">
CONTENT
</p>
<!-- /wp:paragraph -->
Q
R
S
SPACER – with height setting & .clearfix
<!-- wp:spacer {"height":128} -->
<div style="height:128px" aria-hidden="true" class="wp-block-spacer clearfix"></div>
<!-- /wp:spacer -->
T
SPACER – with height setting & .clearfix
<!-- wp:table -->
<table class="wp-block-table">
<tbody>
<tr>
<td>LEFT</td>
<td>CENTER</td>
<td>RIGHT</td>
</tr>
<tr>
<td>LEFT</td>
<td>CENTER</td>
<td>RIGHT</td>
</tr>
</tbody>
</table>
<!-- /wp:table -->
U
V
W
X
Y
Z
* This assumes that you have clearfix in your stylesheet.