Developer Hours: Web Layouts

This repo contains examples that were showcased in Developer Hours: How to build modern web layouts with WordPress blocks. It is a child theme of the default Twenty Twenty-Four theme, which must be installed to test.

Instructions

• Git clone this repo into your /wp-content/themes folder.
• On the Appearance > Themes screen in your WordPress admin, activate the Dev Hours Web Layouts theme.
• Create a new post/page/template in the Block Editor.
• Open the Inserter, select the Patterns tab, followed by the Developer Hours category.
• From there, select a layout pattern that you want to test.
• Have fun!

Notes

The Grid layouts require the Gutenberg plugin installed and activated. Note that future versions (at the date of this repo going live) are required for two of the layouts:

• Gutenberg 17.8+: Required for the Grid Col/Row Span pattern.
• Gutenberg 17.9+: Required for the Grid Interactive pattern.

Depending on the version of Gutenberg you're testing, you may need to enable Grid-related features via the Gutenberg > Settings screen in the admin.