Update/site logo constrain image #41298
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
scruffian
requested review from
spacedmonkey,
ajitbohra,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
|
cc @WordPress/block-themers |
|
@scruffian It looks like you currently based this branch off #34180 Is there any reason for that? |
Oops no, just clumsiness! |
scruffian
force-pushed
the
update/site-logo-constrain-image
branch
from
cc82252 to
4dfbd8c
Compare
|
Fixed! |
aristath
approved these changes
May 25, 2022
|
Size Change: +27 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
|
@scruffian just wanted to note that this new implementation can cause some pretty unexpected behavior when Site Logo blocks are placed in Row blocks. From a technical standpoint, it makes sense why this would be happening, but will likely surprise folks, especially since the Editor and frontend views are not consistent (Image blocks behave the same way as you indicated). Here is a simple example: This is what you would expect: This is what it looks like on the frontend: |
13 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.
What?
This forces images inside the Site Logo block to be constrained to their parent container. Closes #41115
Why?
This seems to match user expectation. It prevents larger images from flowing offscreen.
How?
We set the height of the image to
autoand set amax-width: 100%which is the same trick the image block uses to achieve this effect.Testing Instructions
Screenshots or screencast
site-logo.mov
Limitations
This CSS doesn't take effect in the editor, as the resizeable box allows the logo to expand wider than its container. I'm not sure how we get round this, but the same is true of the image block.