-
Notifications
You must be signed in to change notification settings - Fork 111
Update the viewport width of the vertical header #575
Conversation
Preview changesYou can preview these changes by following the link below: I will update this comment with the latest preview links as you push more changes to this PR. |
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Note: the vertical header template part still shows the small pattern preview. |
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.
I've tried following the steps described and I couldn't get it working.
Screen.Recording.2024-10-15.at.11.17.20.mov
Not sure if I missed any step?
Select the header pattern, not the parts. The parts are not using the viewport widths, those are the HTML files. |
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.
Thanks for the clarification, I see the changes now. Works well.
Description
In the header and pattern previews in the Site Editor, the vertical header is very small.
The CSS transform that is used on the pattern preview also animates the pattern which makes it look like it moves from the top to bottom.
This pull request adds a viewport width to the vertical header pattern, which makes the preview zoom in on the design closer.
It also reduces the impact of the animation.
Screenshots
In these videos I am refreshing the Patterns data view screen in the Site Editor.
Before:
vertical-header.mp4
After:
vertical-header-after.mp4
Testing Instructions
Go to Appearance > Editor > Patterns > Headers
Confirm that the vertical header is more visible than before.