feat: a Gutenberg design system for core blocks - #3
Merged
Merged
Conversation
…or and on the page theme.json styles every core block from the @theme presets; WordPress's CSS goes in cascade layers under Tailwind's utilities; Inter is the variable font it claimed to be.
…e height outside them A global link style reached every link of the Blade templates and of plugin markup without a colour utility; paragraphs and lists now carry it. Captions are centred.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Why
Unlike Buzz, the default theme had no real design system for core blocks: content was styled on the front only (
.entry-contentCSS in app.css), so the editor showed something else, and thetheme.jsonstyles it had pointed at Tailwind variables (var(--text-base),var(--color-white),var(--container-xl)) that do not exist in the editor. On the page, h4–h6 were larger than h2–h3 and the primary button's label was invisible.What
theme.jsonstyles every core block from the@themepresets only: root, elements (h1–h6, button, caption, cite), links inside content blocks only (paragraph, list, table, verse — a global rule reached every template and plugin link), and blocks — heading, list, quote (the gradient border moved from app.css), pullquote, button/outline, separator, table, code, preformatted, verse, details, image, gallery, group, search, post/query/site title.contentSize44rem /wideSize64rem, as in the Blade templates.app/Cms/StyleLayers.php: WordPress prints its block library and global styles unlayered, soh2 {}from theme.json would beattext-smon a Blade heading, and the block library's pill button would beat the theme.json one. Its CSS now goes in layers declared at the top of app.css —theme, base, wp-core, wp, components, utilities— inline styles wrapped, linked ones@imported into their layer. Independent of print position (WordPress 7 prints these styles in the footer of a Blade page).Inter-Regular.woff2was a static 400 declared100 900, so no weight ever rendered bold once the content used the theme font. Replaced by the officialInterVariable*.woff2(v4.1, OFL, licence alongside).is-layout-flow(block gap as in the editor), chrome linksno-underline, thewp-element-buttontrick on CTAs replaced byno-underline, an excerpt no longer nested in a<p>.5xl→5-xlnaming), no Tailwind-only variable, no selector list in a block'scss. They fail on v1.5.0's theme.json.Checked
Kitchen-sink post (every core block) on a fresh 13.34.0 site, front vs editor screenshots side by side; home, archive and 404 unchanged apart from the fixes above.
php bin/tests/run.php: 26 checks;bin/ci/check-install.php: 17 checks.