Michael Sperber

• WordPress Plugin
• Gutenberg Pull Requests:
  • Columns Block
  • Media & Text Block

Description

In WordPress, Columns Blocks and Media & Text Blocks are frequently used to display media and content in a “zig-zag” pattern. For example:

[image]   [text ]
[text ]   [image]
[image]   [text ]

For this type of pattern, users typically want the content to stack on mobile like this:

[image]
[text ]
[image]
[text ]
[image]
[text ]

With the current Columns Block behavior, the content ends up looking like this:

[image]
[text ]
[text ]
[image]
[image]
[text ]

I took note of two issues on WordPress/Gutenberg where it was requested to allow reverse stacking of columns for the Columns Block and the Media & Text Block.

I wrote a simple WordPress plugin that defines a custom style called Reverse on mobile for the Columns and Media & Text Blocks. Blocks with this style will stack in the opposite order when the screen width is narrower than the responsive breakpoint for that block.

For Columns Block, this is done simply:

@media (max-width: #{ ($break-medium - 1) }) {
	.wp-block-columns.is-style-reverse-mobile {
		flex-direction: column-reverse;
	}
}

For Media & Text Blocks, their current mobile behavior is to always stack the media on top. Therefore, I defined the Reverse on mobile option to stack the text on top.

	.is-style-reverse-mobile.wp-block-media-text.is-stacked-on-mobile {
		.wp-block-media-text__media {
			grid-column: 1;
			grid-row: 2;
		}

		.wp-block-media-text__content {
			grid-column: 1;
			grid-row: 1;
		}
	}

With the aforementioned “zig-zag” being a common design pattern, and this being a frequently requested feature, I created a pull request on WordPress/Gutenberg to suggest including these styles as a core feature.

Languages and Technologies Used

• JavaScript
• PHP
• CSS