Experiment: try Theme JSON API to control block orientation #33044
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getdave
added
[Block] Navigation
|
Size Change: -793 B (0%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
|
There's now #33359, which might change things considerably 😄 |
|
yes, with #33359 the "layout" can be defined with theme.json as well. For a "default" layout container, it doesn't make sense to be able to define the "orientation" (in fact that PR considers the The main driving principle though is that "layout" should be declarative, meaning the fact that right now we need to start moving away from CSS used to style how inner blocks are aligned (navigation, buttons, social links, columns). Instead, blocks should choose a layout and the style comes with it, some blocks (like group, navigation) could allow changing layout, allowing a subset of layouts... By making all these things declarative, we can adapt the block editor UI to the selected layout and we can also allow theme.json to define the global layout (not sure yet about specific blocks because these are supposed to be customized in the templates instead). |
|
TBH if Theme JSON takes over layout then this PR isn't required. The objective of this PR is a PoC to explore whether we can utilise Theme JSON to control Nav Block features. The rationale behind this effort is detailed in #30007 (comment). I might well pick another facet of the block to "tweak" instead. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This is a experimental PoC PR to see if it's possible/suitable to utilise the Theme JSON API to control a block's
orientationvia a Theme JSON setting.This is part of a wider exploration to see if it's appropriate to use Theme JSON as a mechanism to control block features.
See #30007 (comment) for context.
Questions
There is much to think about here.
Is using an open array the best option or should you have to pick from predefined options (eg:I think it's better to have limited options.vertical: true,horizontal: true...etc).How has this been tested?
Site Level Orientation
theme.jsonfile in your theme to have the following key under the top levelsettings.layout.orientation:{ "settings": { "layout": { "contentSize": "610px", "wideSize": "1240px", "orientations": { "vertical": true, "horizontal": false } } } }verticalmode because you allowed that in the Theme JSON.Block Level Orienation
Now let's try making this setting apply to the Nav Block only.
theme.json.settings.blocks.core/navigation- it should look like this although be aware you may have other settings already present so you will need to be VERY careful about where you place this code otherwise it won't work:{ "settings": { "blocks": { "core/navigation": { "layout": { "orientations": { "vertical": true, "horizontal": false } } } } } }verticalmode because you allowed that in the Theme JSON.Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).