Global Styles: Add block CSS rules after the Global Styles rules (#41934

) * Global Styles: Add block CSS rules after the Global Styles rules * move some default styles to core theme.json, wrap others with a :where * make search block CSS less specific * fix the linter
WordPress · Jun 27, 2022 · 61df1d1 · 61df1d1
1 parent 188dd89
commit 61df1d1
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 40 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -199,15 +199,15 @@ function gutenberg_register_core_block_assets( $block_name ) {
  wp_register_style(
  "wp-block-{$block_name}",
  gutenberg_url( $style_path ),
- array(),
+ array( 'global-styles' ),
  $default_version
  );
  wp_style_add_data( "wp-block-{$block_name}", 'rtl', 'replace' );
 
  // Add a reference to the stylesheet's path to allow calculations for inlining styles in `wp_head`.
  wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $style_path );
  } else {
- wp_register_style( "wp-block-{$block_name}", false );
+ wp_register_style( "wp-block-{$block_name}", false, array( 'global-styles' ) );
  }
 
  // If the current theme supports wp-block-styles, dequeue the full stylesheet
@@ -246,7 +246,7 @@ function() {
  wp_register_style(
  "wp-block-{$block_name}",
  gutenberg_url( $theme_style_path ),
- array(),
+ array( 'global-styles' ),
  $default_version
  );
  wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path );

diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
@@ -0,0 +1,264 @@
+{
+ "version": 2,
+ "settings": {
+ "appearanceTools": false,
+ "border": {
+ "color": false,
+ "radius": false,
+ "style": false,
+ "width": false
+ },
+ "color": {
+ "background": true,
+ "custom": true,
+ "customDuotone": true,
+ "customGradient": true,
+ "defaultDuotone": true,
+ "defaultGradients": true,
+ "defaultPalette": true,
+ "duotone": [
+ {
+ "name": "Dark grayscale",
+ "colors": [ "#000000", "#7f7f7f" ],
+ "slug": "dark-grayscale"
+ },
+ {
+ "name": "Grayscale",
+ "colors": [ "#000000", "#ffffff" ],
+ "slug": "grayscale"
+ },
+ {
+ "name": "Purple and yellow",
+ "colors": [ "#8c00b7", "#fcff41" ],
+ "slug": "purple-yellow"
+ },
+ {
+ "name": "Blue and red",
+ "colors": [ "#000097", "#ff4747" ],
+ "slug": "blue-red"
+ },
+ {
+ "name": "Midnight",
+ "colors": [ "#000000", "#00a5ff" ],
+ "slug": "midnight"
+ },
+ {
+ "name": "Magenta and yellow",
+ "colors": [ "#c7005a", "#fff278" ],
+ "slug": "magenta-yellow"
+ },
+ {
+ "name": "Purple and green",
+ "colors": [ "#a60072", "#67ff66" ],
+ "slug": "purple-green"
+ },
+ {
+ "name": "Blue and orange",
+ "colors": [ "#1900d8", "#ffa96b" ],
+ "slug": "blue-orange"
+ }
+ ],
+ "gradients": [
+ {
+ "name": "Vivid cyan blue to vivid purple",
+ "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+ "slug": "vivid-cyan-blue-to-vivid-purple"
+ },
+ {
+ "name": "Light green cyan to vivid green cyan",
+ "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+ "slug": "light-green-cyan-to-vivid-green-cyan"
+ },
+ {
+ "name": "Luminous vivid amber to luminous vivid orange",
+ "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+ "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
+ },
+ {
+ "name": "Luminous vivid orange to vivid red",
+ "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+ "slug": "luminous-vivid-orange-to-vivid-red"
+ },
+ {
+ "name": "Very light gray to cyan bluish gray",
+ "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+ "slug": "very-light-gray-to-cyan-bluish-gray"
+ },
+ {
+ "name": "Cool to warm spectrum",
+ "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+ "slug": "cool-to-warm-spectrum"
+ },
+ {
+ "name": "Blush light purple",
+ "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+ "slug": "blush-light-purple"
+ },
+ {
+ "name": "Blush bordeaux",
+ "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+ "slug": "blush-bordeaux"
+ },
+ {
+ "name": "Luminous dusk",
+ "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+ "slug": "luminous-dusk"
+ },
+ {
+ "name": "Pale ocean",
+ "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+ "slug": "pale-ocean"
+ },
+ {
+ "name": "Electric grass",
+ "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+ "slug": "electric-grass"
+ },
+ {
+ "name": "Midnight",
+ "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+ "slug": "midnight"
+ }
+ ],
+ "link": false,
+ "palette": [
+ {
+ "name": "Black",
+ "slug": "black",
+ "color": "#000000"
+ },
+ {
+ "name": "Cyan bluish gray",
+ "slug": "cyan-bluish-gray",
+ "color": "#abb8c3"
+ },
+ {
+ "name": "White",
+ "slug": "white",
+ "color": "#ffffff"
+ },
+ {
+ "name": "Pale pink",
+ "slug": "pale-pink",
+ "color": "#f78da7"
+ },
+ {
+ "name": "Vivid red",
+ "slug": "vivid-red",
+ "color": "#cf2e2e"
+ },
+ {
+ "name": "Luminous vivid orange",
+ "slug": "luminous-vivid-orange",
+ "color": "#ff6900"
+ },
+ {
+ "name": "Luminous vivid amber",
+ "slug": "luminous-vivid-amber",
+ "color": "#fcb900"
+ },
+ {
+ "name": "Light green cyan",
+ "slug": "light-green-cyan",
+ "color": "#7bdcb5"
+ },
+ {
+ "name": "Vivid green cyan",
+ "slug": "vivid-green-cyan",
+ "color": "#00d084"
+ },
+ {
+ "name": "Pale cyan blue",
+ "slug": "pale-cyan-blue",
+ "color": "#8ed1fc"
+ },
+ {
+ "name": "Vivid cyan blue",
+ "slug": "vivid-cyan-blue",
+ "color": "#0693e3"
+ },
+ {
+ "name": "Vivid purple",
+ "slug": "vivid-purple",
+ "color": "#9b51e0"
+ }
+ ],
+ "text": true
+ },
+ "spacing": {
+ "blockGap": null,
+ "margin": false,
+ "padding": false,
+ "units": [ "px", "em", "rem", "vh", "vw", "%" ]
+ },
+ "typography": {
+ "customFontSize": true,
+ "dropCap": true,
+ "fontSizes": [
+ {
+ "name": "Small",
+ "slug": "small",
+ "size": "13px"
+ },
+ {
+ "name": "Medium",
+ "slug": "medium",
+ "size": "20px"
+ },
+ {
+ "name": "Large",
+ "slug": "large",
+ "size": "36px"
+ },
+ {
+ "name": "Extra Large",
+ "slug": "x-large",
+ "size": "42px"
+ }
+ ],
+ "fontStyle": true,
+ "fontWeight": true,
+ "letterSpacing": true,
+ "lineHeight": false,
+ "textDecoration": true,
+ "textTransform": true
+ },
+ "blocks": {
+ "core/button": {
+ "border": {
+ "radius": true
+ }
+ },
+ "core/pullquote": {
+ "border": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ }
+ }
+ },
+ "styles": {
+ "elements": {
+ "button": {
+ "color": {
+ "text": "#fff",
+ "background": "#32373c"
+ },
+ "typography": {
+ "fontSize": "inherit",
+ "fontFamily": "inherit",
+ "lineHeight": "inherit",
+ "textDecoration": "none"
+ }
+ },
+ "link": {
+ "typography": {
+ "textDecoration": "underline"
+ }
+ }
+ },
+ "spacing": { "blockGap": "24px" }
+ }
+}
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -89,30 +89,7 @@
  "radius": true
  }
  },
