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

Timestamp:

09/14/2022 06:42:04 PM (4 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"
+                        }
+                }
         }
 }