WordPress 5.3 and the Block Editor

WordPress released version 5.3 on November 12, 2019. While WordPress 5.3 has a host of smaller improvements, like a better site health interface and higher contrast for improved accessibility, the most notable changes are in the block editor. These changes include a new block type called “Group” and several changes to existing blocks like Columns, Image, and Table.

The Group Block

The admin view of the Group Block
Group Block UI
Group Block Options/Attributes
Group Block Options/Attributes

The Group block is a game changer. It will replace the need to wrap core blocks in a container or custom class to get them to behave. The Group block offers a double wrapper and some additional customization features that give existing blocks new life. Using alignment options, the exterior wrapper of the Group block can be set to full width while the interior blocks stay at a standard width. This allows administrators to create very interesting, varied block layouts without the need to know code or for developers to write code.

A demo of a two column group within a three column block

How does it work?

For those that want to see how Group works for themselves here’s the source for the block above:

<div class="wp-block-group alignfull has-vivid-cyan-blue-background-color has-background">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-columns are-vertically-aligned-center">
      <div class="wp-block-column is-vertically-aligned-center">
        <h2 class="has-text-color" style="color:#ffffff">
        This is a 2 column block inside of a group
        </h2>
        <p style="color:#ffffff" class="has-text-color">
        This gives you the flexibility to create dynamic sections without needing to code a
        custom block or create one via Advanced Custom Fields. Cool, right?
        </p>
      </div>
      <div class="wp-block-column is-vertically-aligned-center">
        <figure class="wp-block-image size-large is-resized is-style-circle-mask">
        <img src="https://teamcolab.com/wp-content/uploads/2019/10/colab-logo.jpg"alt="" class="wp-image-112" width="279" height="279" srcset="https://teamcolab.com/wp-content/uploads/2019/10/colab-logo.jpg 600w, https://teamcolab.com/wp-content/uploads/2019/10/colab-logo-300x300.jpg 300w, https://teamcolab.com/wp-content/uploads/2019/10/colab-logo-150x150.jpg 150w" sizes="(max-width: 279px) 100vw, 279px">
        </figure>
      </div>
    </div>
  </div>
</div>
The admin view of a column block

The Improved Columns Block

Columns are getting a huge upgrade. You can now declare uneven percentage-based columns for those times you need a layout with a slimmer sidebar. While this column block upgrade is not as shiny as the new group block, there are still plenty of cases where this proves to be tremendously useful.

The admin view to choose a column layout

The Improved Image Block

The image block is getting some nice polish as well. Images can now be styled with a circle svg mask out of the box. With this new feature supported, this opens up possibilities for easily adding alternate shaped or branded svg masks in the future.

The Improved Table Block

Tables have always been a major headache for WordPress content creators and developers alike. The new table block adds some nice features including adding headers and footers.

The admin view of the table block

In Conclusion

The new block editor (don’t call it Gutenberg please) is going to be a powerful asset in creating dynamic and easy to use layouts in WordPress 5.3 and is available for update as of November 12.

For a more detailed list of all of the improvements made in WordPress 5.3 here’s a link to their post:
https://wordpress.org/news/2019/11/kirk/

written by COLAB Development Team

Lets build something together.

We’d love to hear from you, learn more about your needs, and see if we can help.

Contact Us