Tip: Code Editor

Remember that you can switch from block/visual mode into the code editor with:

Shift-CTL-ALT-M (all at once). There are some things that can only be done in raw code, but be careful and check the reaction of the block editor (Gutenberg) when you shift control back to it: Ol’ Gutenberg is pretty fussy about what it’ll allow you to do to its nicely formatted source code. Some things you can do (and will likely want to):

  1. Simply observe how things are constructed without changing anything. The code is legitimate HTML with some additional code added as Gutenberg instructions, and looking at the code behind what you’ve built in blocks, can be an easy way to get an idea of HTML.
  2. Add custom classes to an element if it’s not one of the settings options. Example:
    <img class="wp-image-40 list-img-right" style="width: 300px;" src="https://alejandrapalos.info/wp-content/uploads/2020/11/exhib_img_3-300x225.jpg" alt="Gallery exhibition">
    In this code, (I believe) WordPress creates the original class parameter for the image, based on its system id. You can add additional classes afterwards, separating them by spaces, but it’s a good idea to know what they do. This happens to be from the Exhibitions page and it allows us to float an image embedded within that list to (in this case) to the right. I’ve tried adding style code within the existing “style” clause, and it appears to work until you use the block control to change the width. That gets confused by the extra info, but you can work around that by just avoiding that control after you mess with the code.
  3. Copy stuff from one page to another– both with items in code editor mode– if for some reason the blocks don’t copy correctly. I’m uncertain if this is a problem.

Leave a Comment