Opened 22 months ago
Last modified 15 months ago
#46750 closed enhancement
Twenty Nineteen: Add styles to support the section block — at Initial Version
Reported by: |
|
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):
Testing:
- 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.
- 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
- 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.