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

This change backports the following changes from 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

Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`.

Props andrewserong, aaronrobertshaw, isabel_brison.
See #56467.


git-svn-id: https://develop.svn.wordpress.org/trunk@54159 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras
2022-09-14 14:19:16 +00:00
parent 7c86dfee68
commit 34aeac1db2
9 changed files with 1165 additions and 90 deletions

View File

@@ -2,6 +2,7 @@
"version": 2,
"settings": {
"appearanceTools": false,
"useRootPaddingAwareAlignments": false,
"border": {
"color": false,
"radius": false,
@@ -12,8 +13,8 @@
"background": true,
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"defaultGradients": true,
"defaultPalette": true,
"duotone": [
@@ -185,11 +186,158 @@
],
"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": {
"blockGap": null,
"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": {
"customFontSize": true,
@@ -240,6 +388,39 @@
}
},
"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"
}
}
}
}