Style book: remove styles from examples #67098
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
…from being previewed
ramonjd
added
[Type] Bug
|
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. |
6 tasks
|
Size Change: +25 B (0%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c38bd7a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11907358380
|
|
While this solves the issue for Noting that we have at least |
That's a good point, thank you! My assumption is to only strip them from the containing block's attributes (?) My only hesitation is that, existing third party blocks, it would be considered a breaking change, e.g., "Why doesn't my block example look like it did before?" For that reason, I reckon we should limit it to core blocks at the very start. For the group block in particular, I think it's still okay to strip the styles here regardless. The padding doesn't contribute a great deal visually, and, as one of the most used core container blocks, I think global styles should take universal precedence. |
…lobal styles will take effect.
ramonjd
changed the title
@ntsekouras I took your idea and only applied it to style book blocks. This addresses the original issue and also preserves any examples that have styles for the purposes of inserter previews etc. The group block is the only block affected As for the Cover block, the style is applied to the inner block. In my view this should have been applied to the container block. I'll hoist it in this PR. The result should be the same. |
aaronrobertshaw
approved these changes
Nov 20, 2024
There was a problem hiding this comment.
Thanks for the PR @ramonjd 👍
✅ Cover block example looks consistent after hoisting styles
✅ Group block example in Style Book now reflects changes in Global Styles padding
✅ Group block examples in inserters appear as before
I think this PR strikes a good balance between maintaining existing rendering for block previews and allowing the Style Book examples to reflect the current Global Styles etc.
I like that 3rd party extenders get the fix/enhancement for free in the Style Book.
🚢
Screen.Recording.2024-11-20.at.11.51.58.am.mp4
This wasn't possible when the example was added, around 2 years ago. The text color support was added a year later. The styles could have been moved to the wrapping cover block when that support was added but the Style Book was pretty new then so this issue wasn't foreseen. |
Thanks for the context. Thought it might have been something like that. Another win for block supports! 🏅 |
|
Thank you @ramonjd!
Initially I would suggest that, but then I thought about the previews in Global styles sidebar and that we could need this in general. Probably it's fine to address the specific previews for now - I don't think we have other similar previews. I also opened a PR about the sidebar previews here. |
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? How? Why?
Resolves #67092
In the style book, remove block example styles because they prevent global styles from being tested/previewed.
For the cover block example, move the styles up to the container block.
Testing Instructions
Group block
Kapture.2024-11-19.at.17.08.34.mp4
Also check what the group example looks like in the preview - it's example padding should be preserved:
Cover block
Kapture.2024-11-20.at.12.46.43.mp4
The cover block preview should look the same as before: