-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Try cascading nav styles through classnames #37473
Conversation
Size Change: +792 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
Thanks for the PR! To me this feels like a good pragmatic step forward. Justifications in a classname affords the same opportunities inheritance does, but a bit more flexibility and simplicity, I think it works well, and in a quick testing, justifications are working across the board for the navigation block. Nice! Could we change the classnames from |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a great approach. Close to what I had in mind with the "no-filters" approach. 👍
@@ -106,6 +106,45 @@ $navigation-icon-size: 24px; | |||
height: inherit; | |||
} | |||
} | |||
|
|||
// Custom properties for layout style cascade: default values. | |||
--layout-justification-setting: flex-start; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we make these CSS variables more specific to the navigation block or something? They feel a bit too generic.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done! I prefixed them with "navigation".
@jasmussen the classnames we're using here are the |
Sorry about that, and thanks for the pointer! I guess this one just needs a code review and a green light. |
I think the layout justify classnames are also being removed cc @ntsekouras. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
Yes, that PR will be reverted. |
* Move layout custom properties to filter. * Try cascading nav styles through classnames * Improve formatting. * Remove hook * Fix PHP lint errors. * More specific variable names
Description
Alternative to #37438. Instead of adding custom properties to layout, classnames are added to the navigation block wrapper and custom properties are hooked to those classnames.
I think this is neater than adding the custom properties as inline styles, because this way they live in a single place - the stylesheet - instead of being duplicated across JS and PHP files. Also, we're already generating a couple of the justification classnames anyway, to attach submenu styles.
How has this been tested?
Create a Navigation block; change justification/orientation and verify everything works as expected in both editor and front end.
Screenshots
Types of changes
Checklist:
*.native.js
files for terms that need renaming or removal).