Changeset 54162 for trunk/src/wp-includes/theme.json

Timestamp:

09/14/2022 06:42:04 PM (3 years ago)

Author:

hellofromTonya

Message:

Editor: Backport foundation for Layout block support refactor (part 1).

Backports the following changes from the Gutenberg repository:

• [WordPress/gutenberg/40875 gutenberg/40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json
• [WordPress/gutenberg/42544 gutenberg/42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg/42544
• [WordPress/gutenberg/42087 gutenberg/42087] Theme.json: Add block support feature level selectors for blocks gutenberg/42087
• [WordPress/gutenberg/43792 gutenberg/43792] Global Styles: Split root layout rules into a different function gutenberg/43792
• [WordPress/gutenberg/42544 gutenberg/42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg/42544
• [WordPress/gutenberg/42665 gutenberg/42665] Layout: Reduce specificity of fallback blockGap styles gutenberg/42665
• [WordPress/gutenberg/42085 gutenberg/42085] Core CSS support for root padding and alignfull blocks gutenberg/42085

Notes:

• It doesn't entirely port over PR 40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting layout.php.
• [54159] was reverted in [54160] due to PHPUnit test failures for tests added by the commit. Later, tests passed when applied on top of trunk. There were various outages today of upstream wp-env dependencies, which likely were the root cause of the earlier failures. For historical tracking and to make sure, recommitting [54159] but instead on top of current trunk. See PR 3205 for more details.
• Giving additional props for those who did a deep dive investigation into the failed tests.

Follow-up to [54160], [54159].

Props andrewserong, aaronrobertshaw, isabel_brison, bernhard-reiter, hellofromTonya.
See #56467.

File:

• trunk/src/wp-includes/theme.json (modified) (5 diffs)

trunk/src/wp-includes/theme.json

@@ -3 +3 @@
     "settings": {
         "appearanceTools": false,
+        "useRootPaddingAwareAlignments": false,
         "border": {
             "color": false,
@@ -13 +14 @@
             "custom": true,
             "customDuotone": true,
-            "customGradient": true,
-            "defaultDuotone": true,
+            "customGradient": true,
+            "defaultDuotone": true,
             "defaultGradients": true,
             "defaultPalette": true,
@@ -185 +186 @@
             ],
             "text": true
+        },
+        "layout": {
+            "definitions": {
+                "default": {
+                    "name": "default",
+                    "slug": "flow",
+                    "className": "is-layout-flow",
+                    "baseStyles": [
+                        {
+                            "selector": " > .alignleft",
+                            "rules": {
+                                "float": "left",
+                                "margin-inline-start": "0",
+                                "margin-inline-end": "2em"
+                            }
+                        },
+                        {
+                            "selector": " > .alignright",
+                            "rules": {
+                                "float": "right",
+                                "margin-inline-start": "2em",
+                                "margin-inline-end": "0"
+                            }
+                        },
+                        {
+                            "selector": " > .aligncenter",
+                            "rules": {
+                                "margin-left": "auto !important",
+                                "margin-right": "auto !important"
+                            }
+                        }
+                    ],
+                    "spacingStyles": [
+                        {
+                            "selector": " > *",
+                            "rules": {
+                                "margin-block-start": "0",
+                                "margin-block-end": "0"
+                            }
+                        },
+                        {
+                            "selector": " > * + *",
+                            "rules": {
+                                "margin-block-start": null,
+                                "margin-block-end": "0"
+                            }
+                        }
+                    ]
+                },
+                "constrained": {
+                    "name": "constrained",
+                    "slug": "constrained",
+                    "className": "is-layout-constrained",
+                    "baseStyles": [
+                        {
+                            "selector": " > .alignleft",
+                            "rules": {
+                                "float": "left",
+                                "margin-inline-start": "0",
+                                "margin-inline-end": "2em"
+                            }
+                        },
+                        {
+                            "selector": " > .alignright",
+                            "rules": {
+                                "float": "right",
+                                "margin-inline-start": "2em",
+                                "margin-inline-end": "0"
+                            }
+                        },
+                        {
+                            "selector": " > .aligncenter",
+                            "rules": {
+                                "margin-left": "auto !important",
+                                "margin-right": "auto !important"
+                            }
+                        },
+                        {
+                            "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
+                            "rules": {
+                                "max-width": "var(--wp--style--global--content-size)",
+                                "margin-left": "auto !important",
+                                "margin-right": "auto !important"
+                            }
+                        },
+                        {
+                            "selector": " > .alignwide",
+                            "rules": {
+                                "max-width": "var(--wp--style--global--wide-size)"
+                            }
+                        }
+                    ],
+                    "spacingStyles": [
+                        {
+                            "selector": " > *",
+                            "rules": {
+                                "margin-block-start": "0",
+                                "margin-block-end": "0"
+                            }
+                        },
+                        {
+                            "selector": " > * + *",
+                            "rules": {
+                                "margin-block-start": null,
+                                "margin-block-end": "0"
+                            }
+                        }
+                    ]
+                },
+                "flex": {
+                    "name": "flex",
+                    "slug": "flex",
+                    "className": "is-layout-flex",
+                    "displayMode": "flex",
+                    "baseStyles": [
+                        {
+                            "selector": "",
+                            "rules": {
+                                "flex-wrap": "wrap",
+                                "align-items": "center"
+                            }
+                        },
+                        {
+                            "selector": " > *",
+                            "rules": {
+                                "margin": "0"
+                            }
+                        }
+                    ],
+                    "spacingStyles": [
+                        {
+                            "selector": "",
+                            "rules": {
+                                "gap": null
+                            }
+                        }
+                    ]
+                }
+            }
         },
         "spacing": {
@@ -190 +330 @@
             "margin": false,
             "padding": false,
-            "units": [ "px", "em", "rem", "vh", "vw", "%" ]
+            "customSpacingSize": true,
+            "units": [ "px", "em", "rem", "vh", "vw", "%" ],
+            "spacingScale": {
+                "operator": "*",
+                "increment": 1.5,
+                "steps": 7,
+                "mediumStep": 1.5,
+                "unit": "rem"
+            }
         },
         "typography": {
@@ -241 +389 @@
     },
     "styles": {
-        "spacing": { "blockGap": "24px" }
+        "elements": {
+            "button": {
+                "color": {
+                    "text": "#fff",
+                    "background": "#32373c"
+                },
+                "spacing": {
+                    "padding": "calc(0.667em + 2px) calc(1.333em + 2px)"
+                },
+                "typography": {
+                    "fontSize": "inherit",
+                    "fontFamily": "inherit",
+                    "lineHeight": "inherit",
+                    "textDecoration": "none"
+                },
+                "border": {
+                    "width": "0"
+                }
+            },
+            "link": {
+                "typography": {
+                    "textDecoration": "underline"
+                }
+            }
+        },
+        "spacing": {
+            "blockGap": "24px",
+            "padding": {
+                "top": "0px",
+                "right": "0px",
+                "bottom": "0px",
+                "left": "0px"
+            }
+        }
     }
 }