/** * Core blocks the theme has to answer for. * * 1 Buttons * * The other stylesheets describe things the theme draws itself. This one describes things * WordPress draws, that the theme has to take back — blocks whose core CSS is printed on * render and lands after everything here, and which the theme's own reset then half-undoes * on top of that. * * Loaded last, after content.css. Nothing here relies on that: every rule below beats what * it has to beat on specificity alone, because core's block CSS can land after the theme's * and load order is therefore not a weapon the theme has. The position is for reading, not * for the cascade. * * The one core block not in this file is Navigation, which home.css § 3b holds — it is * inseparable from the fullscreen menu's layout, and splitting it across two files would * mean neither had the whole story. * * @package Edible */ /* ----------------------------------------------------------------------------- 1 Buttons A button is the only element on the site that three stylesheets all have an opinion about, and before this file none of them was the theme's: core, blocks/button/theme.css background #32373c, white text, a 9999px pill and 1.125em type. Enqueued because inc/editor.php asks for wp-block-styles. core, blocks/button/style.css the is-style-outline variation — a 2px border. base.css `.edible-theme a` — colour: inherit, no underline, no border. base.css is the more specific of the two that set a colour, so it won: core painted a near-black fill and the theme then set the label to the scheme's own text colour, which on every light scheme is black. Black on black. Outline fared differently but no better — it kept core's border, picked up the prose underline from content.css § 7 inside a page body, and read as a link somebody had drawn a box around. So the fix is not to out-shout those rules one property at a time. It is for the theme to have a button of its own, which is what this section is. Two variants, and they are each other's inverse: fill the scheme's solid pair — the same inversion .comments__submit and the search button already use. Also what a button with no style class gets, since that is what the editor inserts by default. outline the section's own colours with a rule around them, filling in on hover. Hovering either one swaps it to the other, so the two variants and their two hover states are the same two appearances throughout — the pattern .entry-tags a and the pagination links already set. Specificity, since it is doing real work here: the base rule is (0,3,1), which clears `.entry-content a` at (0,2,1) and both core sheets; outline is (0,4,1), which clears core's own `.wp-block-button.is-style-outline > .wp-block-button__link` at (0,3,0); and each :hover is one class-equivalent above the rule it overrides, which is what puts them past `.entry-content a:hover` at (0,3,1). No !important anywhere, and none is needed. -------------------------------------------------------------------------- */ /* Core lays the row out with its own flex layout class and a gap of 0.5em. theme.json sets no blockGap, so that fallback is what ships — near enough to --space-sm to be an accident rather than a decision. Say it in the theme's own units instead. */ .edible-theme .wp-block-buttons { gap: var(--space-sm) var(--space-md); } /* * The fill, and the default. * * The --scheme-* fallbacks are the white scheme, which is what every template already puts * on
. They matter for the two places that have no scheme ancestor at all — the header * and footer parts — where an unresolved var() would otherwise compute to a transparent * background with an inherited label, i.e. an invisible button. */ .edible-theme .wp-block-button .wp-block-button__link { display: inline-block; padding: var(--space-sm) var(--space-xl); border: 1px solid var(--scheme-solid-bg, var(--color-black)); border-radius: 0; background-color: var(--scheme-solid-bg, var(--color-black)); color: var(--scheme-solid-text, var(--color-white)); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Empties out to the outline. opacity is named because base.css fades every link on hover and content.css § 10 fades one inside prose further — neither is wanted on a control that answers by changing colour. */ .edible-theme .wp-block-button .wp-block-button__link:hover, .edible-theme .wp-block-button .wp-block-button__link:focus-visible { border-color: var(--scheme-text, var(--color-black)); background-color: transparent; color: var(--scheme-text, var(--color-black)); opacity: 1; } /* * The outline. * * background-color is spelled out rather than left to core's `background-color: initial`, * which is only applied `:not(.has-background)`. Nothing in this theme can set that class — * theme.json turns the colour controls off site-wide and gives them back to Heading and * Paragraph only — but content pasted in from a site that could would carry it, and there * the fill above would come back underneath the border. transparent here is unconditional, * so the variation means one thing whatever markup it is given. */ .edible-theme .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--scheme-text, var(--color-black)); background-color: transparent; color: var(--scheme-text, var(--color-black)); } .edible-theme .wp-block-button.is-style-outline .wp-block-button__link:hover, .edible-theme .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { border-color: var(--scheme-solid-bg, var(--color-black)); background-color: var(--scheme-solid-bg, var(--color-black)); color: var(--scheme-solid-text, var(--color-white)); opacity: 1; }