WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 5 weeks ago

#46750 closed enhancement

Twenty Nineteen: Add styles to support the section block — at Initial Version

Reported by: kjellr Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: Cc:

Description

Gutenberg has recently merged in a new "Section" block:

https://github.com/WordPress/gutenberg/pull/13964

This block acts as a container for other blocks. The Section block supports standard, wide and full alignments for both itself and its child blocks. The original wide + full styles for Twenty Nineteen only work properly for direct children of entry-content, so the theme requires a patch to ensure proper compatibility with this new block.

The Section block is currently assigned to the Gutenberg 5.5 milestone. This patch (or a similar one) should be merged into Twenty Nineteen alongside that release, to ensure that the Section block works as intended upon release.

The attach patch includes styles for the Section block, in both the front end and the editor. In general, standard, wide and full-aligned blocks inside of Section blocks should appear consistent with the way they appear outside of Section blocks. Since Section blocks themselves can in turn be standard, wide, or full-aligned, the behavior of child elements should roughly correspond to the recommendation laid out here:

https://github.com/WordPress/gutenberg/pull/13964#issuecomment-472562800

Here's a screenshot of what to expect in Twenty Nineteen (note that padding exists on the "Wide" block when the Section block has a background color in this screenshot):

https://cldup.com/-5A_Ni994H-3000x3000.png


Testing:

  1. Until there's a build for Gutenberg 5.5, the best way to test this is to compile the master branch of Gutenberg and run it on your core dev environment.
  1. Add a new post, and switch to the code view. In that view, paste in this sample content to test a wide variety of Section block alignments, alongside various child blocks: https://cloudup.com/czLTdIYcU5O
  1. Verify that all appears as expected, and that there is no horizontal scroll added to the page. Be sure to test across a wide range of breakpoints as well!

Props @get_dave for all the help getting this working initially.

Change History (0)

Note: See TracTickets for help on using tickets.