WIP: Move search block alignment from float to flex #31812
Closed
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
glendaviesnz
added
[Type] Bug
glendaviesnz
commented
May 14, 2021
| margin-left: 0; | ||
| } | ||
| .wp-block-search__label { | ||
| min-width: 220px !important; |
There was a problem hiding this comment.
This is ugly, but the RichText component adds a minWidth of 1px as an inline style with no option to specify a custom width, if we go with this approach we should probably add a minWidth prop to this component, the native version has this. FYI, this min width setting is only needed to make right align work on 20% width.
|
Size Change: +557 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
|
We could simplify this a little if we add a div wrapper around the label and search input box and assign the %width to that instead of having to add it to both those elements, and this would also get around the label richtext box min width issue. |
|
I think I found something odd. Aligning left causes the
I tested with image and heading blocks with the same results. I can only seem to fix it by adding |
7 tasks
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
Currently right align doesn't play nice with the %width selections, and also doesn't float to the very edge of the page. This seems to be an issue with the way browsers deal with floated items with width applied. I couldn't find a fix for this other than moving to a flex layout, but not sure what the implications of moving from a float are in terms of backwards compat with themes, etc.
To test
Screenshots
Before:
After:
