Changeset 52164

Timestamp:

11/15/2021 07:13:33 PM (3 weeks ago)

Author:

jffng

Message:

Twenty Twenty-Two: Import the latest changes from GitHub.

Updates theme.json to use v2 shape, adds styles to search and file block as well as generic text decoration. Fixes a bug in the layout of a query block pattern.

This is a follow-up to [52081]. These changes are ongoing and development continues on GitHub. To view all of the changes included in this commit, see GitHub: ​https://github.com/WordPress/twentytwentytwo/compare/99db6063beb87eda7f58c3983992d94cd756d9c2...a11fb4932a0f79dc2668e92f118fd315256be9d9

Props desrosj, kjellr, poena.
See #54318.

Location:

trunk/src/wp-content/themes/twentytwentytwo

Files:

• functions.php (modified) (2 diffs)
• inc/patterns/query-image-grid.php (modified) (1 diff)
• style.css (modified) (1 diff)
• theme.json (modified) (4 diffs)

trunk/src/wp-content/themes/twentytwentytwo/functions.php

@@ -14 +14 @@
 
     /**
-     * Add support for core block visual styles.
-     * Styles load in both the editor and the front end.
-     *
-     * @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#default-block-styles
+     * Sets up theme defaults and registers support for various WordPress features.
      *
      * @since Twenty Twenty-Two 1.0
@@ -25 +22 @@
     function twentytwentytwo_support() {
 
+        // Add support for block styles.
         add_theme_support( 'wp-block-styles' );
+
+        // Enqueue editor styles.
+        add_editor_style( 'style.css' );
 
     }

trunk/src/wp-content/themes/twentytwentytwo/inc/patterns/query-image-grid.php

@@ -11 +11 @@
                     <!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"200px"} /-->
 
-                    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
-                    <div class="wp-block-group"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontFamily":"var:preset|font-family|system-font","fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
+                    <!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"blockGap":"0.5rem"}}} -->
+                    <div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
+                    <div class="wp-block-column"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"top":"0.2em"}}},"fontSize":"small","fontFamily":"system-font"} /--></div>
+                    <!-- /wp:column -->
 
-                    <!-- wp:post-date {"format":"m.d.y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
-                    <!-- /wp:group -->
+                    <!-- wp:column {"width":"4em"} -->
+                    <div class="wp-block-column" style="flex-basis:4em"><!-- wp:post-date {"textAlign":"right","format":"m.d.y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
+                    <!-- /wp:column --></div>
+                    <!-- /wp:columns -->
                     <!-- /wp:post-template -->
 

trunk/src/wp-content/themes/twentytwentytwo/style.css

@@ -17 +17 @@
 Twenty Twenty-Two is distributed under the terms of the GNU GPL.
 */
+
+/*
+ * Font smoothing.
+ * This is a niche setting that will not be available via Global Styles.
+ * https://github.com/WordPress/gutenberg/issues/35934
+ */
+
+body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Text link styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+a {
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25ch;
+}
+
+a:hover,
+a:focus {
+    text-decoration-style: dashed;
+}
+
+a:active {
+    text-decoration: none;
+}
+
+/*
+ * Search and File Block button styles.
+ * Necessary until the following issues are resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/36444
+ * https://github.com/WordPress/gutenberg/issues/27760
+ */
+
+.wp-block-search__button,
+.wp-block-file .wp-block-file__button {
+    background-color: var(--wp--preset--color--primary);
+    border-radius: 0;
+    border: none;
+    color: var(--wp--preset--color--background);
+    font-size: var(--wp--preset--typography--font-size--normal);
+    padding: calc(.667em + 2px) calc(1.333em + 2px);
+}
+
+.wp-block-file a.wp-block-file__button:hover {
+    opacity: 1;
+}

trunk/src/wp-content/themes/twentytwentytwo/theme.json

@@ -1 +1 @@
 {
-    "$schema": "https://json.schemastore.org/theme-v1.json",
-    "version": 1,
+    "version": 2,
     "customTemplates": [
         {
@@ -159 +158 @@
         "spacing": {
             "blockGap": true,
-            "customMargin": true,
-            "customPadding": true,
+            "margin": true,
+            "padding": true,
             "units": [
                 "%",
@@ -172 +171 @@
         "typography": {
             "dropCap": false,
-            "customLineHeight": true,
+            "lineHeight": true,
             "fontFamilies": [
                 {
@@ -218 +217 @@
         },
         "border": {
-            "customColor": true,
-            "customRadius": true,
-            "customStyle": true,
-            "customWidth": true
+            "color": true,
+            "radius": true,
+            "style": true,
+            "width": true
         }
     },