@wordpress/block-editor 15.21.1 → 15.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +2 -2
- package/build/components/block-card/index.cjs +4 -5
- package/build/components/block-card/index.cjs.map +2 -2
- package/build/components/block-editing-mode/index.cjs +13 -7
- package/build/components/block-editing-mode/index.cjs.map +2 -2
- package/build/components/block-inspector/index.cjs +35 -20
- package/build/components/block-inspector/index.cjs.map +2 -2
- package/build/components/block-mover/mover-description.cjs +6 -6
- package/build/components/block-mover/mover-description.cjs.map +1 -1
- package/build/components/block-patterns-list/index.cjs.map +2 -2
- package/build/components/block-patterns-paging/index.cjs +4 -4
- package/build/components/block-patterns-paging/index.cjs.map +2 -2
- package/build/components/block-popover/use-popover-scroll.cjs.map +1 -1
- package/build/components/block-quick-navigation/index.cjs +7 -5
- package/build/components/block-quick-navigation/index.cjs.map +2 -2
- package/build/components/block-rename/modal.cjs +0 -1
- package/build/components/block-rename/modal.cjs.map +2 -2
- package/build/components/block-toolbar/block-toolbar-icon.cjs +14 -6
- package/build/components/block-toolbar/block-toolbar-icon.cjs.map +2 -2
- package/build/components/block-toolbar/edit-section-button.cjs.map +1 -1
- package/build/components/block-tools/use-block-toolbar-popover-props.cjs +10 -4
- package/build/components/block-tools/use-block-toolbar-popover-props.cjs.map +2 -2
- package/build/components/child-layout-control/index.cjs +51 -19
- package/build/components/child-layout-control/index.cjs.map +2 -2
- package/build/components/colors-gradients/control.cjs +25 -14
- package/build/components/colors-gradients/control.cjs.map +2 -2
- package/build/components/colors-gradients/dropdown.cjs +4 -1
- package/build/components/colors-gradients/dropdown.cjs.map +3 -3
- package/build/components/contrast-checker/index.cjs +22 -4
- package/build/components/contrast-checker/index.cjs.map +2 -2
- package/build/components/date-format-picker/index.cjs +0 -1
- package/build/components/date-format-picker/index.cjs.map +2 -2
- package/build/components/dimensions-tool/index.cjs +4 -5
- package/build/components/dimensions-tool/index.cjs.map +2 -2
- package/build/components/dimensions-tool/scale-tool.cjs +1 -1
- package/build/components/dimensions-tool/scale-tool.cjs.map +2 -2
- package/build/components/global-styles/background-panel.cjs +153 -25
- package/build/components/global-styles/background-panel.cjs.map +3 -3
- package/build/components/global-styles/color-gradient-dropdown-item.cjs +227 -0
- package/build/components/global-styles/color-gradient-dropdown-item.cjs.map +7 -0
- package/build/components/global-styles/color-panel.cjs +98 -375
- package/build/components/global-styles/color-panel.cjs.map +3 -3
- package/build/components/global-styles/dimensions-panel.cjs +1 -4
- package/build/components/global-styles/dimensions-panel.cjs.map +2 -2
- package/build/components/global-styles/hooks.cjs +34 -0
- package/build/components/global-styles/hooks.cjs.map +2 -2
- package/build/components/global-styles/shadow-panel-components.cjs.map +2 -2
- package/build/components/global-styles/typography-panel.cjs +82 -10
- package/build/components/global-styles/typography-panel.cjs.map +3 -3
- package/build/components/grid/grid-item-resizer.cjs.map +1 -1
- package/build/components/grid/grid-visualizer.cjs.map +1 -1
- package/build/components/iframe/index.cjs +6 -3
- package/build/components/iframe/index.cjs.map +3 -3
- package/build/components/image-editor/use-transform-image.cjs.map +1 -1
- package/build/components/inserter/get-appender-label.cjs.map +1 -1
- package/build/components/inserter/media-tab/media-preview.cjs.map +2 -2
- package/build/components/inserter/search-items.cjs.map +1 -1
- package/build/components/inspector-controls/fill.cjs +1 -3
- package/build/components/inspector-controls/fill.cjs.map +2 -2
- package/build/components/inspector-controls/groups.cjs +2 -0
- package/build/components/inspector-controls/groups.cjs.map +2 -2
- package/build/components/inspector-controls-tabs/index.cjs.map +2 -2
- package/build/components/inspector-controls-tabs/styles-tab.cjs +76 -32
- package/build/components/inspector-controls-tabs/styles-tab.cjs.map +2 -2
- package/build/components/keyboard-shortcuts/index.cjs.map +1 -1
- package/build/components/line-height-control/index.cjs.map +1 -1
- package/build/components/link-control/index.cjs +2 -3
- package/build/components/link-control/index.cjs.map +2 -2
- package/build/components/link-control/normalize-url.cjs.map +1 -1
- package/build/components/list-view/block-select-button.cjs +1 -10
- package/build/components/list-view/block-select-button.cjs.map +3 -3
- package/build/components/list-view/utils.cjs.map +1 -1
- package/build/components/preset-input-control/custom-value-controls.cjs.map +2 -2
- package/build/components/provider/index.cjs.map +1 -1
- package/build/components/provider/use-block-sync.cjs +3 -1
- package/build/components/provider/use-block-sync.cjs.map +2 -2
- package/build/components/rich-text/event-listeners/before-input-rules.cjs +1 -1
- package/build/components/rich-text/event-listeners/before-input-rules.cjs.map +2 -2
- package/build/components/rich-text/event-listeners/paste-handler.cjs.map +1 -1
- package/build/components/rich-text/prevent-event-discovery.cjs +1 -1
- package/build/components/rich-text/prevent-event-discovery.cjs.map +1 -1
- package/build/components/url-popover/image-url-input-ui.cjs +0 -2
- package/build/components/url-popover/image-url-input-ui.cjs.map +2 -2
- package/build/components/use-block-display-information/index.cjs +10 -3
- package/build/components/use-block-display-information/index.cjs.map +2 -2
- package/build/components/writing-flow/use-tab-nav.cjs.map +1 -1
- package/build/hooks/anchor.cjs +1 -2
- package/build/hooks/anchor.cjs.map +2 -2
- package/build/hooks/background.cjs +124 -75
- package/build/hooks/background.cjs.map +3 -3
- package/build/hooks/block-fields/index.cjs +13 -2
- package/build/hooks/block-fields/index.cjs.map +2 -2
- package/build/hooks/color.cjs +0 -162
- package/build/hooks/color.cjs.map +3 -3
- package/build/hooks/contrast-checker.cjs +31 -28
- package/build/hooks/contrast-checker.cjs.map +3 -3
- package/build/hooks/custom-class-name.cjs +0 -1
- package/build/hooks/custom-class-name.cjs.map +2 -2
- package/build/hooks/dimensions.cjs +13 -2
- package/build/hooks/dimensions.cjs.map +2 -2
- package/build/hooks/elements.cjs +142 -0
- package/build/hooks/elements.cjs.map +7 -0
- package/build/hooks/grid-visualizer.cjs +21 -11
- package/build/hooks/grid-visualizer.cjs.map +2 -2
- package/build/hooks/layout-child.cjs +65 -10
- package/build/hooks/layout-child.cjs.map +2 -2
- package/build/hooks/layout.cjs +6 -3
- package/build/hooks/layout.cjs.map +2 -2
- package/build/hooks/list-view.cjs +10 -7
- package/build/hooks/list-view.cjs.map +2 -2
- package/build/hooks/spacing-visualizer.cjs.map +1 -1
- package/build/hooks/state-utils.cjs.map +1 -1
- package/build/hooks/states.cjs +2 -2
- package/build/hooks/states.cjs.map +2 -2
- package/build/hooks/style.cjs +50 -6
- package/build/hooks/style.cjs.map +2 -2
- package/build/hooks/typography.cjs +62 -10
- package/build/hooks/typography.cjs.map +3 -3
- package/build/layouts/flex.cjs +99 -6
- package/build/layouts/flex.cjs.map +2 -2
- package/build/private-apis.cjs +4 -0
- package/build/private-apis.cjs.map +2 -2
- package/build/store/actions.cjs.map +1 -1
- package/build/store/private-selectors.cjs +19 -2
- package/build/store/private-selectors.cjs.map +2 -2
- package/build/store/reducer.cjs.map +1 -1
- package/build/store/selectors.cjs.map +1 -1
- package/build/utils/block-bindings.cjs +9 -9
- package/build/utils/block-bindings.cjs.map +3 -3
- package/build/utils/color-values.cjs +10 -1
- package/build/utils/color-values.cjs.map +3 -3
- package/build/utils/dom.cjs +2 -5
- package/build/utils/dom.cjs.map +3 -3
- package/build/utils/fit-text-frontend.cjs +6 -2
- package/build/utils/fit-text-frontend.cjs.map +3 -3
- package/build/utils/fit-text-utils.cjs +1 -1
- package/build/utils/fit-text-utils.cjs.map +3 -3
- package/build/utils/format-font-style.cjs +1 -1
- package/build/utils/format-font-style.cjs.map +3 -3
- package/build/utils/format-font-weight.cjs +1 -1
- package/build/utils/format-font-weight.cjs.map +3 -3
- package/build/utils/get-editor-region.cjs +4 -2
- package/build/utils/get-editor-region.cjs.map +3 -3
- package/build/utils/get-font-styles-and-weights.cjs +8 -12
- package/build/utils/get-font-styles-and-weights.cjs.map +3 -3
- package/build/utils/get-px-from-css-unit.cjs +1 -1
- package/build/utils/get-px-from-css-unit.cjs.map +1 -1
- package/build/utils/index.cjs +1 -1
- package/build/utils/index.cjs.map +1 -1
- package/build/utils/math.cjs +1 -1
- package/build/utils/math.cjs.map +3 -3
- package/build/utils/object.cjs +8 -8
- package/build/utils/object.cjs.map +3 -3
- package/build/utils/order-inserter-block-items.cjs +1 -1
- package/build/utils/order-inserter-block-items.cjs.map +3 -3
- package/build/utils/pasting.cjs +4 -2
- package/build/utils/pasting.cjs.map +3 -3
- package/build/utils/selection.cjs +3 -2
- package/build/utils/selection.cjs.map +3 -3
- package/build/utils/sorting.cjs +9 -3
- package/build/utils/sorting.cjs.map +3 -3
- package/build/utils/transform-styles/index.cjs +3 -2
- package/build/utils/transform-styles/index.cjs.map +3 -3
- package/build/utils/transform-styles/postcss-urlrebase.d.cjs +2 -0
- package/build/utils/transform-styles/postcss-urlrebase.d.cjs.map +7 -0
- package/build/utils/transform-styles/types.cjs +19 -0
- package/build/utils/transform-styles/types.cjs.map +7 -0
- package/build/utils/types.cjs +19 -0
- package/build/utils/types.cjs.map +7 -0
- package/build-module/components/block-card/index.mjs +5 -6
- package/build-module/components/block-card/index.mjs.map +2 -2
- package/build-module/components/block-editing-mode/index.mjs +14 -8
- package/build-module/components/block-editing-mode/index.mjs.map +2 -2
- package/build-module/components/block-inspector/index.mjs +35 -21
- package/build-module/components/block-inspector/index.mjs.map +2 -2
- package/build-module/components/block-mover/mover-description.mjs +6 -6
- package/build-module/components/block-mover/mover-description.mjs.map +1 -1
- package/build-module/components/block-patterns-list/index.mjs.map +2 -2
- package/build-module/components/block-patterns-paging/index.mjs +4 -4
- package/build-module/components/block-patterns-paging/index.mjs.map +2 -2
- package/build-module/components/block-popover/use-popover-scroll.mjs.map +1 -1
- package/build-module/components/block-quick-navigation/index.mjs +8 -6
- package/build-module/components/block-quick-navigation/index.mjs.map +2 -2
- package/build-module/components/block-rename/modal.mjs +0 -1
- package/build-module/components/block-rename/modal.mjs.map +2 -2
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs +14 -6
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs.map +2 -2
- package/build-module/components/block-toolbar/edit-section-button.mjs.map +1 -1
- package/build-module/components/block-tools/use-block-toolbar-popover-props.mjs +10 -4
- package/build-module/components/block-tools/use-block-toolbar-popover-props.mjs.map +2 -2
- package/build-module/components/child-layout-control/index.mjs +51 -19
- package/build-module/components/child-layout-control/index.mjs.map +2 -2
- package/build-module/components/colors-gradients/control.mjs +27 -15
- package/build-module/components/colors-gradients/control.mjs.map +2 -2
- package/build-module/components/colors-gradients/dropdown.mjs +4 -1
- package/build-module/components/colors-gradients/dropdown.mjs.map +2 -2
- package/build-module/components/contrast-checker/index.mjs +18 -4
- package/build-module/components/contrast-checker/index.mjs.map +2 -2
- package/build-module/components/date-format-picker/index.mjs +0 -1
- package/build-module/components/date-format-picker/index.mjs.map +2 -2
- package/build-module/components/dimensions-tool/index.mjs +4 -5
- package/build-module/components/dimensions-tool/index.mjs.map +2 -2
- package/build-module/components/dimensions-tool/scale-tool.mjs +1 -1
- package/build-module/components/dimensions-tool/scale-tool.mjs.map +2 -2
- package/build-module/components/global-styles/background-panel.mjs +155 -27
- package/build-module/components/global-styles/background-panel.mjs.map +2 -2
- package/build-module/components/global-styles/color-gradient-dropdown-item.mjs +207 -0
- package/build-module/components/global-styles/color-gradient-dropdown-item.mjs.map +7 -0
- package/build-module/components/global-styles/color-panel.mjs +106 -387
- package/build-module/components/global-styles/color-panel.mjs.map +3 -3
- package/build-module/components/global-styles/dimensions-panel.mjs +1 -5
- package/build-module/components/global-styles/dimensions-panel.mjs.map +2 -2
- package/build-module/components/global-styles/hooks.mjs +33 -0
- package/build-module/components/global-styles/hooks.mjs.map +2 -2
- package/build-module/components/global-styles/shadow-panel-components.mjs.map +2 -2
- package/build-module/components/global-styles/typography-panel.mjs +84 -10
- package/build-module/components/global-styles/typography-panel.mjs.map +2 -2
- package/build-module/components/grid/grid-item-resizer.mjs.map +1 -1
- package/build-module/components/grid/grid-visualizer.mjs.map +1 -1
- package/build-module/components/iframe/index.mjs +6 -3
- package/build-module/components/iframe/index.mjs.map +2 -2
- package/build-module/components/image-editor/use-transform-image.mjs.map +1 -1
- package/build-module/components/inserter/get-appender-label.mjs.map +1 -1
- package/build-module/components/inserter/media-tab/media-preview.mjs.map +2 -2
- package/build-module/components/inserter/search-items.mjs.map +1 -1
- package/build-module/components/inspector-controls/fill.mjs +1 -3
- package/build-module/components/inspector-controls/fill.mjs.map +2 -2
- package/build-module/components/inspector-controls/groups.mjs +2 -0
- package/build-module/components/inspector-controls/groups.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/index.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs +76 -32
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs.map +2 -2
- package/build-module/components/keyboard-shortcuts/index.mjs.map +1 -1
- package/build-module/components/line-height-control/index.mjs.map +1 -1
- package/build-module/components/link-control/index.mjs +2 -3
- package/build-module/components/link-control/index.mjs.map +2 -2
- package/build-module/components/link-control/normalize-url.mjs.map +1 -1
- package/build-module/components/list-view/block-select-button.mjs +2 -17
- package/build-module/components/list-view/block-select-button.mjs.map +2 -2
- package/build-module/components/list-view/utils.mjs.map +1 -1
- package/build-module/components/preset-input-control/custom-value-controls.mjs.map +2 -2
- package/build-module/components/provider/index.mjs.map +1 -1
- package/build-module/components/provider/use-block-sync.mjs +3 -1
- package/build-module/components/provider/use-block-sync.mjs.map +2 -2
- package/build-module/components/rich-text/event-listeners/before-input-rules.mjs +1 -1
- package/build-module/components/rich-text/event-listeners/before-input-rules.mjs.map +2 -2
- package/build-module/components/rich-text/event-listeners/paste-handler.mjs.map +1 -1
- package/build-module/components/rich-text/prevent-event-discovery.mjs +1 -1
- package/build-module/components/rich-text/prevent-event-discovery.mjs.map +1 -1
- package/build-module/components/url-popover/image-url-input-ui.mjs +0 -2
- package/build-module/components/url-popover/image-url-input-ui.mjs.map +2 -2
- package/build-module/components/use-block-display-information/index.mjs +10 -3
- package/build-module/components/use-block-display-information/index.mjs.map +2 -2
- package/build-module/components/writing-flow/use-tab-nav.mjs.map +1 -1
- package/build-module/hooks/anchor.mjs +1 -2
- package/build-module/hooks/anchor.mjs.map +2 -2
- package/build-module/hooks/background.mjs +123 -75
- package/build-module/hooks/background.mjs.map +2 -2
- package/build-module/hooks/block-fields/index.mjs +13 -2
- package/build-module/hooks/block-fields/index.mjs.map +2 -2
- package/build-module/hooks/color.mjs +2 -175
- package/build-module/hooks/color.mjs.map +2 -2
- package/build-module/hooks/contrast-checker.mjs +32 -19
- package/build-module/hooks/contrast-checker.mjs.map +2 -2
- package/build-module/hooks/custom-class-name.mjs +0 -1
- package/build-module/hooks/custom-class-name.mjs.map +2 -2
- package/build-module/hooks/dimensions.mjs +12 -2
- package/build-module/hooks/dimensions.mjs.map +2 -2
- package/build-module/hooks/elements.mjs +115 -0
- package/build-module/hooks/elements.mjs.map +7 -0
- package/build-module/hooks/grid-visualizer.mjs +21 -11
- package/build-module/hooks/grid-visualizer.mjs.map +2 -2
- package/build-module/hooks/layout-child.mjs +68 -10
- package/build-module/hooks/layout-child.mjs.map +2 -2
- package/build-module/hooks/layout.mjs +6 -3
- package/build-module/hooks/layout.mjs.map +2 -2
- package/build-module/hooks/list-view.mjs +10 -7
- package/build-module/hooks/list-view.mjs.map +2 -2
- package/build-module/hooks/spacing-visualizer.mjs.map +1 -1
- package/build-module/hooks/state-utils.mjs.map +1 -1
- package/build-module/hooks/states.mjs +2 -2
- package/build-module/hooks/states.mjs.map +2 -2
- package/build-module/hooks/style.mjs +53 -8
- package/build-module/hooks/style.mjs.map +2 -2
- package/build-module/hooks/typography.mjs +62 -10
- package/build-module/hooks/typography.mjs.map +2 -2
- package/build-module/layouts/flex.mjs +105 -7
- package/build-module/layouts/flex.mjs.map +2 -2
- package/build-module/private-apis.mjs +8 -0
- package/build-module/private-apis.mjs.map +2 -2
- package/build-module/store/actions.mjs.map +1 -1
- package/build-module/store/private-selectors.mjs +18 -1
- package/build-module/store/private-selectors.mjs.map +2 -2
- package/build-module/store/reducer.mjs.map +1 -1
- package/build-module/store/selectors.mjs.map +1 -1
- package/build-module/utils/block-bindings.mjs +9 -9
- package/build-module/utils/block-bindings.mjs.map +3 -3
- package/build-module/utils/color-values.mjs +9 -1
- package/build-module/utils/color-values.mjs.map +3 -3
- package/build-module/utils/dom.mjs +2 -5
- package/build-module/utils/dom.mjs.map +3 -3
- package/build-module/utils/fit-text-frontend.mjs +6 -2
- package/build-module/utils/fit-text-frontend.mjs.map +3 -3
- package/build-module/utils/fit-text-utils.mjs +1 -1
- package/build-module/utils/fit-text-utils.mjs.map +3 -3
- package/build-module/utils/format-font-style.mjs +1 -1
- package/build-module/utils/format-font-style.mjs.map +3 -3
- package/build-module/utils/format-font-weight.mjs +1 -1
- package/build-module/utils/format-font-weight.mjs.map +3 -3
- package/build-module/utils/get-editor-region.mjs +4 -2
- package/build-module/utils/get-editor-region.mjs.map +3 -3
- package/build-module/utils/get-font-styles-and-weights.mjs +8 -12
- package/build-module/utils/get-font-styles-and-weights.mjs.map +3 -3
- package/build-module/utils/get-px-from-css-unit.mjs +1 -1
- package/build-module/utils/get-px-from-css-unit.mjs.map +1 -1
- package/build-module/utils/index.mjs +1 -1
- package/build-module/utils/index.mjs.map +1 -1
- package/build-module/utils/math.mjs +1 -1
- package/build-module/utils/math.mjs.map +3 -3
- package/build-module/utils/object.mjs +8 -8
- package/build-module/utils/object.mjs.map +3 -3
- package/build-module/utils/order-inserter-block-items.mjs +1 -1
- package/build-module/utils/order-inserter-block-items.mjs.map +3 -3
- package/build-module/utils/pasting.mjs +4 -2
- package/build-module/utils/pasting.mjs.map +3 -3
- package/build-module/utils/selection.mjs +3 -2
- package/build-module/utils/selection.mjs.map +3 -3
- package/build-module/utils/sorting.mjs +9 -3
- package/build-module/utils/sorting.mjs.map +3 -3
- package/build-module/utils/transform-styles/index.mjs +3 -2
- package/build-module/utils/transform-styles/index.mjs.map +3 -3
- package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs +1 -0
- package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs.map +7 -0
- package/build-module/utils/transform-styles/types.mjs +1 -0
- package/build-module/utils/transform-styles/types.mjs.map +7 -0
- package/build-module/utils/types.mjs +1 -0
- package/build-module/utils/types.mjs.map +7 -0
- package/build-style/content-rtl.css +2 -0
- package/build-style/content.css +2 -0
- package/build-style/style-rtl.css +34 -41
- package/build-style/style.css +34 -41
- package/build-types/utils/block-bindings.d.ts +27 -0
- package/build-types/utils/block-bindings.d.ts.map +1 -0
- package/build-types/utils/color-values.d.ts +40 -0
- package/build-types/utils/color-values.d.ts.map +1 -0
- package/build-types/utils/dom.d.ts +19 -19
- package/build-types/utils/dom.d.ts.map +1 -1
- package/build-types/utils/fit-text-frontend.d.ts +7 -0
- package/build-types/utils/fit-text-frontend.d.ts.map +1 -0
- package/build-types/utils/fit-text-utils.d.ts +15 -0
- package/build-types/utils/fit-text-utils.d.ts.map +1 -0
- package/build-types/utils/format-font-style.d.ts +12 -0
- package/build-types/utils/format-font-style.d.ts.map +1 -0
- package/build-types/utils/format-font-weight.d.ts +12 -0
- package/build-types/utils/format-font-weight.d.ts.map +1 -0
- package/build-types/utils/get-editor-region.d.ts +9 -0
- package/build-types/utils/get-editor-region.d.ts.map +1 -0
- package/build-types/utils/get-font-styles-and-weights.d.ts +16 -0
- package/build-types/utils/get-font-styles-and-weights.d.ts.map +1 -0
- package/build-types/utils/get-px-from-css-unit.d.ts +10 -0
- package/build-types/utils/get-px-from-css-unit.d.ts.map +1 -0
- package/build-types/utils/index.d.ts +3 -0
- package/build-types/utils/index.d.ts.map +1 -0
- package/build-types/utils/math.d.ts +61 -0
- package/build-types/utils/math.d.ts.map +1 -0
- package/build-types/utils/object.d.ts +39 -0
- package/build-types/utils/object.d.ts.map +1 -0
- package/build-types/utils/order-inserter-block-items.d.ts +13 -0
- package/build-types/utils/order-inserter-block-items.d.ts.map +1 -0
- package/build-types/utils/pasting.d.ts +28 -0
- package/build-types/utils/pasting.d.ts.map +1 -0
- package/build-types/utils/selection.d.ts +21 -0
- package/build-types/utils/selection.d.ts.map +1 -0
- package/build-types/utils/sorting.d.ts +17 -0
- package/build-types/utils/sorting.d.ts.map +1 -0
- package/build-types/utils/transform-styles/index.d.ts +15 -0
- package/build-types/utils/transform-styles/index.d.ts.map +1 -0
- package/build-types/utils/transform-styles/types.d.ts +13 -0
- package/build-types/utils/transform-styles/types.d.ts.map +1 -0
- package/build-types/utils/types.d.ts +28 -0
- package/build-types/utils/types.d.ts.map +1 -0
- package/package.json +46 -40
- package/src/components/alignment-control/test/__snapshots__/index.js.snap +6 -0
- package/src/components/block-alignment-control/test/__snapshots__/index.js.snap +5 -0
- package/src/components/block-card/index.js +7 -13
- package/src/components/block-editing-mode/index.js +17 -9
- package/src/components/block-icon/test/__snapshots__/index.js.snap +1 -0
- package/src/components/block-inspector/index.js +22 -20
- package/src/components/block-patterns-list/index.js +0 -1
- package/src/components/block-quick-navigation/index.js +7 -7
- package/src/components/block-rename/modal.js +0 -1
- package/src/components/block-toolbar/block-toolbar-icon.js +22 -6
- package/src/components/block-toolbar/test/block-toolbar-icon.js +99 -0
- package/src/components/block-tools/use-block-toolbar-popover-props.js +10 -4
- package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap +4 -0
- package/src/components/child-layout-control/index.js +65 -20
- package/src/components/child-layout-control/test/index.js +64 -0
- package/src/components/colors-gradients/control.js +29 -12
- package/src/components/colors-gradients/dropdown.js +4 -1
- package/src/components/colors-gradients/style.scss +39 -2
- package/src/components/contrast-checker/README.md +9 -0
- package/src/components/contrast-checker/index.js +42 -3
- package/src/components/date-format-picker/index.js +0 -1
- package/src/components/default-block-appender/content.scss +3 -0
- package/src/components/dimensions-tool/index.js +4 -9
- package/src/components/dimensions-tool/scale-tool.js +1 -2
- package/src/components/dimensions-tool/test/index.js +89 -11
- package/src/components/global-styles/background-panel.js +201 -34
- package/src/components/global-styles/color-gradient-dropdown-item.js +258 -0
- package/src/components/global-styles/color-panel.js +125 -487
- package/src/components/global-styles/dimensions-panel.js +1 -5
- package/src/components/global-styles/hooks.js +45 -0
- package/src/components/global-styles/shadow-panel-components.js +0 -1
- package/src/components/global-styles/test/background-panel.js +56 -0
- package/src/components/global-styles/test/color-panel.js +172 -118
- package/src/components/global-styles/test/typography-panel.js +167 -0
- package/src/components/global-styles/typography-panel.js +100 -11
- package/src/components/iframe/index.js +8 -3
- package/src/components/inserter/media-tab/media-preview.js +0 -1
- package/src/components/inspector-controls/README.md +0 -2
- package/src/components/inspector-controls/fill.js +6 -8
- package/src/components/inspector-controls/groups.js +2 -0
- package/src/components/inspector-controls-tabs/index.js +0 -1
- package/src/components/inspector-controls-tabs/styles-tab.js +78 -28
- package/src/components/link-control/index.js +0 -1
- package/src/components/link-control/test/index.js +2 -3
- package/src/components/list-view/block-select-button.js +2 -18
- package/src/components/preset-input-control/custom-value-controls.js +0 -1
- package/src/components/provider/use-block-sync.js +3 -1
- package/src/components/rich-text/content.scss +2 -0
- package/src/components/url-popover/image-url-input-ui.js +0 -2
- package/src/components/use-block-display-information/index.js +15 -2
- package/src/components/use-block-display-information/test/index.js +140 -0
- package/src/hooks/anchor.js +0 -1
- package/src/hooks/background.js +210 -133
- package/src/hooks/background.scss +0 -35
- package/src/hooks/block-fields/index.js +27 -2
- package/src/hooks/color.js +2 -205
- package/src/hooks/color.scss +3 -9
- package/src/hooks/contrast-checker.js +60 -17
- package/src/hooks/custom-class-name.js +0 -1
- package/src/hooks/dimensions.js +14 -3
- package/src/hooks/elements.js +140 -0
- package/src/hooks/elements.scss +8 -0
- package/src/hooks/grid-visualizer.js +59 -45
- package/src/hooks/layout-child.js +92 -14
- package/src/hooks/layout.js +6 -3
- package/src/hooks/list-view.js +10 -11
- package/src/hooks/states.js +2 -2
- package/src/hooks/style.js +91 -9
- package/src/hooks/test/background.js +59 -0
- package/src/hooks/test/block-style-state.js +14 -14
- package/src/hooks/test/dimensions.js +71 -0
- package/src/hooks/test/layout-child.js +165 -0
- package/src/hooks/test/layout.js +6 -6
- package/src/hooks/test/style.js +133 -11
- package/src/hooks/typography.js +70 -6
- package/src/layouts/flex.js +118 -15
- package/src/private-apis.js +8 -0
- package/src/store/private-selectors.js +47 -0
- package/src/store/test/private-selectors.js +166 -7
- package/src/store/test/reducer.js +61 -10
- package/src/style.scss +1 -0
- package/src/utils/block-bindings.ts +51 -0
- package/src/utils/color-values.ts +63 -0
- package/src/utils/{dom.js → dom.ts} +27 -27
- package/src/utils/{fit-text-frontend.js → fit-text-frontend.ts} +12 -4
- package/src/utils/{fit-text-utils.js → fit-text-utils.ts} +15 -7
- package/src/utils/{format-font-style.js → format-font-style.ts} +10 -3
- package/src/utils/{format-font-weight.js → format-font-weight.ts} +10 -3
- package/src/utils/{get-editor-region.js → get-editor-region.ts} +10 -6
- package/src/utils/{get-font-styles-and-weights.js → get-font-styles-and-weights.ts} +21 -17
- package/src/utils/{math.js → math.ts} +37 -30
- package/src/utils/object.ts +89 -0
- package/src/utils/{order-inserter-block-items.js → order-inserter-block-items.ts} +8 -5
- package/src/utils/{pasting.js → pasting.ts} +18 -11
- package/src/utils/{selection.js → selection.ts} +11 -4
- package/src/utils/sorting.ts +81 -0
- package/src/utils/test/color-values.js +44 -1
- package/src/utils/transform-styles/{index.js → index.ts} +25 -25
- package/src/utils/transform-styles/postcss-urlrebase.d.ts +15 -0
- package/src/utils/transform-styles/types.ts +13 -0
- package/src/utils/types.ts +29 -0
- package/src/utils/block-bindings.js +0 -46
- package/src/utils/color-values.js +0 -28
- package/src/utils/object.js +0 -67
- package/src/utils/sorting.js +0 -54
- /package/src/utils/{get-px-from-css-unit.js → get-px-from-css-unit.ts} +0 -0
- /package/src/utils/{index.js → index.ts} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/style.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n\t__EXPERIMENTAL_ELEMENTS as ELEMENTS,\n} from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\nimport { getCSSRules, compileCSS } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';\nimport { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';\nimport { COLOR_SUPPORT_KEY, ColorEdit } from './color';\nimport {\n\tTypographyPanel,\n\tTYPOGRAPHY_SUPPORT_KEY,\n\tTYPOGRAPHY_SUPPORT_KEYS,\n} from './typography';\nimport {\n\tDIMENSIONS_SUPPORT_KEY,\n\tSPACING_SUPPORT_KEY,\n\tDimensionsPanel,\n} from './dimensions';\nimport {\n\tcleanEmptyObject,\n\tshouldSkipSerialization,\n\tuseStyleOverride,\n\tuseBlockSettings,\n} from './utils';\nimport {\n\tBlockStyleStateProvider,\n\tDEFAULT_BLOCK_STYLE_STATE,\n\tgetStyleForState,\n\thasViewportBlockStyleState,\n\thasPseudoBlockStyleState,\n} from './block-style-state';\nimport { VALID_BLOCK_PSEUDO_STATES } from './states';\nimport { buildScopedBlockSelector } from './state-utils';\nimport { scopeSelector } from '../components/global-styles/utils';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];\n\n// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and\n// packages/global-styles-engine/src/core/render.tsx.\nconst RESPONSIVE_BREAKPOINTS = {\n\tmobile: '@media (width <= 480px)',\n\ttablet: '@media (480px < width <= 782px)',\n};\n\nconst styleSupportKeys = [\n\t...TYPOGRAPHY_SUPPORT_KEYS,\n\tBORDER_SUPPORT_KEY,\n\tCOLOR_SUPPORT_KEY,\n\tDIMENSIONS_SUPPORT_KEY,\n\tBACKGROUND_SUPPORT_KEY,\n\tSPACING_SUPPORT_KEY,\n\tSHADOW_SUPPORT_KEY,\n];\n\nconst hasStyleSupport = ( nameOrType ) =>\n\tstyleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );\n\n/**\n * Returns the inline styles to add depending on the style object\n *\n * @param {Object} styles Styles configuration.\n *\n * @return {Object} Flattened CSS variables declaration.\n */\nexport function getInlineStyles( styles = {} ) {\n\tconst output = {};\n\t// The goal is to move everything to server side generated engine styles\n\t// This is temporary as we absorb more and more styles into the engine.\n\tgetCSSRules( styles ).forEach( ( rule ) => {\n\t\toutput[ rule.key ] = rule.value;\n\t} );\n\n\treturn output;\n}\n\n/**\n * Returns fallback border styles for visible state border styles.\n *\n * State styles are emitted as stylesheet rules rather than inline styles, so\n * they cannot rely on the block-library inline-style attribute fallback rules.\n *\n * @param {Object} stateStyles State style object.\n * @return {Object|undefined} Style object containing fallback border styles.\n */\nfunction getStateFallbackBorderStyles( stateStyles ) {\n\tconst border = stateStyles?.border;\n\tif ( ! border ) {\n\t\treturn undefined;\n\t}\n\n\tconst hasBorderStyle = !! border.style;\n\tconst hasBorderColor = !! border.color;\n\tconst hasBorderWidth = !! border.width;\n\tconst fallbackBorder = {};\n\n\tif ( ! hasBorderStyle && ( hasBorderColor || hasBorderWidth ) ) {\n\t\tfallbackBorder.style = 'solid';\n\t}\n\n\tBORDER_SIDES.forEach( ( side ) => {\n\t\tconst sideKey = side.toLowerCase();\n\t\tconst sideBorder = border[ sideKey ];\n\t\tconst hasSideStyle = !! sideBorder?.style;\n\t\tconst hasSideColor = !! sideBorder?.color;\n\t\tconst hasSideWidth = !! sideBorder?.width;\n\n\t\tif (\n\t\t\t! hasBorderStyle &&\n\t\t\t! hasSideStyle &&\n\t\t\t( hasSideColor || hasSideWidth )\n\t\t) {\n\t\t\tfallbackBorder[ sideKey ] = { style: 'solid' };\n\t\t}\n\t} );\n\n\treturn cleanEmptyObject( { border: cleanEmptyObject( fallbackBorder ) } );\n}\n\n/**\n * Generates CSS for a block instance state style object.\n *\n * State declarations need to win over preset utility classes, but fallback\n * border styles should not become important because they must not override\n * explicitly authored default border styles.\n *\n * @param {Object} stateStyles State style object.\n * @param {string} selector CSS selector for the generated style.\n * @return {string} Generated stylesheet.\n */\nexport function getStateStylesCSS( stateStyles, selector ) {\n\tconst css = compileCSS( stateStyles, { selector } );\n\tconst importantCSS = css ? css.replace( /;/g, ' !important;' ) : undefined;\n\tconst fallbackBorderStyles = getStateFallbackBorderStyles( stateStyles );\n\tconst fallbackCSS = fallbackBorderStyles\n\t\t? compileCSS( fallbackBorderStyles, { selector } )\n\t\t: undefined;\n\n\treturn [ importantCSS, fallbackCSS ].filter( Boolean ).join( '\\n' );\n}\n\nfunction isPlainObject( value ) {\n\treturn !! value && typeof value === 'object' && ! Array.isArray( value );\n}\n\nfunction mergeStyleObjects( target = {}, source = {} ) {\n\tconst merged = { ...target };\n\n\tObject.entries( source ).forEach( ( [ key, value ] ) => {\n\t\tmerged[ key ] =\n\t\t\tisPlainObject( value ) && isPlainObject( merged[ key ] )\n\t\t\t\t? mergeStyleObjects( merged[ key ], value )\n\t\t\t\t: value;\n\t} );\n\n\treturn merged;\n}\n\nfunction addStyleGroup( groups, selector, style ) {\n\tconst key = selector || '';\n\tconst existing = groups.get( key ) || { selector, style: {} };\n\n\tgroups.set( key, {\n\t\tselector,\n\t\tstyle: mergeStyleObjects( existing.style, style ),\n\t} );\n}\n\nfunction getStateStyleGroups( stateStyles, name ) {\n\tconst blockSelectors = getBlockType( name )?.selectors || {};\n\tconst groups = new Map();\n\n\tObject.entries( stateStyles || {} ).forEach(\n\t\t( [ feature, featureStyles ] ) => {\n\t\t\tconst featureSelectors = blockSelectors[ feature ];\n\n\t\t\tif ( typeof featureSelectors === 'string' ) {\n\t\t\t\taddStyleGroup( groups, featureSelectors, {\n\t\t\t\t\t[ feature ]: featureStyles,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tisPlainObject( featureSelectors ) &&\n\t\t\t\tisPlainObject( featureStyles )\n\t\t\t) {\n\t\t\t\tconst remainingStyles = { ...featureStyles };\n\n\t\t\t\tObject.entries( featureSelectors ).forEach(\n\t\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tsubfeature === 'root' ||\n\t\t\t\t\t\t\ttypeof subfeatureSelector !== 'string' ||\n\t\t\t\t\t\t\t! Object.hasOwn( featureStyles, subfeature )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\taddStyleGroup( groups, subfeatureSelector, {\n\t\t\t\t\t\t\t[ feature ]: {\n\t\t\t\t\t\t\t\t[ subfeature ]: featureStyles[ subfeature ],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tdelete remainingStyles[ subfeature ];\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tif ( Object.keys( remainingStyles ).length ) {\n\t\t\t\t\taddStyleGroup(\n\t\t\t\t\t\tgroups,\n\t\t\t\t\t\tfeatureSelectors.root || blockSelectors.root,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t[ feature ]: remainingStyles,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\taddStyleGroup( groups, blockSelectors.root, {\n\t\t\t\t[ feature ]: featureStyles,\n\t\t\t} );\n\t\t}\n\t);\n\n\treturn Array.from( groups.values() );\n}\n\n/**\n * Generates CSS for block instance state styles, honoring feature selectors.\n *\n * @param {Object} stateStyles State style object.\n * @param {Object} options Generation options.\n * @param {string} options.name Block name.\n * @param {string} options.baseSelector Block-instance scoping selector.\n * @param {string=} options.state Optional pseudo-state, e.g. \":hover\".\n * @return {string|undefined} Generated stylesheet.\n */\nexport function getBlockStateStylesCSS( stateStyles, options ) {\n\tconst { name, baseSelector, state = '' } = options;\n\tconst rules = getStateStyleGroups( stateStyles, name )\n\t\t.map( ( { selector: blockSelector, style } ) =>\n\t\t\tgetStateStylesCSS(\n\t\t\t\tstyle,\n\t\t\t\tbuildScopedBlockSelector( baseSelector, blockSelector, state )\n\t\t\t)\n\t\t)\n\t\t.filter( Boolean );\n\n\treturn rules.length ? rules.join( '\\n' ) : undefined;\n}\n\n/**\n * Returns a style object with nested state/element keys removed.\n *\n * Viewport state objects can contain root declarations alongside nested\n * `elements` and pseudo-state styles. Only root declarations should be passed\n * to the style engine for the viewport root selector.\n *\n * @param {Object} stateStyles Style object for a selected state.\n * @param {string[]} nestedKeys Keys to remove from the root style object.\n * @return {Object|undefined} Root-only style object.\n */\nfunction getRootStateStyles( stateStyles, nestedKeys ) {\n\tif ( ! stateStyles ) {\n\t\treturn stateStyles;\n\t}\n\n\tconst rootStyles = { ...stateStyles };\n\tnestedKeys.forEach( ( key ) => {\n\t\tdelete rootStyles[ key ];\n\t} );\n\treturn rootStyles;\n}\n\n/**\n * Generates CSS rules for supported pseudo-state styles.\n *\n * @param {Object} style Block style object containing pseudo-state styles.\n * @param {string} name Block name.\n * @param {string} baseSelector Base selector used to scope generated CSS.\n * @return {string[]} Generated CSS rule strings.\n */\nfunction getPseudoStateCSSRules( style, name, baseSelector ) {\n\tconst validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ];\n\tif ( ! validPseudoStates ) {\n\t\treturn [];\n\t}\n\n\tconst cssRules = [];\n\tvalidPseudoStates.forEach( ( pseudoState ) => {\n\t\tconst stateStyles = style?.[ pseudoState ];\n\t\tif ( stateStyles ) {\n\t\t\tconst css = getBlockStateStylesCSS( stateStyles, {\n\t\t\t\tname,\n\t\t\t\tbaseSelector,\n\t\t\t\tstate: pseudoState,\n\t\t\t} );\n\t\t\tif ( css ) {\n\t\t\t\tcssRules.push( css );\n\t\t\t}\n\t\t}\n\t} );\n\treturn cssRules;\n}\n\n/**\n * Generates CSS rules for responsive block instance style states.\n *\n * Each responsive state can contain root styles, element styles, and nested\n * pseudo-state styles. Generated rules are wrapped in the matching breakpoint\n * media query.\n *\n * @param {Object} style Block style object containing responsive states.\n * @param {string} name Block name.\n * @param {string} baseSelector Base selector used to scope generated CSS.\n * @return {string[]} Generated CSS rule strings.\n */\nexport function getResponsiveStateCSSRules( style, name, baseSelector ) {\n\tconst cssRules = [];\n\tconst validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ] ?? [];\n\tconst nestedStateKeys = [ 'elements', ...validPseudoStates ];\n\n\tObject.entries( RESPONSIVE_BREAKPOINTS ).forEach(\n\t\t( [ viewport, mediaQuery ] ) => {\n\t\t\tconst viewportStyles = style?.[ viewport ];\n\t\t\tif ( ! viewportStyles ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst viewportCSSRules = [];\n\t\t\tconst rootCSS = getBlockStateStylesCSS(\n\t\t\t\tgetRootStateStyles( viewportStyles, nestedStateKeys ),\n\t\t\t\t{\n\t\t\t\t\tname,\n\t\t\t\t\tbaseSelector,\n\t\t\t\t}\n\t\t\t);\n\t\t\tif ( rootCSS ) {\n\t\t\t\tviewportCSSRules.push( rootCSS );\n\t\t\t}\n\n\t\t\tconst elementCSS = getElementCSSRules(\n\t\t\t\tviewportStyles.elements,\n\t\t\t\tname,\n\t\t\t\tbaseSelector\n\t\t\t);\n\t\t\tif ( elementCSS ) {\n\t\t\t\tviewportCSSRules.push( elementCSS );\n\t\t\t}\n\n\t\t\tviewportCSSRules.push(\n\t\t\t\t...getPseudoStateCSSRules( viewportStyles, name, baseSelector )\n\t\t\t);\n\n\t\t\tif ( viewportCSSRules.length ) {\n\t\t\t\tcssRules.push(\n\t\t\t\t\t`${ mediaQuery }{${ viewportCSSRules.join( '' ) }}`\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t);\n\n\treturn cssRules;\n}\n\n/**\n * Returns the style value used to force-preview a selected state on canvas.\n *\n * Responsive pseudo states inherit from their default-viewport pseudo state.\n * For example, selecting `mobile + :hover` should preview styles from\n * `:hover`, with `mobile.:hover` values layered on top when present.\n *\n * @param {Object} style Block style object.\n * @param {Object} selectedState Selected block style state.\n * @return {Object|undefined} Style value for the canvas preview.\n */\nexport function getCanvasStateStyleValue( style, selectedState ) {\n\tconst stateValue = getStyleForState( style, selectedState );\n\tif ( ! hasViewportBlockStyleState( selectedState ) ) {\n\t\treturn stateValue;\n\t}\n\n\tconst defaultViewportState = {\n\t\t...selectedState,\n\t\tviewport: DEFAULT_BLOCK_STYLE_STATE.viewport,\n\t};\n\tconst defaultViewportStateValue = getStyleForState(\n\t\tstyle,\n\t\tdefaultViewportState\n\t);\n\n\tif ( defaultViewportStateValue && stateValue ) {\n\t\treturn mergeGlobalStyles( defaultViewportStateValue, stateValue );\n\t}\n\treturn stateValue || defaultViewportStateValue;\n}\n\n/**\n * Filters registered block settings, extending attributes to include `style` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttribute( settings ) {\n\tif (\n\t\t! hasStyleSupport( settings ) &&\n\t\t! hasBlockSupport( settings, 'customCSS', true )\n\t) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * A dictionary of paths to flag skipping block support serialization as the key,\n * with values providing the style paths to be omitted from serialization.\n *\n * @constant\n * @type {Record<string, string[]>}\n */\nconst skipSerializationPathsEdit = {\n\t[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],\n\t[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tCOLOR_SUPPORT_KEY,\n\t],\n\t[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t],\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t],\n\t[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tSPACING_SUPPORT_KEY,\n\t],\n\t[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tSHADOW_SUPPORT_KEY,\n\t],\n};\n\n/**\n * A dictionary of paths to flag skipping block support serialization as the key,\n * with values providing the style paths to be omitted from serialization.\n *\n * Extends the Edit skip paths to enable skipping additional paths in just\n * the Save component. This allows a block support to be serialized within the\n * editor, while using an alternate approach, such as server-side rendering, when\n * the support is saved.\n *\n * @constant\n * @type {Record<string, string[]>}\n */\nconst skipSerializationPathsSave = {\n\t...skipSerializationPathsEdit,\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [\n\t\t`${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,\n\t], // Skip serialization of aspect ratio in save mode.\n\t[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.\n};\n\nconst skipSerializationPathsSaveChecks = {\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: true,\n\t[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,\n};\n\n/**\n * A dictionary used to normalize feature names between support flags, style\n * object properties and __experimentSkipSerialization configuration arrays.\n *\n * This allows not having to provide a migration for a support flag and possible\n * backwards compatibility bridges, while still achieving consistency between\n * the support flag and the skip serialization array.\n *\n * @constant\n * @type {Record<string, string>}\n */\nconst renamedFeatures = { gradients: 'gradient' };\n\n/**\n * A utility function used to remove one or more paths from a style object.\n * Works in a way similar to Lodash's `omit()`. See unit tests and examples below.\n *\n * It supports a single string path:\n *\n * ```\n * omitStyle( { color: 'red' }, 'color' ); // {}\n * ```\n *\n * or an array of paths:\n *\n * ```\n * omitStyle( { color: 'red', background: '#fff' }, [ 'color', 'background' ] ); // {}\n * ```\n *\n * It also allows you to specify paths at multiple levels in a string.\n *\n * ```\n * omitStyle( { typography: { textDecoration: 'underline' } }, 'typography.textDecoration' ); // {}\n * ```\n *\n * You can remove multiple paths at the same time:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\ttypography: {\n * \t\t\t\ttextDecoration: 'underline',\n * \t\t\t\ttextTransform: 'uppercase',\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t'typography.textDecoration',\n * \t\t\t'typography.textTransform',\n *\t\t]\n * );\n * // {}\n * ```\n *\n * You can also specify nested paths as arrays:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\ttypography: {\n * \t\t\t\ttextDecoration: 'underline',\n * \t\t\t\ttextTransform: 'uppercase',\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t[ 'typography', 'textDecoration' ],\n * \t\t\t[ 'typography', 'textTransform' ],\n *\t\t]\n * );\n * // {}\n * ```\n *\n * With regards to nesting of styles, infinite depth is supported:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\tborder: {\n * \t\t\t\tradius: {\n * \t\t\t\t\ttopLeft: '10px',\n * \t\t\t\t\ttopRight: '0.5rem',\n * \t\t\t\t}\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t[ 'border', 'radius', 'topRight' ],\n *\t\t]\n * );\n * // { border: { radius: { topLeft: '10px' } } }\n * ```\n *\n * The third argument, `preserveReference`, defines how to treat the input style object.\n * It is mostly necessary to properly handle mutation when recursively handling the style object.\n * Defaulting to `false`, this will always create a new object, avoiding to mutate `style`.\n * However, when recursing, we change that value to `true` in order to work with a single copy\n * of the original style object.\n *\n * @see https://lodash.com/docs/4.17.15#omit\n *\n * @param {Object} style Styles object.\n * @param {Array|string} paths Paths to remove.\n * @param {boolean} preserveReference True to mutate the `style` object, false otherwise.\n * @return {Object} Styles object with the specified paths removed.\n */\nexport function omitStyle( style, paths, preserveReference = false ) {\n\tif ( ! style ) {\n\t\treturn style;\n\t}\n\n\tlet newStyle = style;\n\tif ( ! preserveReference ) {\n\t\tnewStyle = JSON.parse( JSON.stringify( style ) );\n\t}\n\n\tif ( ! Array.isArray( paths ) ) {\n\t\tpaths = [ paths ];\n\t}\n\n\tpaths.forEach( ( path ) => {\n\t\tif ( ! Array.isArray( path ) ) {\n\t\t\tpath = path.split( '.' );\n\t\t}\n\n\t\tif ( path.length > 1 ) {\n\t\t\tconst [ firstSubpath, ...restPath ] = path;\n\t\t\tomitStyle( newStyle[ firstSubpath ], [ restPath ], true );\n\t\t} else if ( path.length === 1 ) {\n\t\t\tdelete newStyle[ path[ 0 ] ];\n\t\t}\n\t} );\n\n\treturn newStyle;\n}\n\n/**\n * Override props assigned to save component to inject the CSS variables definition.\n *\n * @param {Object} props Additional props applied to save element.\n * @param {Object|string} blockNameOrType Block type.\n * @param {Object} attributes Block attributes.\n * @param {?Record<string, string[]>} skipPaths An object of keys and paths to skip serialization.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps(\n\tprops,\n\tblockNameOrType,\n\tattributes,\n\tskipPaths = skipSerializationPathsSave\n) {\n\tif ( ! hasStyleSupport( blockNameOrType ) ) {\n\t\treturn props;\n\t}\n\n\tlet { style } = attributes;\n\tObject.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {\n\t\tconst skipSerialization =\n\t\t\tskipSerializationPathsSaveChecks[ indicator ] ||\n\t\t\tgetBlockSupport( blockNameOrType, indicator );\n\n\t\tif ( skipSerialization === true ) {\n\t\t\tstyle = omitStyle( style, path );\n\t\t}\n\n\t\tif ( Array.isArray( skipSerialization ) ) {\n\t\t\tskipSerialization.forEach( ( featureName ) => {\n\t\t\t\tconst feature = renamedFeatures[ featureName ] || featureName;\n\t\t\t\tstyle = omitStyle( style, [ [ ...path, feature ] ] );\n\t\t\t} );\n\t\t}\n\t} );\n\n\tprops.style = {\n\t\t...getInlineStyles( style ),\n\t\t...props.style,\n\t};\n\n\treturn props;\n}\n\nfunction BlockStyleControls( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tstyle,\n\t__unstableParentLayout,\n} ) {\n\tconst settings = useBlockSettings( name, __unstableParentLayout );\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst { globalBlockStyles, selectedState, showStateOnCanvas } = useSelect(\n\t\t( select ) => {\n\t\t\tconst blockEditorSelect = select( blockEditorStore );\n\t\t\tconst {\n\t\t\t\tgetSelectedBlockStyleState,\n\t\t\t\tisSelectedBlockStyleStateShownOnCanvas,\n\t\t\t} = unlock( blockEditorSelect );\n\t\t\tconst editorSettings = blockEditorSelect.getSettings();\n\t\t\treturn {\n\t\t\t\tglobalBlockStyles:\n\t\t\t\t\teditorSettings?.[ globalStylesDataKey ]?.blocks?.[ name ],\n\t\t\t\tselectedState: getSelectedBlockStyleState( clientId ),\n\t\t\t\tshowStateOnCanvas:\n\t\t\t\t\tisSelectedBlockStyleStateShownOnCanvas( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId, name ]\n\t);\n\tconst isPseudoSelectorState = hasPseudoBlockStyleState( selectedState );\n\n\t// Inject state styles onto the editor canvas so the selected state is\n\t// visible while editing. Scoped to this block instance via data-block so\n\t// other blocks of the same type are not affected. Must be called before\n\t// any early returns because it is a hook.\n\tconst canvasStateCSS = useMemo( () => {\n\t\tif ( ! showStateOnCanvas || ! isPseudoSelectorState ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst globalStateValue = getCanvasStateStyleValue(\n\t\t\tglobalBlockStyles,\n\t\t\tselectedState\n\t\t);\n\t\tconst instanceStateValue = getCanvasStateStyleValue(\n\t\t\tstyle,\n\t\t\tselectedState\n\t\t);\n\t\tlet stateValue;\n\n\t\tif ( globalStateValue && instanceStateValue ) {\n\t\t\tstateValue = mergeGlobalStyles(\n\t\t\t\tglobalStateValue,\n\t\t\t\tinstanceStateValue\n\t\t\t);\n\t\t} else if ( instanceStateValue ) {\n\t\t\tstateValue = instanceStateValue;\n\t\t} else if ( globalStateValue ) {\n\t\t\tstateValue = globalStateValue;\n\t\t} else {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn getBlockStateStylesCSS( stateValue, {\n\t\t\tname,\n\t\t\tbaseSelector: `[data-block=\"${ clientId }\"]`,\n\t\t} );\n\t}, [\n\t\tshowStateOnCanvas,\n\t\tisPseudoSelectorState,\n\t\tglobalBlockStyles,\n\t\tstyle,\n\t\tselectedState,\n\t\tclientId,\n\t\tname,\n\t] );\n\tuseStyleOverride( { css: canvasStateCSS } );\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst panelSettings = {\n\t\t...settings,\n\t\ttypography: {\n\t\t\t...settings.typography,\n\t\t\t// The text alignment UI for individual blocks is rendered in\n\t\t\t// the block toolbar, so disable it here.\n\t\t\ttextAlign: false,\n\t\t},\n\t};\n\n\tconst passedProps = {\n\t\tclientId,\n\t\tname,\n\t\tsetAttributes,\n\t\tsettings: panelSettings,\n\t};\n\n\treturn (\n\t\t<BlockStyleStateProvider value={ selectedState }>\n\t\t\t<ColorEdit { ...passedProps } />\n\t\t\t<BackgroundImagePanel { ...passedProps } />\n\t\t\t<TypographyPanel { ...passedProps } />\n\t\t\t<BorderPanel { ...passedProps } />\n\t\t\t<DimensionsPanel { ...passedProps } />\n\t\t</BlockStyleStateProvider>\n\t);\n}\n\nexport default {\n\tedit: BlockStyleControls,\n\thasSupport: hasStyleSupport,\n\taddSaveProps,\n\tattributeKeys: [ 'style' ],\n\tuseBlockProps,\n};\n\n// Defines which element types are supported, including their hover styles or\n// any other elements that have been included under a single element type\n// e.g. heading and h1-h6.\nconst elementTypes = [\n\t{ elementType: 'button' },\n\t{ elementType: 'link', pseudo: [ ':hover' ] },\n\t{\n\t\telementType: 'heading',\n\t\telements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],\n\t},\n];\n\n// Used for generating the instance ID\nconst STYLE_BLOCK_PROPS_REFERENCE = {};\n\n/**\n * Generates CSS rules for block element styles (buttons, links, headings, etc.).\n *\n * Iterates over supported element types and compiles their styles, including\n * pseudo-selectors (e.g. :hover) and related sub-elements (e.g. h1-h6 for headings),\n * into scoped CSS rule strings.\n *\n * @param {Object} blockElementStyles The block's `style.elements` object.\n * @param {string} blockName The block name, used for skip-serialization checks.\n * @param {string} baseSelector The base CSS selector to scope rules under.\n * @return {string|undefined} Concatenated CSS rules string, or undefined if none.\n */\nfunction getElementCSSRules( blockElementStyles, blockName, baseSelector ) {\n\tif ( ! blockElementStyles ) {\n\t\treturn;\n\t}\n\n\tconst rules = [];\n\n\telementTypes.forEach( ( { elementType, pseudo, elements } ) => {\n\t\tconst skipSerialization = shouldSkipSerialization(\n\t\t\tblockName,\n\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\telementType\n\t\t);\n\n\t\tif ( skipSerialization ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementStyles = blockElementStyles?.[ elementType ];\n\n\t\t// Process primary element type styles.\n\t\tif ( elementStyles ) {\n\t\t\tconst selector = scopeSelector(\n\t\t\t\tbaseSelector,\n\t\t\t\tELEMENTS[ elementType ]\n\t\t\t);\n\n\t\t\trules.push( compileCSS( elementStyles, { selector } ) );\n\n\t\t\t// Process any interactive states for the element type.\n\t\t\tif ( pseudo ) {\n\t\t\t\tpseudo.forEach( ( pseudoSelector ) => {\n\t\t\t\t\tif ( elementStyles[ pseudoSelector ] ) {\n\t\t\t\t\t\trules.push(\n\t\t\t\t\t\t\tcompileCSS( elementStyles[ pseudoSelector ], {\n\t\t\t\t\t\t\t\tselector: scopeSelector(\n\t\t\t\t\t\t\t\t\tbaseSelector,\n\t\t\t\t\t\t\t\t\t`${ ELEMENTS[ elementType ] }${ pseudoSelector }`\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\t// Process related elements e.g. h1-h6 for headings\n\t\tif ( elements ) {\n\t\t\telements.forEach( ( element ) => {\n\t\t\t\tif ( blockElementStyles[ element ] ) {\n\t\t\t\t\trules.push(\n\t\t\t\t\t\tcompileCSS( blockElementStyles[ element ], {\n\t\t\t\t\t\t\tselector: scopeSelector(\n\t\t\t\t\t\t\t\tbaseSelector,\n\t\t\t\t\t\t\t\tELEMENTS[ element ]\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\treturn rules.length > 0 ? rules.join( '' ) : undefined;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tconst blockElementsContainerIdentifier = useInstanceId(\n\t\tSTYLE_BLOCK_PROPS_REFERENCE,\n\t\t'wp-elements'\n\t);\n\n\tconst baseElementSelector = `.${ blockElementsContainerIdentifier }`;\n\tconst blockElementStyles = style?.elements;\n\n\tconst styles = useMemo( () => {\n\t\tconst cssRules = [];\n\n\t\tconst elementCSS = getElementCSSRules(\n\t\t\tblockElementStyles,\n\t\t\tname,\n\t\t\tbaseElementSelector\n\t\t);\n\t\tif ( elementCSS ) {\n\t\t\tcssRules.push( elementCSS );\n\t\t}\n\n\t\tcssRules.push(\n\t\t\t...getPseudoStateCSSRules( style, name, baseElementSelector )\n\t\t);\n\n\t\tcssRules.push(\n\t\t\t...getResponsiveStateCSSRules( style, name, baseElementSelector )\n\t\t);\n\n\t\treturn cssRules.length > 0 ? cssRules.join( '' ) : undefined;\n\t}, [ baseElementSelector, blockElementStyles, name, style ] );\n\n\tuseStyleOverride( { css: styles } );\n\n\treturn addSaveProps(\n\t\t{ className: blockElementsContainerIdentifier },\n\t\tname,\n\t\t{ style },\n\t\tskipSerializationPathsEdit\n\t);\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/style/addAttribute',\n\taddAttribute\n);\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n\t__EXPERIMENTAL_ELEMENTS as ELEMENTS,\n} from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\nimport { getCSSRules, compileCSS } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';\nimport { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';\nimport { COLOR_SUPPORT_KEY } from './color';\nimport { ElementsEdit } from './elements';\nimport {\n\tTypographyPanel,\n\tTYPOGRAPHY_SUPPORT_KEY,\n\tTYPOGRAPHY_SUPPORT_KEYS,\n} from './typography';\nimport {\n\tDIMENSIONS_SUPPORT_KEY,\n\tSPACING_SUPPORT_KEY,\n\tDimensionsPanel,\n\tisExplicitAspectRatio,\n} from './dimensions';\nimport {\n\tcleanEmptyObject,\n\tshouldSkipSerialization,\n\tuseStyleOverride,\n\tuseBlockSettings,\n} from './utils';\nimport {\n\tBlockStyleStateProvider,\n\tDEFAULT_BLOCK_STYLE_STATE,\n\tgetStyleForState,\n\thasViewportBlockStyleState,\n\thasPseudoBlockStyleState,\n} from './block-style-state';\nimport { VALID_BLOCK_PSEUDO_STATES } from './states';\nimport { buildScopedBlockSelector } from './state-utils';\nimport { scopeSelector } from '../components/global-styles/utils';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];\n\n// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and\n// packages/global-styles-engine/src/core/render.tsx.\nconst RESPONSIVE_BREAKPOINTS = {\n\t'@mobile': '@media (width <= 480px)',\n\t'@tablet': '@media (480px < width <= 782px)',\n};\n\nconst styleSupportKeys = [\n\t...TYPOGRAPHY_SUPPORT_KEYS,\n\tBORDER_SUPPORT_KEY,\n\tCOLOR_SUPPORT_KEY,\n\tDIMENSIONS_SUPPORT_KEY,\n\tBACKGROUND_SUPPORT_KEY,\n\tSPACING_SUPPORT_KEY,\n\tSHADOW_SUPPORT_KEY,\n];\n\nconst hasStyleSupport = ( nameOrType ) =>\n\tstyleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );\n\n/**\n * Returns the inline styles to add depending on the style object\n *\n * @param {Object} styles Styles configuration.\n *\n * @return {Object} Flattened CSS variables declaration.\n */\nexport function getInlineStyles( styles = {} ) {\n\tconst output = {};\n\t// The goal is to move everything to server side generated engine styles\n\t// This is temporary as we absorb more and more styles into the engine.\n\tgetCSSRules( styles ).forEach( ( rule ) => {\n\t\toutput[ rule.key ] = rule.value;\n\t} );\n\n\treturn output;\n}\n\n/**\n * Returns fallback border styles for visible state border styles.\n *\n * State styles are emitted as stylesheet rules rather than inline styles, so\n * they cannot rely on the block-library inline-style attribute fallback rules.\n *\n * @param {Object} stateStyles State style object.\n * @return {Object|undefined} Style object containing fallback border styles.\n */\nfunction getStateFallbackBorderStyles( stateStyles ) {\n\tconst border = stateStyles?.border;\n\tif ( ! border ) {\n\t\treturn undefined;\n\t}\n\n\tconst hasBorderStyle = !! border.style;\n\tconst hasBorderColor = !! border.color;\n\tconst hasBorderWidth = !! border.width;\n\tconst fallbackBorder = {};\n\n\tif ( ! hasBorderStyle && ( hasBorderColor || hasBorderWidth ) ) {\n\t\tfallbackBorder.style = 'solid';\n\t}\n\n\tBORDER_SIDES.forEach( ( side ) => {\n\t\tconst sideKey = side.toLowerCase();\n\t\tconst sideBorder = border[ sideKey ];\n\t\tconst hasSideStyle = !! sideBorder?.style;\n\t\tconst hasSideColor = !! sideBorder?.color;\n\t\tconst hasSideWidth = !! sideBorder?.width;\n\n\t\tif (\n\t\t\t! hasBorderStyle &&\n\t\t\t! hasSideStyle &&\n\t\t\t( hasSideColor || hasSideWidth )\n\t\t) {\n\t\t\tfallbackBorder[ sideKey ] = { style: 'solid' };\n\t\t}\n\t} );\n\n\treturn cleanEmptyObject( { border: cleanEmptyObject( fallbackBorder ) } );\n}\n\n/**\n * Returns background reset CSS for a state that sets a solid background color.\n *\n * When a state sets `color.background` (a solid color) without also setting a\n * gradient (`color.gradient` or `background.gradient`), any gradient applied to\n * the default state via an inline `background` shorthand or `background-image`\n * declaration must be explicitly cleared. Without this, the gradient image layer\n * remains visible even though the solid hover color wins `background-color`.\n *\n * @param {Object} stateStyles State style object.\n * @param {string} selector CSS selector for the generated style.\n * @return {string|undefined} CSS string with background-image reset, or undefined.\n */\nfunction getStateBackgroundResetCSS( stateStyles, selector ) {\n\tconst hasSolidBackground = !! stateStyles?.color?.background;\n\n\tif ( ! hasSolidBackground ) {\n\t\treturn undefined;\n\t}\n\n\tconst hasColorGradient = !! stateStyles?.color?.gradient;\n\tconst hasBackgroundGradient =\n\t\t!! stateStyles?.background?.gradient ||\n\t\t!! stateStyles?.background?.backgroundImage;\n\n\tif ( hasColorGradient || hasBackgroundGradient ) {\n\t\treturn undefined;\n\t}\n\n\tconst declaration = 'background-image: unset !important';\n\treturn selector\n\t\t? `${ selector } { ${ declaration }; }`\n\t\t: `${ declaration };`;\n}\n\n/**\n * Returns fallback dimension styles that keep state styles aligned with the\n * default dimensions block-support output.\n *\n * @param {Object} stateStyles State style object.\n * @return {Object|undefined} Style object containing fallback dimension styles.\n */\nfunction getStateFallbackDimensionStyles( stateStyles ) {\n\tconst dimensions = stateStyles?.dimensions;\n\tif ( ! dimensions ) {\n\t\treturn undefined;\n\t}\n\n\tif ( isExplicitAspectRatio( dimensions.aspectRatio ) ) {\n\t\treturn {\n\t\t\tdimensions: {\n\t\t\t\tminHeight: 'unset',\n\t\t\t\theight: 'unset',\n\t\t\t},\n\t\t};\n\t}\n\n\tif ( dimensions.minHeight || dimensions.height ) {\n\t\treturn {\n\t\t\tdimensions: {\n\t\t\t\taspectRatio: 'unset',\n\t\t\t},\n\t\t};\n\t}\n}\n\n/**\n * Generates CSS for a block instance state style object.\n *\n * State declarations need to win over preset utility classes, but fallback\n * border styles should not become important because they must not override\n * explicitly authored default border styles.\n *\n * @param {Object} stateStyles State style object.\n * @param {string} selector CSS selector for the generated style.\n * @return {string} Generated stylesheet.\n */\nexport function getStateStylesCSS( stateStyles, selector ) {\n\tconst fallbackDimensionStyles =\n\t\tgetStateFallbackDimensionStyles( stateStyles );\n\tconst stylesWithDimensionFallbacks = fallbackDimensionStyles\n\t\t? mergeStyleObjects( stateStyles, fallbackDimensionStyles )\n\t\t: stateStyles;\n\tconst css = compileCSS( stylesWithDimensionFallbacks, { selector } );\n\tconst importantCSS = css ? css.replace( /;/g, ' !important;' ) : undefined;\n\tconst fallbackBorderStyles = getStateFallbackBorderStyles( stateStyles );\n\tconst fallbackCSS = fallbackBorderStyles\n\t\t? compileCSS( fallbackBorderStyles, { selector } )\n\t\t: undefined;\n\tconst backgroundResetCSS = getStateBackgroundResetCSS(\n\t\tstateStyles,\n\t\tselector\n\t);\n\n\treturn [ importantCSS, fallbackCSS, backgroundResetCSS ]\n\t\t.filter( Boolean )\n\t\t.join( '\\n' );\n}\n\nfunction isPlainObject( value ) {\n\treturn !! value && typeof value === 'object' && ! Array.isArray( value );\n}\n\nfunction mergeStyleObjects( target = {}, source = {} ) {\n\tconst merged = { ...target };\n\n\tObject.entries( source ).forEach( ( [ key, value ] ) => {\n\t\tmerged[ key ] =\n\t\t\tisPlainObject( value ) && isPlainObject( merged[ key ] )\n\t\t\t\t? mergeStyleObjects( merged[ key ], value )\n\t\t\t\t: value;\n\t} );\n\n\treturn merged;\n}\n\nfunction addStyleGroup( groups, selector, style ) {\n\tconst key = selector || '';\n\tconst existing = groups.get( key ) || { selector, style: {} };\n\n\tgroups.set( key, {\n\t\tselector,\n\t\tstyle: mergeStyleObjects( existing.style, style ),\n\t} );\n}\n\nfunction getStateStyleGroups( stateStyles, name ) {\n\tconst blockSelectors = getBlockType( name )?.selectors || {};\n\tconst groups = new Map();\n\n\tObject.entries( stateStyles || {} ).forEach(\n\t\t( [ feature, featureStyles ] ) => {\n\t\t\tconst featureSelectors = blockSelectors[ feature ];\n\n\t\t\tif ( typeof featureSelectors === 'string' ) {\n\t\t\t\taddStyleGroup( groups, featureSelectors, {\n\t\t\t\t\t[ feature ]: featureStyles,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tisPlainObject( featureSelectors ) &&\n\t\t\t\tisPlainObject( featureStyles )\n\t\t\t) {\n\t\t\t\tconst remainingStyles = { ...featureStyles };\n\n\t\t\t\tObject.entries( featureSelectors ).forEach(\n\t\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tsubfeature === 'root' ||\n\t\t\t\t\t\t\ttypeof subfeatureSelector !== 'string' ||\n\t\t\t\t\t\t\t! Object.hasOwn( featureStyles, subfeature )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\taddStyleGroup( groups, subfeatureSelector, {\n\t\t\t\t\t\t\t[ feature ]: {\n\t\t\t\t\t\t\t\t[ subfeature ]: featureStyles[ subfeature ],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tdelete remainingStyles[ subfeature ];\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tif ( Object.keys( remainingStyles ).length ) {\n\t\t\t\t\taddStyleGroup(\n\t\t\t\t\t\tgroups,\n\t\t\t\t\t\tfeatureSelectors.root || blockSelectors.root,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t[ feature ]: remainingStyles,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\taddStyleGroup( groups, blockSelectors.root, {\n\t\t\t\t[ feature ]: featureStyles,\n\t\t\t} );\n\t\t}\n\t);\n\n\treturn Array.from( groups.values() );\n}\n\n/**\n * Generates CSS for block instance state styles, honoring feature selectors.\n *\n * @param {Object} stateStyles State style object.\n * @param {Object} options Generation options.\n * @param {string} options.name Block name.\n * @param {string} options.baseSelector Block-instance scoping selector.\n * @param {string=} options.state Optional pseudo-state, e.g. \":hover\".\n * @return {string|undefined} Generated stylesheet.\n */\nexport function getBlockStateStylesCSS( stateStyles, options ) {\n\tconst { name, baseSelector, state = '' } = options;\n\tconst rules = getStateStyleGroups( stateStyles, name )\n\t\t.map( ( { selector: blockSelector, style } ) =>\n\t\t\tgetStateStylesCSS(\n\t\t\t\tstyle,\n\t\t\t\tbuildScopedBlockSelector( baseSelector, blockSelector, state )\n\t\t\t)\n\t\t)\n\t\t.filter( Boolean );\n\n\treturn rules.length ? rules.join( '\\n' ) : undefined;\n}\n\n/**\n * Returns a style object with nested state/element keys removed.\n *\n * Viewport state objects can contain root declarations alongside nested\n * `elements` and pseudo-state styles. Only root declarations should be passed\n * to the style engine for the viewport root selector.\n *\n * @param {Object} stateStyles Style object for a selected state.\n * @param {string[]} nestedKeys Keys to remove from the root style object.\n * @return {Object|undefined} Root-only style object.\n */\nfunction getRootStateStyles( stateStyles, nestedKeys ) {\n\tif ( ! stateStyles ) {\n\t\treturn stateStyles;\n\t}\n\n\tconst rootStyles = { ...stateStyles };\n\tnestedKeys.forEach( ( key ) => {\n\t\tdelete rootStyles[ key ];\n\t} );\n\treturn rootStyles;\n}\n\n/**\n * Generates CSS rules for supported pseudo-state styles.\n *\n * @param {Object} style Block style object containing pseudo-state styles.\n * @param {string} name Block name.\n * @param {string} baseSelector Base selector used to scope generated CSS.\n * @return {string[]} Generated CSS rule strings.\n */\nfunction getPseudoStateCSSRules( style, name, baseSelector ) {\n\tconst validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ];\n\tif ( ! validPseudoStates ) {\n\t\treturn [];\n\t}\n\n\tconst cssRules = [];\n\tvalidPseudoStates.forEach( ( pseudoState ) => {\n\t\tconst stateStyles = style?.[ pseudoState ];\n\t\tif ( stateStyles ) {\n\t\t\tconst css = getBlockStateStylesCSS( stateStyles, {\n\t\t\t\tname,\n\t\t\t\tbaseSelector,\n\t\t\t\tstate: pseudoState,\n\t\t\t} );\n\t\t\tif ( css ) {\n\t\t\t\tcssRules.push( css );\n\t\t\t}\n\t\t}\n\t} );\n\treturn cssRules;\n}\n\n/**\n * Generates CSS rules for responsive block instance style states.\n *\n * Each responsive state can contain root styles, element styles, and nested\n * pseudo-state styles. Generated rules are wrapped in the matching breakpoint\n * media query.\n *\n * @param {Object} style Block style object containing responsive states.\n * @param {string} name Block name.\n * @param {string} baseSelector Base selector used to scope generated CSS.\n * @return {string[]} Generated CSS rule strings.\n */\nexport function getResponsiveStateCSSRules( style, name, baseSelector ) {\n\tconst cssRules = [];\n\tconst validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ] ?? [];\n\tconst nestedStateKeys = [ 'elements', ...validPseudoStates ];\n\n\tObject.entries( RESPONSIVE_BREAKPOINTS ).forEach(\n\t\t( [ viewport, mediaQuery ] ) => {\n\t\t\tconst viewportStyles = getStyleForState( style, {\n\t\t\t\tviewport,\n\t\t\t\tpseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,\n\t\t\t} );\n\t\t\tif ( ! viewportStyles ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst viewportCSSRules = [];\n\t\t\tconst rootCSS = getBlockStateStylesCSS(\n\t\t\t\tgetRootStateStyles( viewportStyles, nestedStateKeys ),\n\t\t\t\t{\n\t\t\t\t\tname,\n\t\t\t\t\tbaseSelector,\n\t\t\t\t}\n\t\t\t);\n\t\t\tif ( rootCSS ) {\n\t\t\t\tviewportCSSRules.push( rootCSS );\n\t\t\t}\n\n\t\t\tconst elementCSS = getElementCSSRules(\n\t\t\t\tviewportStyles.elements,\n\t\t\t\tname,\n\t\t\t\tbaseSelector\n\t\t\t);\n\t\t\tif ( elementCSS ) {\n\t\t\t\tviewportCSSRules.push( elementCSS );\n\t\t\t}\n\n\t\t\tviewportCSSRules.push(\n\t\t\t\t...getPseudoStateCSSRules( viewportStyles, name, baseSelector )\n\t\t\t);\n\n\t\t\tif ( viewportCSSRules.length ) {\n\t\t\t\tcssRules.push(\n\t\t\t\t\t`${ mediaQuery }{${ viewportCSSRules.join( '' ) }}`\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t);\n\n\treturn cssRules;\n}\n\n/**\n * Returns the style value used to force-preview a selected state on canvas.\n *\n * Responsive pseudo states inherit from their default-viewport pseudo state.\n * For example, selecting `@mobile + :hover` should preview styles from\n * `:hover`, with `@mobile.:hover` values layered on top when present.\n *\n * @param {Object} style Block style object.\n * @param {Object} selectedState Selected block style state.\n * @return {Object|undefined} Style value for the canvas preview.\n */\nexport function getCanvasStateStyleValue( style, selectedState ) {\n\tconst stateValue = getStyleForState( style, selectedState );\n\tif ( ! hasViewportBlockStyleState( selectedState ) ) {\n\t\treturn stateValue;\n\t}\n\n\tconst defaultViewportState = {\n\t\t...selectedState,\n\t\tviewport: DEFAULT_BLOCK_STYLE_STATE.viewport,\n\t};\n\tconst defaultViewportStateValue = getStyleForState(\n\t\tstyle,\n\t\tdefaultViewportState\n\t);\n\n\tif ( defaultViewportStateValue && stateValue ) {\n\t\treturn mergeGlobalStyles( defaultViewportStateValue, stateValue );\n\t}\n\treturn stateValue || defaultViewportStateValue;\n}\n\n/**\n * Filters registered block settings, extending attributes to include `style` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttribute( settings ) {\n\tif (\n\t\t! hasStyleSupport( settings ) &&\n\t\t! hasBlockSupport( settings, 'customCSS', true )\n\t) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * A dictionary of paths to flag skipping block support serialization as the key,\n * with values providing the style paths to be omitted from serialization.\n *\n * @constant\n * @type {Record<string, string[]>}\n */\nconst skipSerializationPathsEdit = {\n\t[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],\n\t[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tCOLOR_SUPPORT_KEY,\n\t],\n\t[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t],\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t],\n\t[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tSPACING_SUPPORT_KEY,\n\t],\n\t[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [\n\t\tSHADOW_SUPPORT_KEY,\n\t],\n};\n\n/**\n * A dictionary of paths to flag skipping block support serialization as the key,\n * with values providing the style paths to be omitted from serialization.\n *\n * Extends the Edit skip paths to enable skipping additional paths in just\n * the Save component. This allows a block support to be serialized within the\n * editor, while using an alternate approach, such as server-side rendering, when\n * the support is saved.\n *\n * @constant\n * @type {Record<string, string[]>}\n */\nconst skipSerializationPathsSave = {\n\t...skipSerializationPathsEdit,\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [\n\t\t`${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,\n\t], // Skip serialization of aspect ratio in save mode.\n\t[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.\n};\n\nconst skipSerializationPathsSaveChecks = {\n\t[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: true,\n\t[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,\n};\n\n/**\n * A dictionary used to normalize feature names between support flags, style\n * object properties and __experimentSkipSerialization configuration arrays.\n *\n * This allows not having to provide a migration for a support flag and possible\n * backwards compatibility bridges, while still achieving consistency between\n * the support flag and the skip serialization array.\n *\n * @constant\n * @type {Record<string, string>}\n */\nconst renamedFeatures = { gradients: 'gradient' };\n\n/**\n * A utility function used to remove one or more paths from a style object.\n * Works in a way similar to Lodash's `omit()`. See unit tests and examples below.\n *\n * It supports a single string path:\n *\n * ```\n * omitStyle( { color: 'red' }, 'color' ); // {}\n * ```\n *\n * or an array of paths:\n *\n * ```\n * omitStyle( { color: 'red', background: '#fff' }, [ 'color', 'background' ] ); // {}\n * ```\n *\n * It also allows you to specify paths at multiple levels in a string.\n *\n * ```\n * omitStyle( { typography: { textDecoration: 'underline' } }, 'typography.textDecoration' ); // {}\n * ```\n *\n * You can remove multiple paths at the same time:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\ttypography: {\n * \t\t\t\ttextDecoration: 'underline',\n * \t\t\t\ttextTransform: 'uppercase',\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t'typography.textDecoration',\n * \t\t\t'typography.textTransform',\n *\t\t]\n * );\n * // {}\n * ```\n *\n * You can also specify nested paths as arrays:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\ttypography: {\n * \t\t\t\ttextDecoration: 'underline',\n * \t\t\t\ttextTransform: 'uppercase',\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t[ 'typography', 'textDecoration' ],\n * \t\t\t[ 'typography', 'textTransform' ],\n *\t\t]\n * );\n * // {}\n * ```\n *\n * With regards to nesting of styles, infinite depth is supported:\n *\n * ```\n * omitStyle(\n * \t\t{\n * \t\t\tborder: {\n * \t\t\t\tradius: {\n * \t\t\t\t\ttopLeft: '10px',\n * \t\t\t\t\ttopRight: '0.5rem',\n * \t\t\t\t}\n * \t\t\t}\n *\t\t},\n *\t\t[\n * \t\t\t[ 'border', 'radius', 'topRight' ],\n *\t\t]\n * );\n * // { border: { radius: { topLeft: '10px' } } }\n * ```\n *\n * The third argument, `preserveReference`, defines how to treat the input style object.\n * It is mostly necessary to properly handle mutation when recursively handling the style object.\n * Defaulting to `false`, this will always create a new object, avoiding to mutate `style`.\n * However, when recursing, we change that value to `true` in order to work with a single copy\n * of the original style object.\n *\n * @see https://lodash.com/docs/4.17.15#omit\n *\n * @param {Object} style Styles object.\n * @param {Array|string} paths Paths to remove.\n * @param {boolean} preserveReference True to mutate the `style` object, false otherwise.\n * @return {Object} Styles object with the specified paths removed.\n */\nexport function omitStyle( style, paths, preserveReference = false ) {\n\tif ( ! style ) {\n\t\treturn style;\n\t}\n\n\tlet newStyle = style;\n\tif ( ! preserveReference ) {\n\t\tnewStyle = JSON.parse( JSON.stringify( style ) );\n\t}\n\n\tif ( ! Array.isArray( paths ) ) {\n\t\tpaths = [ paths ];\n\t}\n\n\tpaths.forEach( ( path ) => {\n\t\tif ( ! Array.isArray( path ) ) {\n\t\t\tpath = path.split( '.' );\n\t\t}\n\n\t\tif ( path.length > 1 ) {\n\t\t\tconst [ firstSubpath, ...restPath ] = path;\n\t\t\tomitStyle( newStyle[ firstSubpath ], [ restPath ], true );\n\t\t} else if ( path.length === 1 ) {\n\t\t\tdelete newStyle[ path[ 0 ] ];\n\t\t}\n\t} );\n\n\treturn newStyle;\n}\n\n/**\n * Override props assigned to save component to inject the CSS variables definition.\n *\n * @param {Object} props Additional props applied to save element.\n * @param {Object|string} blockNameOrType Block type.\n * @param {Object} attributes Block attributes.\n * @param {?Record<string, string[]>} skipPaths An object of keys and paths to skip serialization.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps(\n\tprops,\n\tblockNameOrType,\n\tattributes,\n\tskipPaths = skipSerializationPathsSave\n) {\n\tif ( ! hasStyleSupport( blockNameOrType ) ) {\n\t\treturn props;\n\t}\n\n\tlet { style } = attributes;\n\tObject.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {\n\t\tconst skipSerialization =\n\t\t\tskipSerializationPathsSaveChecks[ indicator ] ||\n\t\t\tgetBlockSupport( blockNameOrType, indicator );\n\n\t\tif ( skipSerialization === true ) {\n\t\t\tstyle = omitStyle( style, path );\n\t\t}\n\n\t\tif ( Array.isArray( skipSerialization ) ) {\n\t\t\tskipSerialization.forEach( ( featureName ) => {\n\t\t\t\tconst feature = renamedFeatures[ featureName ] || featureName;\n\t\t\t\tstyle = omitStyle( style, [ [ ...path, feature ] ] );\n\t\t\t} );\n\t\t}\n\t} );\n\n\tprops.style = {\n\t\t...getInlineStyles( style ),\n\t\t...props.style,\n\t};\n\n\treturn props;\n}\n\nfunction BlockStyleControls( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tstyle,\n\t__unstableParentLayout,\n} ) {\n\tconst settings = useBlockSettings( name, __unstableParentLayout );\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst { globalBlockStyles, selectedState, showStateOnCanvas } = useSelect(\n\t\t( select ) => {\n\t\t\tconst blockEditorSelect = select( blockEditorStore );\n\t\t\tconst {\n\t\t\t\tgetSelectedBlockStyleState,\n\t\t\t\tisSelectedBlockStyleStateShownOnCanvas,\n\t\t\t} = unlock( blockEditorSelect );\n\t\t\tconst editorSettings = blockEditorSelect.getSettings();\n\t\t\treturn {\n\t\t\t\tglobalBlockStyles:\n\t\t\t\t\teditorSettings?.[ globalStylesDataKey ]?.blocks?.[ name ],\n\t\t\t\tselectedState: getSelectedBlockStyleState( clientId ),\n\t\t\t\tshowStateOnCanvas:\n\t\t\t\t\tisSelectedBlockStyleStateShownOnCanvas( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId, name ]\n\t);\n\tconst isPseudoSelectorState = hasPseudoBlockStyleState( selectedState );\n\n\t// Inject state styles onto the editor canvas so the selected state is\n\t// visible while editing. Scoped to this block instance via data-block so\n\t// other blocks of the same type are not affected. Must be called before\n\t// any early returns because it is a hook.\n\tconst canvasStateCSS = useMemo( () => {\n\t\tif ( ! showStateOnCanvas || ! isPseudoSelectorState ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst globalStateValue = getCanvasStateStyleValue(\n\t\t\tglobalBlockStyles,\n\t\t\tselectedState\n\t\t);\n\t\tconst instanceStateValue = getCanvasStateStyleValue(\n\t\t\tstyle,\n\t\t\tselectedState\n\t\t);\n\t\tlet stateValue;\n\n\t\tif ( globalStateValue && instanceStateValue ) {\n\t\t\tstateValue = mergeGlobalStyles(\n\t\t\t\tglobalStateValue,\n\t\t\t\tinstanceStateValue\n\t\t\t);\n\t\t} else if ( instanceStateValue ) {\n\t\t\tstateValue = instanceStateValue;\n\t\t} else if ( globalStateValue ) {\n\t\t\tstateValue = globalStateValue;\n\t\t} else {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn getBlockStateStylesCSS( stateValue, {\n\t\t\tname,\n\t\t\tbaseSelector: `[data-block=\"${ clientId }\"]`,\n\t\t} );\n\t}, [\n\t\tshowStateOnCanvas,\n\t\tisPseudoSelectorState,\n\t\tglobalBlockStyles,\n\t\tstyle,\n\t\tselectedState,\n\t\tclientId,\n\t\tname,\n\t] );\n\tuseStyleOverride( { css: canvasStateCSS } );\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst panelSettings = {\n\t\t...settings,\n\t\ttypography: {\n\t\t\t...settings.typography,\n\t\t\t// The text alignment UI for individual blocks is rendered in\n\t\t\t// the block toolbar, so disable it here.\n\t\t\ttextAlign: false,\n\t\t},\n\t};\n\n\tconst passedProps = {\n\t\tclientId,\n\t\tname,\n\t\tsetAttributes,\n\t\tsettings: panelSettings,\n\t};\n\n\treturn (\n\t\t<BlockStyleStateProvider value={ selectedState }>\n\t\t\t<ElementsEdit { ...passedProps } />\n\t\t\t<BackgroundImagePanel { ...passedProps } />\n\t\t\t<TypographyPanel { ...passedProps } />\n\t\t\t<BorderPanel { ...passedProps } />\n\t\t\t<DimensionsPanel { ...passedProps } />\n\t\t</BlockStyleStateProvider>\n\t);\n}\n\nexport default {\n\tedit: BlockStyleControls,\n\thasSupport: hasStyleSupport,\n\taddSaveProps,\n\tattributeKeys: [ 'style' ],\n\tuseBlockProps,\n};\n\n// Defines which element types are supported, including their hover styles or\n// any other elements that have been included under a single element type\n// e.g. heading and h1-h6.\nconst elementTypes = [\n\t{ elementType: 'button' },\n\t{ elementType: 'link', pseudo: [ ':hover' ] },\n\t{\n\t\telementType: 'heading',\n\t\telements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],\n\t},\n];\n\n// Used for generating the instance ID\nconst STYLE_BLOCK_PROPS_REFERENCE = {};\n\n/**\n * Generates CSS rules for block element styles (buttons, links, headings, etc.).\n *\n * Iterates over supported element types and compiles their styles, including\n * pseudo-selectors (e.g. :hover) and related sub-elements (e.g. h1-h6 for headings),\n * into scoped CSS rule strings.\n *\n * @param {Object} blockElementStyles The block's `style.elements` object.\n * @param {string} blockName The block name, used for skip-serialization checks.\n * @param {string} baseSelector The base CSS selector to scope rules under.\n * @return {string|undefined} Concatenated CSS rules string, or undefined if none.\n */\nfunction getElementCSSRules( blockElementStyles, blockName, baseSelector ) {\n\tif ( ! blockElementStyles ) {\n\t\treturn;\n\t}\n\n\tconst rules = [];\n\n\telementTypes.forEach( ( { elementType, pseudo, elements } ) => {\n\t\tconst skipSerialization = shouldSkipSerialization(\n\t\t\tblockName,\n\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\telementType\n\t\t);\n\n\t\tif ( skipSerialization ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementStyles = blockElementStyles?.[ elementType ];\n\n\t\t// Process primary element type styles.\n\t\tif ( elementStyles ) {\n\t\t\tconst selector = scopeSelector(\n\t\t\t\tbaseSelector,\n\t\t\t\tELEMENTS[ elementType ]\n\t\t\t);\n\n\t\t\trules.push( compileCSS( elementStyles, { selector } ) );\n\n\t\t\t// Process any interactive states for the element type.\n\t\t\tif ( pseudo ) {\n\t\t\t\tpseudo.forEach( ( pseudoSelector ) => {\n\t\t\t\t\tif ( elementStyles[ pseudoSelector ] ) {\n\t\t\t\t\t\trules.push(\n\t\t\t\t\t\t\tcompileCSS( elementStyles[ pseudoSelector ], {\n\t\t\t\t\t\t\t\tselector: scopeSelector(\n\t\t\t\t\t\t\t\t\tbaseSelector,\n\t\t\t\t\t\t\t\t\t`${ ELEMENTS[ elementType ] }${ pseudoSelector }`\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\t// Process related elements e.g. h1-h6 for headings\n\t\tif ( elements ) {\n\t\t\telements.forEach( ( element ) => {\n\t\t\t\tif ( blockElementStyles[ element ] ) {\n\t\t\t\t\trules.push(\n\t\t\t\t\t\tcompileCSS( blockElementStyles[ element ], {\n\t\t\t\t\t\t\tselector: scopeSelector(\n\t\t\t\t\t\t\t\tbaseSelector,\n\t\t\t\t\t\t\t\tELEMENTS[ element ]\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\treturn rules.length > 0 ? rules.join( '' ) : undefined;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tconst blockElementsContainerIdentifier = useInstanceId(\n\t\tSTYLE_BLOCK_PROPS_REFERENCE,\n\t\t'wp-elements'\n\t);\n\n\tconst baseElementSelector = `.${ blockElementsContainerIdentifier }`;\n\tconst blockElementStyles = style?.elements;\n\n\tconst styles = useMemo( () => {\n\t\tconst cssRules = [];\n\n\t\tconst elementCSS = getElementCSSRules(\n\t\t\tblockElementStyles,\n\t\t\tname,\n\t\t\tbaseElementSelector\n\t\t);\n\t\tif ( elementCSS ) {\n\t\t\tcssRules.push( elementCSS );\n\t\t}\n\n\t\tcssRules.push(\n\t\t\t...getPseudoStateCSSRules( style, name, baseElementSelector )\n\t\t);\n\n\t\tcssRules.push(\n\t\t\t...getResponsiveStateCSSRules( style, name, baseElementSelector )\n\t\t);\n\n\t\treturn cssRules.length > 0 ? cssRules.join( '' ) : undefined;\n\t}, [ baseElementSelector, blockElementStyles, name, style ] );\n\n\tuseStyleOverride( { css: styles } );\n\n\treturn addSaveProps(\n\t\t{ className: blockElementsContainerIdentifier },\n\t\tname,\n\t\t{ style },\n\t\tskipSerializationPathsEdit\n\t);\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/style/addAttribute',\n\taddAttribute\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AACxB,mBAA0B;AAC1B,kBAA0B;AAC1B,kCAAkC;AAClC,oBAKO;AACP,qBAA8B;AAC9B,0BAAwC;AAKxC,wBAA6D;AAC7D,oBAAoE;AACpE,mBAAkC;AAClC,sBAA6B;AAC7B,wBAIO;AACP,wBAKO;AACP,mBAKO;AACP,+BAMO;AACP,oBAA0C;AAC1C,yBAAyC;AACzC,IAAAA,gBAA8B;AAC9B,gCAAoC;AACpC,mBAA0C;AAC1C,0BAAoC;AACpC,yBAAuB;AAgyBrB;AA9xBF,IAAM,eAAe,CAAE,OAAO,SAAS,UAAU,MAAO;AAIxD,IAAM,yBAAyB;AAAA,EAC9B,WAAW;AAAA,EACX,WAAW;AACZ;AAEA,IAAM,mBAAmB;AAAA,EACxB,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,IAAM,kBAAkB,CAAE,eACzB,iBAAiB,KAAM,CAAE,YAAS,+BAAiB,YAAY,GAAI,CAAE;AAS/D,SAAS,gBAAiB,SAAS,CAAC,GAAI;AAC9C,QAAM,SAAS,CAAC;AAGhB,uCAAa,MAAO,EAAE,QAAS,CAAE,SAAU;AAC1C,WAAQ,KAAK,GAAI,IAAI,KAAK;AAAA,EAC3B,CAAE;AAEF,SAAO;AACR;AAWA,SAAS,6BAA8B,aAAc;AACpD,QAAM,SAAS,aAAa;AAC5B,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,CAAC,CAAE,OAAO;AACjC,QAAM,iBAAiB,CAAC,CAAE,OAAO;AACjC,QAAM,iBAAiB,CAAC,CAAE,OAAO;AACjC,QAAM,iBAAiB,CAAC;AAExB,MAAK,CAAE,mBAAoB,kBAAkB,iBAAmB;AAC/D,mBAAe,QAAQ;AAAA,EACxB;AAEA,eAAa,QAAS,CAAE,SAAU;AACjC,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,aAAa,OAAQ,OAAQ;AACnC,UAAM,eAAe,CAAC,CAAE,YAAY;AACpC,UAAM,eAAe,CAAC,CAAE,YAAY;AACpC,UAAM,eAAe,CAAC,CAAE,YAAY;AAEpC,QACC,CAAE,kBACF,CAAE,iBACA,gBAAgB,eACjB;AACD,qBAAgB,OAAQ,IAAI,EAAE,OAAO,QAAQ;AAAA,IAC9C;AAAA,EACD,CAAE;AAEF,aAAO,+BAAkB,EAAE,YAAQ,+BAAkB,cAAe,EAAE,CAAE;AACzE;AAeA,SAAS,2BAA4B,aAAa,UAAW;AAC5D,QAAM,qBAAqB,CAAC,CAAE,aAAa,OAAO;AAElD,MAAK,CAAE,oBAAqB;AAC3B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAmB,CAAC,CAAE,aAAa,OAAO;AAChD,QAAM,wBACL,CAAC,CAAE,aAAa,YAAY,YAC5B,CAAC,CAAE,aAAa,YAAY;AAE7B,MAAK,oBAAoB,uBAAwB;AAChD,WAAO;AAAA,EACR;AAEA,QAAM,cAAc;AACpB,SAAO,WACJ,GAAI,QAAS,MAAO,WAAY,QAChC,GAAI,WAAY;AACpB;AASA,SAAS,gCAAiC,aAAc;AACvD,QAAM,aAAa,aAAa;AAChC,MAAK,CAAE,YAAa;AACnB,WAAO;AAAA,EACR;AAEA,UAAK,yCAAuB,WAAW,WAAY,GAAI;AACtD,WAAO;AAAA,MACN,YAAY;AAAA,QACX,WAAW;AAAA,QACX,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,MAAK,WAAW,aAAa,WAAW,QAAS;AAChD,WAAO;AAAA,MACN,YAAY;AAAA,QACX,aAAa;AAAA,MACd;AAAA,IACD;AAAA,EACD;AACD;AAaO,SAAS,kBAAmB,aAAa,UAAW;AAC1D,QAAM,0BACL,gCAAiC,WAAY;AAC9C,QAAM,+BAA+B,0BAClC,kBAAmB,aAAa,uBAAwB,IACxD;AACH,QAAM,UAAM,gCAAY,8BAA8B,EAAE,SAAS,CAAE;AACnE,QAAM,eAAe,MAAM,IAAI,QAAS,MAAM,cAAe,IAAI;AACjE,QAAM,uBAAuB,6BAA8B,WAAY;AACvE,QAAM,cAAc,2BACjB,gCAAY,sBAAsB,EAAE,SAAS,CAAE,IAC/C;AACH,QAAM,qBAAqB;AAAA,IAC1B;AAAA,IACA;AAAA,EACD;AAEA,SAAO,CAAE,cAAc,aAAa,kBAAmB,EACrD,OAAQ,OAAQ,EAChB,KAAM,IAAK;AACd;AAEA,SAAS,cAAe,OAAQ;AAC/B,SAAO,CAAC,CAAE,SAAS,OAAO,UAAU,YAAY,CAAE,MAAM,QAAS,KAAM;AACxE;AAEA,SAAS,kBAAmB,SAAS,CAAC,GAAG,SAAS,CAAC,GAAI;AACtD,QAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,SAAO,QAAS,MAAO,EAAE,QAAS,CAAE,CAAE,KAAK,KAAM,MAAO;AACvD,WAAQ,GAAI,IACX,cAAe,KAAM,KAAK,cAAe,OAAQ,GAAI,CAAE,IACpD,kBAAmB,OAAQ,GAAI,GAAG,KAAM,IACxC;AAAA,EACL,CAAE;AAEF,SAAO;AACR;AAEA,SAAS,cAAe,QAAQ,UAAU,OAAQ;AACjD,QAAM,MAAM,YAAY;AACxB,QAAM,WAAW,OAAO,IAAK,GAAI,KAAK,EAAE,UAAU,OAAO,CAAC,EAAE;AAE5D,SAAO,IAAK,KAAK;AAAA,IAChB;AAAA,IACA,OAAO,kBAAmB,SAAS,OAAO,KAAM;AAAA,EACjD,CAAE;AACH;AAEA,SAAS,oBAAqB,aAAa,MAAO;AACjD,QAAM,qBAAiB,4BAAc,IAAK,GAAG,aAAa,CAAC;AAC3D,QAAM,SAAS,oBAAI,IAAI;AAEvB,SAAO,QAAS,eAAe,CAAC,CAAE,EAAE;AAAA,IACnC,CAAE,CAAE,SAAS,aAAc,MAAO;AACjC,YAAM,mBAAmB,eAAgB,OAAQ;AAEjD,UAAK,OAAO,qBAAqB,UAAW;AAC3C,sBAAe,QAAQ,kBAAkB;AAAA,UACxC,CAAE,OAAQ,GAAG;AAAA,QACd,CAAE;AACF;AAAA,MACD;AAEA,UACC,cAAe,gBAAiB,KAChC,cAAe,aAAc,GAC5B;AACD,cAAM,kBAAkB,EAAE,GAAG,cAAc;AAE3C,eAAO,QAAS,gBAAiB,EAAE;AAAA,UAClC,CAAE,CAAE,YAAY,kBAAmB,MAAO;AACzC,gBACC,eAAe,UACf,OAAO,uBAAuB,YAC9B,CAAE,OAAO,OAAQ,eAAe,UAAW,GAC1C;AACD;AAAA,YACD;AAEA,0BAAe,QAAQ,oBAAoB;AAAA,cAC1C,CAAE,OAAQ,GAAG;AAAA,gBACZ,CAAE,UAAW,GAAG,cAAe,UAAW;AAAA,cAC3C;AAAA,YACD,CAAE;AACF,mBAAO,gBAAiB,UAAW;AAAA,UACpC;AAAA,QACD;AAEA,YAAK,OAAO,KAAM,eAAgB,EAAE,QAAS;AAC5C;AAAA,YACC;AAAA,YACA,iBAAiB,QAAQ,eAAe;AAAA,YACxC;AAAA,cACC,CAAE,OAAQ,GAAG;AAAA,YACd;AAAA,UACD;AAAA,QACD;AACA;AAAA,MACD;AAEA,oBAAe,QAAQ,eAAe,MAAM;AAAA,QAC3C,CAAE,OAAQ,GAAG;AAAA,MACd,CAAE;AAAA,IACH;AAAA,EACD;AAEA,SAAO,MAAM,KAAM,OAAO,OAAO,CAAE;AACpC;AAYO,SAAS,uBAAwB,aAAa,SAAU;AAC9D,QAAM,EAAE,MAAM,cAAc,QAAQ,GAAG,IAAI;AAC3C,QAAM,QAAQ,oBAAqB,aAAa,IAAK,EACnD;AAAA,IAAK,CAAE,EAAE,UAAU,eAAe,MAAM,MACxC;AAAA,MACC;AAAA,UACA,6CAA0B,cAAc,eAAe,KAAM;AAAA,IAC9D;AAAA,EACD,EACC,OAAQ,OAAQ;AAElB,SAAO,MAAM,SAAS,MAAM,KAAM,IAAK,IAAI;AAC5C;AAaA,SAAS,mBAAoB,aAAa,YAAa;AACtD,MAAK,CAAE,aAAc;AACpB,WAAO;AAAA,EACR;AAEA,QAAM,aAAa,EAAE,GAAG,YAAY;AACpC,aAAW,QAAS,CAAE,QAAS;AAC9B,WAAO,WAAY,GAAI;AAAA,EACxB,CAAE;AACF,SAAO;AACR;AAUA,SAAS,uBAAwB,OAAO,MAAM,cAAe;AAC5D,QAAM,oBAAoB,wCAA2B,IAAK;AAC1D,MAAK,CAAE,mBAAoB;AAC1B,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAW,CAAC;AAClB,oBAAkB,QAAS,CAAE,gBAAiB;AAC7C,UAAM,cAAc,QAAS,WAAY;AACzC,QAAK,aAAc;AAClB,YAAM,MAAM,uBAAwB,aAAa;AAAA,QAChD;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MACR,CAAE;AACF,UAAK,KAAM;AACV,iBAAS,KAAM,GAAI;AAAA,MACpB;AAAA,IACD;AAAA,EACD,CAAE;AACF,SAAO;AACR;AAcO,SAAS,2BAA4B,OAAO,MAAM,cAAe;AACvE,QAAM,WAAW,CAAC;AAClB,QAAM,oBAAoB,wCAA2B,IAAK,KAAK,CAAC;AAChE,QAAM,kBAAkB,CAAE,YAAY,GAAG,iBAAkB;AAE3D,SAAO,QAAS,sBAAuB,EAAE;AAAA,IACxC,CAAE,CAAE,UAAU,UAAW,MAAO;AAC/B,YAAM,qBAAiB,2CAAkB,OAAO;AAAA,QAC/C;AAAA,QACA,QAAQ,mDAA0B;AAAA,MACnC,CAAE;AACF,UAAK,CAAE,gBAAiB;AACvB;AAAA,MACD;AAEA,YAAM,mBAAmB,CAAC;AAC1B,YAAM,UAAU;AAAA,QACf,mBAAoB,gBAAgB,eAAgB;AAAA,QACpD;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AACA,UAAK,SAAU;AACd,yBAAiB,KAAM,OAAQ;AAAA,MAChC;AAEA,YAAM,aAAa;AAAA,QAClB,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACD;AACA,UAAK,YAAa;AACjB,yBAAiB,KAAM,UAAW;AAAA,MACnC;AAEA,uBAAiB;AAAA,QAChB,GAAG,uBAAwB,gBAAgB,MAAM,YAAa;AAAA,MAC/D;AAEA,UAAK,iBAAiB,QAAS;AAC9B,iBAAS;AAAA,UACR,GAAI,UAAW,IAAK,iBAAiB,KAAM,EAAG,CAAE;AAAA,QACjD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAaO,SAAS,yBAA0B,OAAO,eAAgB;AAChE,QAAM,iBAAa,2CAAkB,OAAO,aAAc;AAC1D,MAAK,KAAE,qDAA4B,aAAc,GAAI;AACpD,WAAO;AAAA,EACR;AAEA,QAAM,uBAAuB;AAAA,IAC5B,GAAG;AAAA,IACH,UAAU,mDAA0B;AAAA,EACrC;AACA,QAAM,gCAA4B;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,MAAK,6BAA6B,YAAa;AAC9C,eAAO,+CAAmB,2BAA2B,UAAW;AAAA,EACjE;AACA,SAAO,cAAc;AACtB;AASA,SAAS,aAAc,UAAW;AACjC,MACC,CAAE,gBAAiB,QAAS,KAC5B,KAAE,+BAAiB,UAAU,aAAa,IAAK,GAC9C;AACD,WAAO;AAAA,EACR;AAGA,MAAK,CAAE,SAAS,WAAW,OAAQ;AAClC,WAAO,OAAQ,SAAS,YAAY;AAAA,MACnC,OAAO;AAAA,QACN,MAAM;AAAA,MACP;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AASA,IAAM,6BAA6B;AAAA,EAClC,CAAE,GAAI,gCAAmB,kCAAmC,GAAG,CAAE,QAAS;AAAA,EAC1E,CAAE,GAAI,8BAAkB,kCAAmC,GAAG;AAAA,IAC7D;AAAA,EACD;AAAA,EACA,CAAE,GAAI,wCAAuB,kCAAmC,GAAG;AAAA,IAClE;AAAA,EACD;AAAA,EACA,CAAE,GAAI,wCAAuB,kCAAmC,GAAG;AAAA,IAClE;AAAA,EACD;AAAA,EACA,CAAE,GAAI,qCAAoB,kCAAmC,GAAG;AAAA,IAC/D;AAAA,EACD;AAAA,EACA,CAAE,GAAI,gCAAmB,kCAAmC,GAAG;AAAA,IAC9D;AAAA,EACD;AACD;AAcA,IAAM,6BAA6B;AAAA,EAClC,GAAG;AAAA,EACH,CAAE,GAAI,wCAAuB,cAAe,GAAG;AAAA,IAC9C,GAAI,wCAAuB;AAAA,EAC5B;AAAA;AAAA,EACA,CAAE,GAAI,wCAAuB,EAAG,GAAG,CAAE,wCAAuB;AAAA;AAC7D;AAEA,IAAM,mCAAmC;AAAA,EACxC,CAAE,GAAI,wCAAuB,cAAe,GAAG;AAAA,EAC/C,CAAE,GAAI,wCAAuB,EAAG,GAAG;AACpC;AAaA,IAAM,kBAAkB,EAAE,WAAW,WAAW;AA4FzC,SAAS,UAAW,OAAO,OAAO,oBAAoB,OAAQ;AACpE,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,MAAI,WAAW;AACf,MAAK,CAAE,mBAAoB;AAC1B,eAAW,KAAK,MAAO,KAAK,UAAW,KAAM,CAAE;AAAA,EAChD;AAEA,MAAK,CAAE,MAAM,QAAS,KAAM,GAAI;AAC/B,YAAQ,CAAE,KAAM;AAAA,EACjB;AAEA,QAAM,QAAS,CAAE,SAAU;AAC1B,QAAK,CAAE,MAAM,QAAS,IAAK,GAAI;AAC9B,aAAO,KAAK,MAAO,GAAI;AAAA,IACxB;AAEA,QAAK,KAAK,SAAS,GAAI;AACtB,YAAM,CAAE,cAAc,GAAG,QAAS,IAAI;AACtC,gBAAW,SAAU,YAAa,GAAG,CAAE,QAAS,GAAG,IAAK;AAAA,IACzD,WAAY,KAAK,WAAW,GAAI;AAC/B,aAAO,SAAU,KAAM,CAAE,CAAE;AAAA,IAC5B;AAAA,EACD,CAAE;AAEF,SAAO;AACR;AAYO,SAAS,aACf,OACA,iBACA,YACA,YAAY,4BACX;AACD,MAAK,CAAE,gBAAiB,eAAgB,GAAI;AAC3C,WAAO;AAAA,EACR;AAEA,MAAI,EAAE,MAAM,IAAI;AAChB,SAAO,QAAS,SAAU,EAAE,QAAS,CAAE,CAAE,WAAW,IAAK,MAAO;AAC/D,UAAM,oBACL,iCAAkC,SAAU,SAC5C,+BAAiB,iBAAiB,SAAU;AAE7C,QAAK,sBAAsB,MAAO;AACjC,cAAQ,UAAW,OAAO,IAAK;AAAA,IAChC;AAEA,QAAK,MAAM,QAAS,iBAAkB,GAAI;AACzC,wBAAkB,QAAS,CAAE,gBAAiB;AAC7C,cAAM,UAAU,gBAAiB,WAAY,KAAK;AAClD,gBAAQ,UAAW,OAAO,CAAE,CAAE,GAAG,MAAM,OAAQ,CAAE,CAAE;AAAA,MACpD,CAAE;AAAA,IACH;AAAA,EACD,CAAE;AAEF,QAAM,QAAQ;AAAA,IACb,GAAG,gBAAiB,KAAM;AAAA,IAC1B,GAAG,MAAM;AAAA,EACV;AAEA,SAAO;AACR;AAEA,SAAS,mBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,eAAW,+BAAkB,MAAM,sBAAuB;AAChE,QAAM,uBAAmB,+CAAoB;AAC7C,QAAM,EAAE,mBAAmB,eAAe,kBAAkB,QAAI;AAAA,IAC/D,CAAE,WAAY;AACb,YAAM,oBAAoB,OAAQ,aAAAC,KAAiB;AACnD,YAAM;AAAA,QACL;AAAA,QACA;AAAA,MACD,QAAI,2BAAQ,iBAAkB;AAC9B,YAAM,iBAAiB,kBAAkB,YAAY;AACrD,aAAO;AAAA,QACN,mBACC,iBAAkB,uCAAoB,GAAG,SAAU,IAAK;AAAA,QACzD,eAAe,2BAA4B,QAAS;AAAA,QACpD,mBACC,uCAAwC,QAAS;AAAA,MACnD;AAAA,IACD;AAAA,IACA,CAAE,UAAU,IAAK;AAAA,EAClB;AACA,QAAM,4BAAwB,mDAA0B,aAAc;AAMtE,QAAM,qBAAiB,wBAAS,MAAM;AACrC,QAAK,CAAE,qBAAqB,CAAE,uBAAwB;AACrD,aAAO;AAAA,IACR;AAEA,UAAM,mBAAmB;AAAA,MACxB;AAAA,MACA;AAAA,IACD;AACA,UAAM,qBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD;AACA,QAAI;AAEJ,QAAK,oBAAoB,oBAAqB;AAC7C,uBAAa;AAAA,QACZ;AAAA,QACA;AAAA,MACD;AAAA,IACD,WAAY,oBAAqB;AAChC,mBAAa;AAAA,IACd,WAAY,kBAAmB;AAC9B,mBAAa;AAAA,IACd,OAAO;AACN,aAAO;AAAA,IACR;AAEA,WAAO,uBAAwB,YAAY;AAAA,MAC1C;AAAA,MACA,cAAc,gBAAiB,QAAS;AAAA,IACzC,CAAE;AAAA,EACH,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,qCAAkB,EAAE,KAAK,eAAe,CAAE;AAE1C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB;AAAA,IACrB,GAAG;AAAA,IACH,YAAY;AAAA,MACX,GAAG,SAAS;AAAA;AAAA;AAAA,MAGZ,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX;AAEA,SACC,6CAAC,oDAAwB,OAAQ,eAChC;AAAA,gDAAC,gCAAe,GAAG,aAAc;AAAA,IACjC,4CAAC,0CAAuB,GAAG,aAAc;AAAA,IACzC,4CAAC,qCAAkB,GAAG,aAAc;AAAA,IACpC,4CAAC,6BAAc,GAAG,aAAc;AAAA,IAChC,4CAAC,qCAAkB,GAAG,aAAc;AAAA,KACrC;AAEF;AAEA,IAAO,gBAAQ;AAAA,EACd,MAAM;AAAA,EACN,YAAY;AAAA,EACZ;AAAA,EACA,eAAe,CAAE,OAAQ;AAAA,EACzB;AACD;AAKA,IAAM,eAAe;AAAA,EACpB,EAAE,aAAa,SAAS;AAAA,EACxB,EAAE,aAAa,QAAQ,QAAQ,CAAE,QAAS,EAAE;AAAA,EAC5C;AAAA,IACC,aAAa;AAAA,IACb,UAAU,CAAE,MAAM,MAAM,MAAM,MAAM,MAAM,IAAK;AAAA,EAChD;AACD;AAGA,IAAM,8BAA8B,CAAC;AAcrC,SAAS,mBAAoB,oBAAoB,WAAW,cAAe;AAC1E,MAAK,CAAE,oBAAqB;AAC3B;AAAA,EACD;AAEA,QAAM,QAAQ,CAAC;AAEf,eAAa,QAAS,CAAE,EAAE,aAAa,QAAQ,SAAS,MAAO;AAC9D,UAAM,wBAAoB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,QAAK,mBAAoB;AACxB;AAAA,IACD;AAEA,UAAM,gBAAgB,qBAAsB,WAAY;AAGxD,QAAK,eAAgB;AACpB,YAAM,eAAW;AAAA,QAChB;AAAA,QACA,cAAAC,wBAAU,WAAY;AAAA,MACvB;AAEA,YAAM,SAAM,gCAAY,eAAe,EAAE,SAAS,CAAE,CAAE;AAGtD,UAAK,QAAS;AACb,eAAO,QAAS,CAAE,mBAAoB;AACrC,cAAK,cAAe,cAAe,GAAI;AACtC,kBAAM;AAAA,kBACL,gCAAY,cAAe,cAAe,GAAG;AAAA,gBAC5C,cAAU;AAAA,kBACT;AAAA,kBACA,GAAI,cAAAA,wBAAU,WAAY,CAAE,GAAI,cAAe;AAAA,gBAChD;AAAA,cACD,CAAE;AAAA,YACH;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD;AAGA,QAAK,UAAW;AACf,eAAS,QAAS,CAAE,YAAa;AAChC,YAAK,mBAAoB,OAAQ,GAAI;AACpC,gBAAM;AAAA,gBACL,gCAAY,mBAAoB,OAAQ,GAAG;AAAA,cAC1C,cAAU;AAAA,gBACT;AAAA,gBACA,cAAAA,wBAAU,OAAQ;AAAA,cACnB;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD,CAAE;AAEF,SAAO,MAAM,SAAS,IAAI,MAAM,KAAM,EAAG,IAAI;AAC9C;AAEA,SAAS,cAAe,EAAE,MAAM,MAAM,GAAI;AACzC,QAAM,uCAAmC;AAAA,IACxC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,sBAAsB,IAAK,gCAAiC;AAClE,QAAM,qBAAqB,OAAO;AAElC,QAAM,aAAS,wBAAS,MAAM;AAC7B,UAAM,WAAW,CAAC;AAElB,UAAM,aAAa;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,QAAK,YAAa;AACjB,eAAS,KAAM,UAAW;AAAA,IAC3B;AAEA,aAAS;AAAA,MACR,GAAG,uBAAwB,OAAO,MAAM,mBAAoB;AAAA,IAC7D;AAEA,aAAS;AAAA,MACR,GAAG,2BAA4B,OAAO,MAAM,mBAAoB;AAAA,IACjE;AAEA,WAAO,SAAS,SAAS,IAAI,SAAS,KAAM,EAAG,IAAI;AAAA,EACpD,GAAG,CAAE,qBAAqB,oBAAoB,MAAM,KAAM,CAAE;AAE5D,qCAAkB,EAAE,KAAK,OAAO,CAAE;AAElC,SAAO;AAAA,IACN,EAAE,WAAW,iCAAiC;AAAA,IAC9C;AAAA,IACA,EAAE,MAAM;AAAA,IACR;AAAA,EACD;AACD;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": ["import_utils", "blockEditorStore", "ELEMENTS"]
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ module.exports = __toCommonJS(typography_exports);
|
|
|
39
39
|
var import_blocks = require("@wordpress/blocks");
|
|
40
40
|
var import_element = require("@wordpress/element");
|
|
41
41
|
var import_data = require("@wordpress/data");
|
|
42
|
+
var import_i18n = require("@wordpress/i18n");
|
|
42
43
|
var import_inspector_controls = __toESM(require("../components/inspector-controls/index.cjs"));
|
|
43
44
|
var import_typography_panel = __toESM(require("../components/global-styles/typography-panel.cjs"));
|
|
44
45
|
var import_line_height = require("./line-height.cjs");
|
|
@@ -47,8 +48,10 @@ var import_font_size = require("./font-size.cjs");
|
|
|
47
48
|
var import_text_align = require("./text-align.cjs");
|
|
48
49
|
var import_fit_text = require("./fit-text.cjs");
|
|
49
50
|
var import_utils = require("./utils.cjs");
|
|
51
|
+
var import_color_values = require("../utils/color-values.cjs");
|
|
50
52
|
var import_store = require("../store/index.cjs");
|
|
51
53
|
var import_block_style_state = require("./block-style-state.cjs");
|
|
54
|
+
var import_contrast_checker = __toESM(require("./contrast-checker.cjs"));
|
|
52
55
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
53
56
|
function omit(object, keys) {
|
|
54
57
|
return Object.fromEntries(
|
|
@@ -83,18 +86,25 @@ function styleToAttributes(style) {
|
|
|
83
86
|
const updatedStyle = { ...omit(style, ["fontFamily"]) };
|
|
84
87
|
const fontSizeValue = style?.typography?.fontSize;
|
|
85
88
|
const fontFamilyValue = style?.typography?.fontFamily;
|
|
89
|
+
const textColorValue = style?.color?.text;
|
|
86
90
|
const fontSizeSlug = typeof fontSizeValue === "string" && fontSizeValue?.startsWith("var:preset|font-size|") ? fontSizeValue.substring("var:preset|font-size|".length) : void 0;
|
|
87
91
|
const fontFamilySlug = fontFamilyValue?.startsWith(
|
|
88
92
|
"var:preset|font-family|"
|
|
89
93
|
) ? fontFamilyValue.substring("var:preset|font-family|".length) : void 0;
|
|
94
|
+
const textColorSlug = (0, import_color_values.extractPresetSlug)(textColorValue, "color");
|
|
90
95
|
updatedStyle.typography = {
|
|
91
96
|
...omit(updatedStyle.typography, ["fontFamily"]),
|
|
92
97
|
fontSize: fontSizeSlug ? void 0 : fontSizeValue
|
|
93
98
|
};
|
|
99
|
+
updatedStyle.color = {
|
|
100
|
+
...updatedStyle.color,
|
|
101
|
+
text: textColorSlug ? void 0 : textColorValue
|
|
102
|
+
};
|
|
94
103
|
return {
|
|
95
104
|
style: (0, import_utils.cleanEmptyObject)(updatedStyle),
|
|
96
105
|
fontFamily: fontFamilySlug,
|
|
97
|
-
fontSize: fontSizeSlug
|
|
106
|
+
fontSize: fontSizeSlug,
|
|
107
|
+
textColor: textColorSlug
|
|
98
108
|
};
|
|
99
109
|
}
|
|
100
110
|
function attributesToStyle(attributes) {
|
|
@@ -104,6 +114,10 @@ function attributesToStyle(attributes) {
|
|
|
104
114
|
...attributes.style?.typography,
|
|
105
115
|
fontFamily: attributes.fontFamily ? "var:preset|font-family|" + attributes.fontFamily : void 0,
|
|
106
116
|
fontSize: attributes.fontSize ? "var:preset|font-size|" + attributes.fontSize : attributes.style?.typography?.fontSize
|
|
117
|
+
},
|
|
118
|
+
color: {
|
|
119
|
+
...attributes.style?.color,
|
|
120
|
+
text: attributes.textColor ? "var:preset|color|" + attributes.textColor : attributes.style?.color?.text
|
|
107
121
|
}
|
|
108
122
|
};
|
|
109
123
|
}
|
|
@@ -128,10 +142,19 @@ function TypographyInspectorControl({ children, resetAllFilter }) {
|
|
|
128
142
|
}
|
|
129
143
|
);
|
|
130
144
|
}
|
|
131
|
-
function TypographyPanel({
|
|
145
|
+
function TypographyPanel({
|
|
146
|
+
clientId,
|
|
147
|
+
name,
|
|
148
|
+
setAttributes,
|
|
149
|
+
settings,
|
|
150
|
+
// Allows rendering outside the `typography` inspector group (e.g. section
|
|
151
|
+
// blocks direct-render this panel because their support fills are gated
|
|
152
|
+
// off by editing mode). Defaults to the slot-based wrapper.
|
|
153
|
+
asWrapper
|
|
154
|
+
}) {
|
|
132
155
|
const selectedState = (0, import_block_style_state.useBlockStyleState)();
|
|
133
156
|
const isEnabled = (0, import_typography_panel.useHasTypographyPanel)(settings);
|
|
134
|
-
const { style, fontFamily, fontSize, fitText } = (0, import_data.useSelect)(
|
|
157
|
+
const { style, fontFamily, fontSize, fitText, textColor } = (0, import_data.useSelect)(
|
|
135
158
|
(select) => {
|
|
136
159
|
if (!isEnabled) {
|
|
137
160
|
return {};
|
|
@@ -140,13 +163,15 @@ function TypographyPanel({ clientId, name, setAttributes, settings }) {
|
|
|
140
163
|
style: _style,
|
|
141
164
|
fontFamily: _fontFamily,
|
|
142
165
|
fontSize: _fontSize,
|
|
143
|
-
fitText: _fitText
|
|
166
|
+
fitText: _fitText,
|
|
167
|
+
textColor: _textColor
|
|
144
168
|
} = select(import_store.store).getBlockAttributes(clientId) || {};
|
|
145
169
|
return {
|
|
146
170
|
style: _style,
|
|
147
171
|
fontFamily: _fontFamily,
|
|
148
172
|
fontSize: _fontSize,
|
|
149
|
-
fitText: _fitText
|
|
173
|
+
fitText: _fitText,
|
|
174
|
+
textColor: _textColor
|
|
150
175
|
};
|
|
151
176
|
},
|
|
152
177
|
[clientId, isEnabled]
|
|
@@ -156,8 +181,15 @@ function TypographyPanel({ clientId, name, setAttributes, settings }) {
|
|
|
156
181
|
if (isStateSelected) {
|
|
157
182
|
return (0, import_block_style_state.getStyleForState)(style, selectedState);
|
|
158
183
|
}
|
|
159
|
-
return attributesToStyle({ style, fontFamily, fontSize });
|
|
160
|
-
}, [
|
|
184
|
+
return attributesToStyle({ style, fontFamily, fontSize, textColor });
|
|
185
|
+
}, [
|
|
186
|
+
isStateSelected,
|
|
187
|
+
selectedState,
|
|
188
|
+
style,
|
|
189
|
+
fontSize,
|
|
190
|
+
fontFamily,
|
|
191
|
+
textColor
|
|
192
|
+
]);
|
|
161
193
|
const onChange = isStateSelected ? (newStyle) => {
|
|
162
194
|
setAttributes({
|
|
163
195
|
style: (0, import_block_style_state.setStyleForState)(style, selectedState, newStyle)
|
|
@@ -170,22 +202,42 @@ function TypographyPanel({ clientId, name, setAttributes, settings }) {
|
|
|
170
202
|
}
|
|
171
203
|
setAttributes(newAttributes);
|
|
172
204
|
};
|
|
205
|
+
const enableContrastChecking = !isStateSelected && !value?.color?.gradient && !!value?.color?.text && settings?.color?.text && false !== (0, import_blocks.getBlockSupport)(name, ["color", "enableContrastChecker"]);
|
|
206
|
+
const contrastWarning = (0, import_contrast_checker.default)({
|
|
207
|
+
clientId,
|
|
208
|
+
name,
|
|
209
|
+
enabled: !!enableContrastChecking,
|
|
210
|
+
checkLinkColor: false,
|
|
211
|
+
messageOverride: (0, import_i18n.__)(
|
|
212
|
+
"This color has poor contrast against the background. Consider increasing contrast."
|
|
213
|
+
)
|
|
214
|
+
});
|
|
173
215
|
if (!isEnabled) {
|
|
174
216
|
return null;
|
|
175
217
|
}
|
|
176
|
-
const
|
|
218
|
+
const typographyDefaultControls = (0, import_blocks.getBlockSupport)(name, [
|
|
177
219
|
TYPOGRAPHY_SUPPORT_KEY,
|
|
178
220
|
"__experimentalDefaultControls"
|
|
179
221
|
]);
|
|
222
|
+
const colorDefaultControls = (0, import_blocks.getBlockSupport)(name, [
|
|
223
|
+
"color",
|
|
224
|
+
"__experimentalDefaultControls"
|
|
225
|
+
]);
|
|
226
|
+
const defaultControls = {
|
|
227
|
+
...typographyDefaultControls,
|
|
228
|
+
textColor: colorDefaultControls?.text
|
|
229
|
+
};
|
|
230
|
+
const Wrapper = asWrapper || TypographyInspectorControl;
|
|
180
231
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
181
232
|
import_typography_panel.default,
|
|
182
233
|
{
|
|
183
|
-
as:
|
|
234
|
+
as: Wrapper,
|
|
184
235
|
panelId: clientId,
|
|
185
236
|
settings,
|
|
186
237
|
value,
|
|
187
238
|
onChange,
|
|
188
|
-
defaultControls
|
|
239
|
+
defaultControls,
|
|
240
|
+
contrastWarning
|
|
189
241
|
}
|
|
190
242
|
);
|
|
191
243
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/typography.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tdefault as StylesTypographyPanel,\n\tuseHasTypographyPanel,\n} from '../components/global-styles/typography-panel';\n\nimport { LINE_HEIGHT_SUPPORT_KEY } from './line-height';\nimport { FONT_FAMILY_SUPPORT_KEY } from './font-family';\nimport { FONT_SIZE_SUPPORT_KEY } from './font-size';\nimport { TEXT_ALIGN_SUPPORT_KEY } from './text-align';\nimport { FIT_TEXT_SUPPORT_KEY } from './fit-text';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\n\nfunction omit( object, keys ) {\n\treturn Object.fromEntries(\n\t\tObject.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )\n\t);\n}\n\nconst LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';\nconst TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';\nconst TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';\nconst TEXT_INDENT_SUPPORT_KEY = 'typography.textIndent';\nconst TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';\nconst FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';\nconst FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';\nconst WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';\nexport const TYPOGRAPHY_SUPPORT_KEY = 'typography';\nexport const TYPOGRAPHY_SUPPORT_KEYS = [\n\tLINE_HEIGHT_SUPPORT_KEY,\n\tFONT_SIZE_SUPPORT_KEY,\n\tFONT_STYLE_SUPPORT_KEY,\n\tFONT_WEIGHT_SUPPORT_KEY,\n\tFONT_FAMILY_SUPPORT_KEY,\n\tTEXT_ALIGN_SUPPORT_KEY,\n\tTEXT_COLUMNS_SUPPORT_KEY,\n\tTEXT_DECORATION_SUPPORT_KEY,\n\tTEXT_INDENT_SUPPORT_KEY,\n\tWRITING_MODE_SUPPORT_KEY,\n\tTEXT_TRANSFORM_SUPPORT_KEY,\n\tLETTER_SPACING_SUPPORT_KEY,\n\tFIT_TEXT_SUPPORT_KEY,\n];\n\nfunction styleToAttributes( style ) {\n\tconst updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };\n\tconst fontSizeValue = style?.typography?.fontSize;\n\tconst fontFamilyValue = style?.typography?.fontFamily;\n\tconst fontSizeSlug =\n\t\ttypeof fontSizeValue === 'string' &&\n\t\tfontSizeValue?.startsWith( 'var:preset|font-size|' )\n\t\t\t? fontSizeValue.substring( 'var:preset|font-size|'.length )\n\t\t\t: undefined;\n\tconst fontFamilySlug = fontFamilyValue?.startsWith(\n\t\t'var:preset|font-family|'\n\t)\n\t\t? fontFamilyValue.substring( 'var:preset|font-family|'.length )\n\t\t: undefined;\n\tupdatedStyle.typography = {\n\t\t...omit( updatedStyle.typography, [ 'fontFamily' ] ),\n\t\tfontSize: fontSizeSlug ? undefined : fontSizeValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\tfontFamily: fontFamilySlug,\n\t\tfontSize: fontSizeSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\treturn {\n\t\t...attributes.style,\n\t\ttypography: {\n\t\t\t...attributes.style?.typography,\n\t\t\tfontFamily: attributes.fontFamily\n\t\t\t\t? 'var:preset|font-family|' + attributes.fontFamily\n\t\t\t\t: undefined,\n\t\t\tfontSize: attributes.fontSize\n\t\t\t\t? 'var:preset|font-size|' + attributes.fontSize\n\t\t\t\t: attributes.style?.typography?.fontSize,\n\t\t},\n\t};\n}\n\nfunction TypographyInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"typography\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function TypographyPanel( {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAiD;AACjD,qBAAqC;AACrC,kBAA0B;
|
|
6
|
-
"names": ["InspectorControls", "blockEditorStore", "StylesTypographyPanel"]
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tdefault as StylesTypographyPanel,\n\tuseHasTypographyPanel,\n} from '../components/global-styles/typography-panel';\n\nimport { LINE_HEIGHT_SUPPORT_KEY } from './line-height';\nimport { FONT_FAMILY_SUPPORT_KEY } from './font-family';\nimport { FONT_SIZE_SUPPORT_KEY } from './font-size';\nimport { TEXT_ALIGN_SUPPORT_KEY } from './text-align';\nimport { FIT_TEXT_SUPPORT_KEY } from './fit-text';\nimport { cleanEmptyObject } from './utils';\nimport { extractPresetSlug } from '../utils/color-values';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\nimport useBlockColorContrastWarning from './contrast-checker';\n\nfunction omit( object, keys ) {\n\treturn Object.fromEntries(\n\t\tObject.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )\n\t);\n}\n\nconst LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';\nconst TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';\nconst TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';\nconst TEXT_INDENT_SUPPORT_KEY = 'typography.textIndent';\nconst TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';\nconst FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';\nconst FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';\nconst WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';\nexport const TYPOGRAPHY_SUPPORT_KEY = 'typography';\nexport const TYPOGRAPHY_SUPPORT_KEYS = [\n\tLINE_HEIGHT_SUPPORT_KEY,\n\tFONT_SIZE_SUPPORT_KEY,\n\tFONT_STYLE_SUPPORT_KEY,\n\tFONT_WEIGHT_SUPPORT_KEY,\n\tFONT_FAMILY_SUPPORT_KEY,\n\tTEXT_ALIGN_SUPPORT_KEY,\n\tTEXT_COLUMNS_SUPPORT_KEY,\n\tTEXT_DECORATION_SUPPORT_KEY,\n\tTEXT_INDENT_SUPPORT_KEY,\n\tWRITING_MODE_SUPPORT_KEY,\n\tTEXT_TRANSFORM_SUPPORT_KEY,\n\tLETTER_SPACING_SUPPORT_KEY,\n\tFIT_TEXT_SUPPORT_KEY,\n];\n\nfunction styleToAttributes( style ) {\n\tconst updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };\n\tconst fontSizeValue = style?.typography?.fontSize;\n\tconst fontFamilyValue = style?.typography?.fontFamily;\n\tconst textColorValue = style?.color?.text;\n\tconst fontSizeSlug =\n\t\ttypeof fontSizeValue === 'string' &&\n\t\tfontSizeValue?.startsWith( 'var:preset|font-size|' )\n\t\t\t? fontSizeValue.substring( 'var:preset|font-size|'.length )\n\t\t\t: undefined;\n\tconst fontFamilySlug = fontFamilyValue?.startsWith(\n\t\t'var:preset|font-family|'\n\t)\n\t\t? fontFamilyValue.substring( 'var:preset|font-family|'.length )\n\t\t: undefined;\n\tconst textColorSlug = extractPresetSlug( textColorValue, 'color' );\n\tupdatedStyle.typography = {\n\t\t...omit( updatedStyle.typography, [ 'fontFamily' ] ),\n\t\tfontSize: fontSizeSlug ? undefined : fontSizeValue,\n\t};\n\tupdatedStyle.color = {\n\t\t...updatedStyle.color,\n\t\ttext: textColorSlug ? undefined : textColorValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\tfontFamily: fontFamilySlug,\n\t\tfontSize: fontSizeSlug,\n\t\ttextColor: textColorSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\treturn {\n\t\t...attributes.style,\n\t\ttypography: {\n\t\t\t...attributes.style?.typography,\n\t\t\tfontFamily: attributes.fontFamily\n\t\t\t\t? 'var:preset|font-family|' + attributes.fontFamily\n\t\t\t\t: undefined,\n\t\t\tfontSize: attributes.fontSize\n\t\t\t\t? 'var:preset|font-size|' + attributes.fontSize\n\t\t\t\t: attributes.style?.typography?.fontSize,\n\t\t},\n\t\tcolor: {\n\t\t\t...attributes.style?.color,\n\t\t\ttext: attributes.textColor\n\t\t\t\t? 'var:preset|color|' + attributes.textColor\n\t\t\t\t: attributes.style?.color?.text,\n\t\t},\n\t};\n}\n\nfunction TypographyInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"typography\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function TypographyPanel( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n\t// Allows rendering outside the `typography` inspector group (e.g. section\n\t// blocks direct-render this panel because their support fills are gated\n\t// off by editing mode). Defaults to the slot-based wrapper.\n\tasWrapper,\n} ) {\n\tconst selectedState = useBlockStyleState();\n\tconst isEnabled = useHasTypographyPanel( settings );\n\n\tconst { style, fontFamily, fontSize, fitText, textColor } = useSelect(\n\t\t( select ) => {\n\t\t\t// Early return to avoid subscription when disabled.\n\t\t\tif ( ! isEnabled ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tstyle: _style,\n\t\t\t\tfontFamily: _fontFamily,\n\t\t\t\tfontSize: _fontSize,\n\t\t\t\tfitText: _fitText,\n\t\t\t\ttextColor: _textColor,\n\t\t\t} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\t\treturn {\n\t\t\t\tstyle: _style,\n\t\t\t\tfontFamily: _fontFamily,\n\t\t\t\tfontSize: _fontSize,\n\t\t\t\tfitText: _fitText,\n\t\t\t\ttextColor: _textColor,\n\t\t\t};\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\n\tconst isStateSelected = ! isDefaultBlockStyleState( selectedState );\n\n\tconst value = useMemo( () => {\n\t\tif ( isStateSelected ) {\n\t\t\treturn getStyleForState( style, selectedState );\n\t\t}\n\t\treturn attributesToStyle( { style, fontFamily, fontSize, textColor } );\n\t}, [\n\t\tisStateSelected,\n\t\tselectedState,\n\t\tstyle,\n\t\tfontSize,\n\t\tfontFamily,\n\t\ttextColor,\n\t] );\n\n\tconst onChange = isStateSelected\n\t\t? ( newStyle ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tstyle: setStyleForState( style, selectedState, newStyle ),\n\t\t\t\t} );\n\t\t }\n\t\t: ( newStyle ) => {\n\t\t\t\tconst newAttributes = styleToAttributes( newStyle );\n\n\t\t\t\t// If setting a font size and fitText is currently enabled, disable it.\n\t\t\t\tconst hasFontSize =\n\t\t\t\t\tnewAttributes.fontSize ||\n\t\t\t\t\tnewAttributes.style?.typography?.fontSize;\n\t\t\t\tif ( hasFontSize && fitText ) {\n\t\t\t\t\tnewAttributes.fitText = undefined;\n\t\t\t\t}\n\n\t\t\t\tsetAttributes( newAttributes );\n\t\t };\n\n\t// Link color failures are reported by the Elements panel, which owns the\n\t// link color selection.\n\tconst enableContrastChecking =\n\t\t! isStateSelected &&\n\t\t! value?.color?.gradient &&\n\t\t!! value?.color?.text &&\n\t\tsettings?.color?.text &&\n\t\tfalse !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );\n\n\tconst contrastWarning = useBlockColorContrastWarning( {\n\t\tclientId,\n\t\tname,\n\t\tenabled: !! enableContrastChecking,\n\t\tcheckLinkColor: false,\n\t\tmessageOverride: __(\n\t\t\t'This color has poor contrast against the background. Consider increasing contrast.'\n\t\t),\n\t} );\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst typographyDefaultControls = getBlockSupport( name, [\n\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst colorDefaultControls = getBlockSupport( name, [\n\t\t'color',\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultControls = {\n\t\t...typographyDefaultControls,\n\t\ttextColor: colorDefaultControls?.text,\n\t};\n\n\tconst Wrapper = asWrapper || TypographyInspectorControl;\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tas={ Wrapper }\n\t\t\tpanelId={ clientId }\n\t\t\tsettings={ settings }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tcontrastWarning={ contrastWarning }\n\t\t/>\n\t);\n}\n\nexport const hasTypographySupport = ( blockName ) => {\n\treturn TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>\n\t\thasBlockSupport( blockName, key )\n\t);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["InspectorControls", "blockEditorStore", "useBlockColorContrastWarning", "StylesTypographyPanel"]
|
|
7
7
|
}
|
package/build/layouts/flex.cjs
CHANGED
|
@@ -56,6 +56,28 @@ var defaultAlignments = {
|
|
|
56
56
|
horizontal: "center",
|
|
57
57
|
vertical: "top"
|
|
58
58
|
};
|
|
59
|
+
var verticalAlignmentOptions = {
|
|
60
|
+
top: {
|
|
61
|
+
icon: import_icons.justifyTop,
|
|
62
|
+
label: (0, import_i18n._x)("Align top", "Block vertical alignment setting")
|
|
63
|
+
},
|
|
64
|
+
center: {
|
|
65
|
+
icon: import_icons.justifyCenterVertical,
|
|
66
|
+
label: (0, import_i18n._x)("Align middle", "Block vertical alignment setting")
|
|
67
|
+
},
|
|
68
|
+
bottom: {
|
|
69
|
+
icon: import_icons.justifyBottom,
|
|
70
|
+
label: (0, import_i18n._x)("Align bottom", "Block vertical alignment setting")
|
|
71
|
+
},
|
|
72
|
+
stretch: {
|
|
73
|
+
icon: import_icons.justifyStretchVertical,
|
|
74
|
+
label: (0, import_i18n._x)("Stretch to fill", "Block vertical alignment setting")
|
|
75
|
+
},
|
|
76
|
+
"space-between": {
|
|
77
|
+
icon: import_icons.justifySpaceBetweenVertical,
|
|
78
|
+
label: (0, import_i18n._x)("Space between", "Block vertical alignment setting")
|
|
79
|
+
}
|
|
80
|
+
};
|
|
59
81
|
var flexWrapOptions = ["wrap", "nowrap"];
|
|
60
82
|
var flex_default = {
|
|
61
83
|
name: "flex",
|
|
@@ -70,10 +92,15 @@ var flex_default = {
|
|
|
70
92
|
const {
|
|
71
93
|
allowOrientation = true,
|
|
72
94
|
allowJustification = true,
|
|
95
|
+
allowVerticalAlignment = true,
|
|
73
96
|
allowWrap = true
|
|
74
97
|
} = layoutBlockSupport;
|
|
75
98
|
const hasLayoutValue = (key, defaultValue) => (layout?.[key] ?? defaultValue) !== (resetLayout?.[key] ?? defaultValue);
|
|
76
99
|
const hasJustificationValue = () => hasLayoutValue("justifyContent", "left");
|
|
100
|
+
const hasVerticalAlignmentValue = () => hasLayoutValue(
|
|
101
|
+
"verticalAlignment",
|
|
102
|
+
getDefaultVerticalAlignment(layout)
|
|
103
|
+
);
|
|
77
104
|
const hasOrientationValue = () => hasLayoutValue("orientation", "horizontal");
|
|
78
105
|
const hasWrapValue = () => hasLayoutValue("flexWrap", "wrap");
|
|
79
106
|
const resetJustification = () => onChange(
|
|
@@ -82,6 +109,15 @@ var flex_default = {
|
|
|
82
109
|
justifyContent: resetLayout?.justifyContent
|
|
83
110
|
})
|
|
84
111
|
);
|
|
112
|
+
const resetVerticalAlignment = () => onChange(
|
|
113
|
+
(0, import_utils3.cleanEmptyObject)({
|
|
114
|
+
...layout,
|
|
115
|
+
verticalAlignment: getCompatibleVerticalAlignment(
|
|
116
|
+
resetLayout?.verticalAlignment,
|
|
117
|
+
layout?.orientation
|
|
118
|
+
)
|
|
119
|
+
})
|
|
120
|
+
);
|
|
85
121
|
const resetOrientation = () => {
|
|
86
122
|
const { verticalAlignment, justifyContent } = layout;
|
|
87
123
|
const nextOrientation = resetLayout?.orientation;
|
|
@@ -147,6 +183,22 @@ var flex_default = {
|
|
|
147
183
|
]
|
|
148
184
|
}
|
|
149
185
|
),
|
|
186
|
+
allowVerticalAlignment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
187
|
+
import_components.__experimentalToolsPanelItem,
|
|
188
|
+
{
|
|
189
|
+
label: (0, import_i18n.__)("Alignment"),
|
|
190
|
+
hasValue: hasVerticalAlignmentValue,
|
|
191
|
+
onDeselect: resetVerticalAlignment,
|
|
192
|
+
panelId: clientId,
|
|
193
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
194
|
+
FlexLayoutVerticalAlignmentControl,
|
|
195
|
+
{
|
|
196
|
+
layout,
|
|
197
|
+
onChange
|
|
198
|
+
}
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
),
|
|
150
202
|
allowWrap && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
203
|
import_components.__experimentalToolsPanelItem,
|
|
152
204
|
{
|
|
@@ -187,7 +239,8 @@ var flex_default = {
|
|
|
187
239
|
FlexLayoutVerticalAlignmentControl,
|
|
188
240
|
{
|
|
189
241
|
layout,
|
|
190
|
-
onChange
|
|
242
|
+
onChange,
|
|
243
|
+
isToolbar: true
|
|
191
244
|
}
|
|
192
245
|
)
|
|
193
246
|
] });
|
|
@@ -267,22 +320,62 @@ var flex_default = {
|
|
|
267
320
|
return [];
|
|
268
321
|
}
|
|
269
322
|
};
|
|
270
|
-
function
|
|
323
|
+
function getDefaultVerticalAlignment({ orientation = "horizontal" } = {}) {
|
|
324
|
+
return orientation === "horizontal" ? defaultAlignments.horizontal : defaultAlignments.vertical;
|
|
325
|
+
}
|
|
326
|
+
function getCompatibleVerticalAlignment(verticalAlignment, orientation) {
|
|
327
|
+
if (orientation === "horizontal" && verticalAlignment === "space-between" || orientation === "vertical" && verticalAlignment === "stretch") {
|
|
328
|
+
return void 0;
|
|
329
|
+
}
|
|
330
|
+
return verticalAlignment;
|
|
331
|
+
}
|
|
332
|
+
function getVerticalAlignmentControls(orientation) {
|
|
333
|
+
return orientation === "horizontal" ? ["top", "center", "bottom", "stretch"] : ["top", "center", "bottom", "space-between"];
|
|
334
|
+
}
|
|
335
|
+
function FlexLayoutVerticalAlignmentControl({
|
|
336
|
+
layout,
|
|
337
|
+
onChange,
|
|
338
|
+
isToolbar = false
|
|
339
|
+
}) {
|
|
271
340
|
const { orientation = "horizontal" } = layout;
|
|
272
|
-
const
|
|
273
|
-
const { verticalAlignment = defaultVerticalAlignment } = layout;
|
|
341
|
+
const { verticalAlignment = getDefaultVerticalAlignment(layout) } = layout;
|
|
274
342
|
const onVerticalAlignmentChange = (value) => {
|
|
275
343
|
onChange({
|
|
276
344
|
...layout,
|
|
277
345
|
verticalAlignment: value
|
|
278
346
|
});
|
|
279
347
|
};
|
|
348
|
+
const controls = getVerticalAlignmentControls(orientation);
|
|
349
|
+
if (isToolbar) {
|
|
350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
351
|
+
import_components2.BlockVerticalAlignmentControl,
|
|
352
|
+
{
|
|
353
|
+
onChange: onVerticalAlignmentChange,
|
|
354
|
+
value: verticalAlignment,
|
|
355
|
+
controls
|
|
356
|
+
}
|
|
357
|
+
);
|
|
358
|
+
}
|
|
280
359
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
281
|
-
|
|
360
|
+
import_components.__experimentalToggleGroupControl,
|
|
282
361
|
{
|
|
362
|
+
__next40pxDefaultSize: true,
|
|
363
|
+
label: (0, import_i18n.__)("Alignment"),
|
|
283
364
|
onChange: onVerticalAlignmentChange,
|
|
284
365
|
value: verticalAlignment,
|
|
285
|
-
|
|
366
|
+
className: "block-editor-hooks__flex-layout-alignment-controls",
|
|
367
|
+
children: controls.map((control) => {
|
|
368
|
+
const { icon, label } = verticalAlignmentOptions[control];
|
|
369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
370
|
+
import_components.__experimentalToggleGroupControlOptionIcon,
|
|
371
|
+
{
|
|
372
|
+
value: control,
|
|
373
|
+
icon,
|
|
374
|
+
label
|
|
375
|
+
},
|
|
376
|
+
control
|
|
377
|
+
);
|
|
378
|
+
})
|
|
286
379
|
}
|
|
287
380
|
);
|
|
288
381
|
}
|