Buttons: Add typography supports to button/s blocks #43934
Merged
Conversation
This file contains hidden or 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
aaronrobertshaw
added
[Type] Enhancement
aaronrobertshaw
requested review from
ajitbohra,
fabiankaegy,
juanmaguitar and
ryanwelcher
as code owners
6 tasks
|
Size Change: +540 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
This was referenced Sep 7, 2022
Contributor
|
A font size added in the global styles doesn't override the default font size added to the button link, eg. in the following font size x-large is added in global styles, but doesn't show in the top button, but the second one has x-large set at the Buttons block level in post editor and it does work as the use of
this could be a tricky one to resolve, but will have a play around with it. |
Contributor
Author
|
Thanks for testing this one @glendaviesnz 👍
Can you confirm if you were adding the font size to the |
Contributor
That was with |
Contributor
Author
|
Thanks for clarifying. I did encounter that while testing this myself. It's what lead to the note in the PR description.
Given you can get that global styling for buttons via the |
Contributor
Sorry, I misread that description note, I agree that no need to make this a blocker. |
glendaviesnz
approved these changes
Sep 9, 2022
Contributor
glendaviesnz
left a comment
glendaviesnz
left a comment
There was a problem hiding this comment.
✅ Could add typography supports in post editor tools panel and changes were reflected in editor and frontend for Button and Buttons
✅ Could set typography supports in global styles and change reflected in site editor, post editor and frontend, with exception of the noted issues of Button styles overriding some global Buttons styles
✅ Could set typography supports in theme.json and both reflected in editor and frontend
Contributor
Author
Too many uses of |
aaronrobertshaw
deleted the
add/typography-support-to-button-and-buttons-blocks
branch
ellatrix
reviewed
Nov 28, 2023
| display: table; | ||
| } | ||
|
|
||
| .editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link { |
Member
There was a problem hiding this comment.
Why was .editor-styles-wrapper needed here? What breaks if it's removed?
Contributor
Author
There was a problem hiding this comment.
At the time of this PR, I believe it was required for custom typography settings to be applied properly when set on a block instance. From memory, that might have been related to Global Styles getting scoped to under that editor styles wrapper class.
If we want to clean this up, we'd just need to re-test following the PR test instructions. If the button styles all behave we should be safe to remove these editor styles.
I've run out of time today but a quick test shows it should be ok to remove the editor styles. I might have also found a secondary minor issue with text transform styles.
A draft PR is up in #56630 but I'll need to give it a more thorough test before it is ready.
Thanks for flagging this @ellatrix 👍
Member
There was a problem hiding this comment.
This might help to avoid it for the non iframed editor: #56649
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.
Related:
What?
ButtonsblockButtonblockNote: This PR is very similar to #43649 & #41435 but combines the changes for both blocks to facilitate easier testing and ensuring the two "opt-ins" play nice together.
Why?
Buttonsblock allows styles to be set once for for all buttons in a given groupHow?
ButtonsblockButtonblockButtonsblock if a font size is selected. This allows such blocks to apply styles to the inner button link to inherit font size.ButtonorButtonsblock has text-decoration applied and style the inner button links to inherit that style.Testing Instructions
Buttonsblock to a post and select itButtonblock and repeat the same process as with its parent block.Buttonsblock in both the editor and front end.Buttonblocks continues to work.Buttonsblock via theme.json together with styles for theButtonblock and ensure that theButtonblock styles take precedence.Example: Theme.json snippet. (
Note: Given the
Buttonblock's styles these might override theme.json/global styles generated for theButtonsblock (e.g. text-decoration). I think this is ok for now and shouldn't block this PR given stylingButtonblocks globally is essentially the same as styling aButtonsblock and having that apply to the innerButtonblocks. AButtonblock can only be added within aButtonsblock anyway.Screenshots or screencast
Screen.Recording.2022-09-07.at.3.57.59.pm.mp4