Search block: update alignment and icon button width #54773
Merged
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
…utton styles, mainly the text:center Remove max-width change so that it doesn't affect search buttons in the header
…utton styles, mainly the text:center Remove max-width change for buttons with icons only so that it doesn't affect search button icons in the header or in narrow widths
ramonjd
added
[Type] Bug
|
Size Change: +193 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
t-hamano
reviewed
Sep 25, 2023
There was a problem hiding this comment.
Thanks for the PR!
Render rich text button as a button so that it inherits the default button styles, mainly the text:center
I feel that making the RichText component itself a button element may cause accessibility issues. This is the content obtained from ChatGPT. Also, all browsers might not apply the centered style to button elements by default.
How about leaving the button on the editor side as a div element, like the Button block, and add text:align:center to style.css?
Remove max-width change for buttons with icons only so that it doesn't affect search button icons in the header or in narrow widths
This style is necessary to ensure the width of the input field in the mobile viewport and to prevent overflow, as mentioned in this comment. I'm hoping to find a style that doesn't overflow and has the desired width depending on where the Search block is placed 🤔
I did test this as well, and it was the second option 😄 Easy to reinstate. Thanks for double checking 👍🏻
Whoops. I did see that comment and had prepared this commit, but didn't push it 🤦🏻 Will do it now // Ensure minimum input field width in small viewports.
max-width: calc(100% - 100px);
&.has-icon {
max-width: 100%;
} |
Achieve centered text via text-align in editor.scss
andrewserong
approved these changes
Sep 25, 2023
There was a problem hiding this comment.
This is testing nicely for me!
✅ Button text is now centred consistently between editor and site frontend
✅ Updated width rule means the icon-based button size is correct, while not affecting the existing max-width rule in other cases
| Max-width before | Max-width after |
|---|---|
 |
 |
LGTM! ✨
ramonjd
added a commit
that referenced
this pull request
Sep 26, 2023
When a search box has an expandable input field and is in "button only" mode, provide a max-width for the button and take away 100px when the form is expanded to avoid text wrapping and overflow in narrow viewport widths. When the search form is collapsed revert to max-width of 100% to ensure the button fills its container. The input is not there so we don't need the 100px.
ramonjd
added a commit
that referenced
this pull request
Sep 27, 2023
When a search box has an expandable input field and is in "button only" mode, provide a max-width for the button and take away 100px when the form is expanded to avoid text wrapping and overflow in narrow viewport widths. When the search form is collapsed revert to max-width of 100% to ensure the button fills its container. The input is not there so we don't need the 100px.
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.
What?
text:centerWhy?
-100pxin thecalc()formula was causing the button to be a bit squishedTesting Instructions
I'm using 2023 to test, though this should work in other block themes.
Add a search block to a page. Use text for the button label and add a break point so you can see how the text is aligned.
Save the page. The search block button text alignment in the editor should match the frontend.
Add a search block to a navigation block or in the header, or elsewhere where space is constricted.
Select button with icon and button only options for the search block. Save and check the frontend: