Make WordPress Core


Ignore:
Timestamp:
09/14/2022 02:19:16 PM (22 months ago)
Author:
audrasjb
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/theme.json

    r53134 r54159  
    33    "settings": {
    44        "appearanceTools": false,
     5        "useRootPaddingAwareAlignments": false,
    56        "border": {
    67            "color": false,
     
    1314            "custom": true,
    1415            "customDuotone": true,
    15             "customGradient": true,
    16             "defaultDuotone": true,
     16            "customGradient": true,
     17            "defaultDuotone": true,
    1718            "defaultGradients": true,
    1819            "defaultPalette": true,
     
    185186            ],
    186187            "text": true
     188        },
     189        "layout": {
     190            "definitions": {
     191                "default": {
     192                    "name": "default",
     193                    "slug": "flow",
     194                    "className": "is-layout-flow",
     195                    "baseStyles": [
     196                        {
     197                            "selector": " > .alignleft",
     198                            "rules": {
     199                                "float": "left",
     200                                "margin-inline-start": "0",
     201                                "margin-inline-end": "2em"
     202                            }
     203                        },
     204                        {
     205                            "selector": " > .alignright",
     206                            "rules": {
     207                                "float": "right",
     208                                "margin-inline-start": "2em",
     209                                "margin-inline-end": "0"
     210                            }
     211                        },
     212                        {
     213                            "selector": " > .aligncenter",
     214                            "rules": {
     215                                "margin-left": "auto !important",
     216                                "margin-right": "auto !important"
     217                            }
     218                        }
     219                    ],
     220                    "spacingStyles": [
     221                        {
     222                            "selector": " > *",
     223                            "rules": {
     224                                "margin-block-start": "0",
     225                                "margin-block-end": "0"
     226                            }
     227                        },
     228                        {
     229                            "selector": " > * + *",
     230                            "rules": {
     231                                "margin-block-start": null,
     232                                "margin-block-end": "0"
     233                            }
     234                        }
     235                    ]
     236                },
     237                "constrained": {
     238                    "name": "constrained",
     239                    "slug": "constrained",
     240                    "className": "is-layout-constrained",
     241                    "baseStyles": [
     242                        {
     243                            "selector": " > .alignleft",
     244                            "rules": {
     245                                "float": "left",
     246                                "margin-inline-start": "0",
     247                                "margin-inline-end": "2em"
     248                            }
     249                        },
     250                        {
     251                            "selector": " > .alignright",
     252                            "rules": {
     253                                "float": "right",
     254                                "margin-inline-start": "2em",
     255                                "margin-inline-end": "0"
     256                            }
     257                        },
     258                        {
     259                            "selector": " > .aligncenter",
     260                            "rules": {
     261                                "margin-left": "auto !important",
     262                                "margin-right": "auto !important"
     263                            }
     264                        },
     265                        {
     266                            "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
     267                            "rules": {
     268                                "max-width": "var(--wp--style--global--content-size)",
     269                                "margin-left": "auto !important",
     270                                "margin-right": "auto !important"
     271                            }
     272                        },
     273                        {
     274                            "selector": " > .alignwide",
     275                            "rules": {
     276                                "max-width": "var(--wp--style--global--wide-size)"
     277                            }
     278                        }
     279                    ],
     280                    "spacingStyles": [
     281                        {
     282                            "selector": " > *",
     283                            "rules": {
     284                                "margin-block-start": "0",
     285                                "margin-block-end": "0"
     286                            }
     287                        },
     288                        {
     289                            "selector": " > * + *",
     290                            "rules": {
     291                                "margin-block-start": null,
     292                                "margin-block-end": "0"
     293                            }
     294                        }
     295                    ]
     296                },
     297                "flex": {
     298                    "name": "flex",
     299                    "slug": "flex",
     300                    "className": "is-layout-flex",
     301                    "displayMode": "flex",
     302                    "baseStyles": [
     303                        {
     304                            "selector": "",
     305                            "rules": {
     306                                "flex-wrap": "wrap",
     307                                "align-items": "center"
     308                            }
     309                        },
     310                        {
     311                            "selector": " > *",
     312                            "rules": {
     313                                "margin": "0"
     314                            }
     315                        }
     316                    ],
     317                    "spacingStyles": [
     318                        {
     319                            "selector": "",
     320                            "rules": {
     321                                "gap": null
     322                            }
     323                        }
     324                    ]
     325                }
     326            }
    187327        },
    188328        "spacing": {
     
    190330            "margin": false,
    191331            "padding": false,
    192             "units": [ "px", "em", "rem", "vh", "vw", "%" ]
     332            "customSpacingSize": true,
     333            "units": [ "px", "em", "rem", "vh", "vw", "%" ],
     334            "spacingScale": {
     335                "operator": "*",
     336                "increment": 1.5,
     337                "steps": 7,
     338                "mediumStep": 1.5,
     339                "unit": "rem"
     340            }
    193341        },
    194342        "typography": {
     
    241389    },
    242390    "styles": {
    243         "spacing": { "blockGap": "24px" }
     391        "elements": {
     392            "button": {
     393                "color": {
     394                    "text": "#fff",
     395                    "background": "#32373c"
     396                },
     397                "spacing": {
     398                    "padding": "calc(0.667em + 2px) calc(1.333em + 2px)"
     399                },
     400                "typography": {
     401                    "fontSize": "inherit",
     402                    "fontFamily": "inherit",
     403                    "lineHeight": "inherit",
     404                    "textDecoration": "none"
     405                },
     406                "border": {
     407                    "width": "0"
     408                }
     409            },
     410            "link": {
     411                "typography": {
     412                    "textDecoration": "underline"
     413                }
     414            }
     415        },
     416        "spacing": {
     417            "blockGap": "24px",
     418            "padding": {
     419                "top": "0px",
     420                "right": "0px",
     421                "bottom": "0px",
     422                "left": "0px"
     423            }
     424        }
    244425    }
    245426}
Note: See TracChangeset for help on using the changeset viewer.