Chore: Update index.scss to include gutenberg blocks library CSS #798
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.
Overview
See #789, and Tyler's suggestion here.
In order to remedy a CSS source order loading issue that was causing the WordPress Gutenberg block library CSS from trumping our patterns CSS in Storybook previews, this PR does the following:
• Creates a new
index-with-wp-block-library
file that imports WP styles before our pattern styles (index.scss)• Updates
.storybook/preview.js
to include the newindex-with-wp-block-library
instead ofindex
• Removes
@wordpress/block-library/build-style/style.css
fromsrc/vendor/wordpress/gutenberg.stories.mdx
, previously added in #778Consideration
With #778 (WP) Gutenberg block styles were only loaded on the Gutenberg stories. With this update, as I understand it, the Gutenberg CSS will now be loaded on every Storybook page. If that is a concern we should explore other alternative approaches.
Screenshots
Before
Notice the secondary button is outlined with a black border and black text.
After
Here, the secondary button is styled as expected with our
c-button c-button--secondary
styles.Testing
See #789