- "__experimentalSelector": ".wp-block-button__link",
- "__experimentalStyle": {
- "border": {
- "//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
- "radius": "9999px"
- },
- "color": {
- "text": "#fff",
- "background": "#32373c"
- },
- "typography": {
- "fontSize": "1.125em",
- "textDecoration": "none"
- },
- "spacing": {
- "padding": {
- "//": "The extra 2px are added to size solids the same as the outline versions.",
- "top": "calc(0.667em + 2px)",
- "right": "calc(1.333em + 2px)",
- "bottom": "calc(0.667em + 2px)",
- "left": "calc(1.333em + 2px)"
- }
- }
- }
+ "__experimentalSelector": ".wp-block-button__link"
  },
  "styles": [
  { "name": "fill", "label": "Fill", "isDefault": true },

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -29,6 +29,16 @@ $blocks-block__margin: 0.5em;
  }
 }
 
+// These rules are set to zero specificity to keep the default styles for buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-button__link) {
+ // 100% causes an oval, but any explicit but really high value retains the pill shape.
+ border-radius: 9999px;
+
+ // The extra 2px are added to size solids the same as the outline versions.
+ padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
  &.has-custom-width {

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -20,8 +20,7 @@
 }
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
-.wp-block-file__button {
- background: #32373c;
+:where(.wp-block-file__button) {
  border-radius: 2em;
  color: $white;
  font-size: 0.8em;

diff --git a/packages/block-library/src/post-comments/style.scss b/packages/block-library/src/post-comments/style.scss
@@ -128,8 +128,12 @@
  input:not([type="submit"]):not([type="checkbox"]) {
  padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
  }
+}
 
- input[type="submit"] {
- border: none;
- }
+
+// Using :where to give this a low specificity so that element styles take precedence.
+// Needed for backwards compatibility.
+// Styles copied from button block styles.
+:where(.wp-block-post-comments input[type="submit"]) {
+ border: none;
 }