@wordpress/block-editor 15.19.1-next.v.202605131006.0 → 15.20.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 +15 -1
- package/build/components/block-card/index.cjs +51 -41
- package/build/components/block-card/index.cjs.map +3 -3
- package/build/components/block-heading-level-dropdown/heading-level-icon.cjs.map +3 -3
- package/build/components/block-icon/index.cjs +7 -1
- package/build/components/block-icon/index.cjs.map +3 -3
- package/build/components/block-inspector/index.cjs +156 -11
- package/build/components/block-inspector/index.cjs.map +3 -3
- package/build/components/block-inspector/inspector-pre-tabs-slot-fill.cjs +38 -0
- package/build/components/block-inspector/inspector-pre-tabs-slot-fill.cjs.map +7 -0
- package/build/components/block-list/use-block-props/index.cjs +1 -1
- package/build/components/block-list/use-block-props/index.cjs.map +2 -2
- package/build/components/block-list/use-block-props/use-focus-handler.cjs +3 -4
- package/build/components/block-list/use-block-props/use-focus-handler.cjs.map +3 -3
- package/build/components/block-list/use-block-props/use-is-hovered.cjs +24 -14
- package/build/components/block-list/use-block-props/use-is-hovered.cjs.map +3 -3
- package/build/components/block-lock/modal.cjs.map +3 -3
- package/build/components/block-patterns-list/index.cjs +13 -2
- package/build/components/block-patterns-list/index.cjs.map +2 -2
- package/build/components/block-popover/index.cjs +13 -3
- package/build/components/block-popover/index.cjs.map +2 -2
- package/build/components/block-toolbar/switch-section-style.cjs.map +3 -3
- package/build/components/block-visibility/modal.cjs.map +3 -3
- package/build/components/block-visibility/viewport-visibility-info.cjs.map +3 -3
- package/build/components/colors-gradients/control.cjs +7 -4
- package/build/components/colors-gradients/control.cjs.map +2 -2
- package/build/components/global-styles/advanced-panel.cjs +24 -22
- package/build/components/global-styles/advanced-panel.cjs.map +3 -3
- package/build/components/global-styles/color-panel.cjs +95 -58
- package/build/components/global-styles/color-panel.cjs.map +2 -2
- package/build/components/global-styles/dimensions-panel.cjs +11 -5
- package/build/components/global-styles/dimensions-panel.cjs.map +2 -2
- package/build/components/global-styles/index.cjs +3 -0
- package/build/components/global-styles/index.cjs.map +2 -2
- package/build/components/global-styles/shadow-panel-components.cjs +38 -26
- package/build/components/global-styles/shadow-panel-components.cjs.map +2 -2
- package/build/components/global-styles/state-control-badges.cjs +69 -0
- package/build/components/global-styles/state-control-badges.cjs.map +7 -0
- package/build/components/global-styles/state-control.cjs +54 -63
- package/build/components/global-styles/state-control.cjs.map +3 -3
- package/build/components/iframe/index.cjs +0 -3
- package/build/components/iframe/index.cjs.map +2 -2
- package/build/components/iframe/use-scale-canvas.cjs +4 -1
- package/build/components/iframe/use-scale-canvas.cjs.map +2 -2
- package/build/components/inserter/hooks/use-patterns-state.cjs +4 -6
- package/build/components/inserter/hooks/use-patterns-state.cjs.map +2 -2
- package/build/components/inserter/index.cjs +1 -0
- package/build/components/inserter/index.cjs.map +2 -2
- package/build/components/inserter/media-tab/media-preview.cjs +27 -18
- package/build/components/inserter/media-tab/media-preview.cjs.map +2 -2
- package/build/components/inserter/media-tab/utils.cjs +1 -1
- package/build/components/inserter/media-tab/utils.cjs.map +2 -2
- package/build/components/inserter/panel.cjs.map +3 -3
- package/build/components/inspector-controls/block-support-tools-panel.cjs +10 -2
- package/build/components/inspector-controls/block-support-tools-panel.cjs.map +2 -2
- package/build/components/inspector-controls/fill.cjs +14 -4
- 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 +13 -8
- package/build/components/inspector-controls-tabs/index.cjs.map +3 -3
- package/build/components/inspector-controls-tabs/settings-tab.cjs +1 -4
- package/build/components/inspector-controls-tabs/settings-tab.cjs.map +3 -3
- package/build/components/inspector-controls-tabs/styles-tab.cjs +9 -0
- package/build/components/inspector-controls-tabs/styles-tab.cjs.map +3 -3
- package/build/components/inspector-controls-tabs/use-inspector-controls-tabs.cjs +11 -5
- package/build/components/inspector-controls-tabs/use-inspector-controls-tabs.cjs.map +2 -2
- package/build/components/list-view/block-select-button.cjs +20 -8
- package/build/components/list-view/block-select-button.cjs.map +2 -2
- package/build/components/list-view/block.cjs +2 -1
- package/build/components/list-view/block.cjs.map +2 -2
- package/build/components/preset-input-control/custom-value-controls.cjs +10 -1
- package/build/components/preset-input-control/custom-value-controls.cjs.map +2 -2
- package/build/components/preset-input-control/index.cjs.map +3 -3
- package/build/components/provider/use-media-upload-settings.cjs +1 -0
- package/build/components/provider/use-media-upload-settings.cjs.map +2 -2
- package/build/components/rich-text/event-listeners/enter.cjs +9 -2
- package/build/components/rich-text/event-listeners/enter.cjs.map +3 -3
- package/build/components/rich-text/event-listeners/paste-handler.cjs +4 -4
- package/build/components/rich-text/event-listeners/paste-handler.cjs.map +3 -3
- package/build/hooks/background.cjs +13 -3
- package/build/hooks/background.cjs.map +2 -2
- package/build/hooks/block-fields/link/index.cjs.map +3 -3
- package/build/hooks/block-fields/media/index.cjs.map +3 -3
- package/build/hooks/block-style-state.cjs +112 -0
- package/build/hooks/block-style-state.cjs.map +7 -0
- package/build/hooks/border.cjs +13 -3
- package/build/hooks/border.cjs.map +2 -2
- package/build/hooks/color.cjs +28 -9
- package/build/hooks/color.cjs.map +2 -2
- package/build/hooks/dimensions.cjs +15 -6
- package/build/hooks/dimensions.cjs.map +2 -2
- package/build/hooks/layout-child.cjs +147 -61
- package/build/hooks/layout-child.cjs.map +2 -2
- package/build/hooks/layout.cjs +263 -56
- package/build/hooks/layout.cjs.map +3 -3
- package/build/hooks/state-utils.cjs +94 -0
- package/build/hooks/state-utils.cjs.map +7 -0
- package/build/hooks/states.cjs +124 -0
- package/build/hooks/states.cjs.map +7 -0
- package/build/hooks/style.cjs +304 -17
- package/build/hooks/style.cjs.map +3 -3
- package/build/hooks/typography.cjs +14 -5
- package/build/hooks/typography.cjs.map +2 -2
- package/build/layouts/constrained.cjs +128 -55
- package/build/layouts/constrained.cjs.map +3 -3
- package/build/layouts/flex.cjs +119 -31
- package/build/layouts/flex.cjs.map +3 -3
- package/build/layouts/grid.cjs +103 -40
- package/build/layouts/grid.cjs.map +3 -3
- package/build/private-apis.cjs +2 -0
- package/build/private-apis.cjs.map +2 -2
- package/build/store/private-actions.cjs +18 -0
- package/build/store/private-actions.cjs.map +2 -2
- package/build/store/private-keys.cjs +10 -2
- package/build/store/private-keys.cjs.map +2 -2
- package/build/store/private-selectors.cjs +26 -2
- package/build/store/private-selectors.cjs.map +2 -2
- package/build/store/reducer.cjs +70 -1
- package/build/store/reducer.cjs.map +2 -2
- package/build/store/utils.cjs +1 -1
- package/build/store/utils.cjs.map +2 -2
- package/build/utils/color-values.cjs +44 -0
- package/build/utils/color-values.cjs.map +7 -0
- package/build-module/components/block-card/index.mjs +52 -45
- package/build-module/components/block-card/index.mjs.map +2 -2
- package/build-module/components/block-heading-level-dropdown/heading-level-icon.mjs +2 -2
- package/build-module/components/block-heading-level-dropdown/heading-level-icon.mjs.map +2 -2
- package/build-module/components/block-icon/index.mjs +8 -2
- package/build-module/components/block-icon/index.mjs.map +2 -2
- package/build-module/components/block-inspector/index.mjs +166 -13
- package/build-module/components/block-inspector/index.mjs.map +2 -2
- package/build-module/components/block-inspector/inspector-pre-tabs-slot-fill.mjs +12 -0
- package/build-module/components/block-inspector/inspector-pre-tabs-slot-fill.mjs.map +7 -0
- package/build-module/components/block-list/use-block-props/index.mjs +1 -1
- package/build-module/components/block-list/use-block-props/index.mjs.map +2 -2
- package/build-module/components/block-list/use-block-props/use-focus-handler.mjs +7 -5
- package/build-module/components/block-list/use-block-props/use-focus-handler.mjs.map +2 -2
- package/build-module/components/block-list/use-block-props/use-is-hovered.mjs +28 -15
- package/build-module/components/block-list/use-block-props/use-is-hovered.mjs.map +2 -2
- package/build-module/components/block-lock/modal.mjs +4 -4
- package/build-module/components/block-lock/modal.mjs.map +2 -2
- package/build-module/components/block-patterns-list/index.mjs +14 -4
- package/build-module/components/block-patterns-list/index.mjs.map +2 -2
- package/build-module/components/block-popover/index.mjs +13 -3
- package/build-module/components/block-popover/index.mjs.map +2 -2
- package/build-module/components/block-toolbar/switch-section-style.mjs +2 -2
- package/build-module/components/block-toolbar/switch-section-style.mjs.map +2 -2
- package/build-module/components/block-visibility/modal.mjs +2 -2
- package/build-module/components/block-visibility/modal.mjs.map +2 -2
- package/build-module/components/block-visibility/viewport-visibility-info.mjs +2 -2
- package/build-module/components/block-visibility/viewport-visibility-info.mjs.map +2 -2
- package/build-module/components/colors-gradients/control.mjs +7 -4
- package/build-module/components/colors-gradients/control.mjs.map +2 -2
- package/build-module/components/global-styles/advanced-panel.mjs +25 -27
- package/build-module/components/global-styles/advanced-panel.mjs.map +2 -2
- package/build-module/components/global-styles/color-panel.mjs +96 -59
- package/build-module/components/global-styles/color-panel.mjs.map +2 -2
- package/build-module/components/global-styles/dimensions-panel.mjs +14 -5
- package/build-module/components/global-styles/dimensions-panel.mjs.map +2 -2
- package/build-module/components/global-styles/index.mjs +2 -0
- package/build-module/components/global-styles/index.mjs.map +2 -2
- package/build-module/components/global-styles/shadow-panel-components.mjs +39 -28
- package/build-module/components/global-styles/shadow-panel-components.mjs.map +2 -2
- package/build-module/components/global-styles/state-control-badges.mjs +48 -0
- package/build-module/components/global-styles/state-control-badges.mjs.map +7 -0
- package/build-module/components/global-styles/state-control.mjs +57 -71
- package/build-module/components/global-styles/state-control.mjs.map +2 -2
- package/build-module/components/iframe/index.mjs +0 -3
- package/build-module/components/iframe/index.mjs.map +2 -2
- package/build-module/components/iframe/use-scale-canvas.mjs +4 -1
- package/build-module/components/iframe/use-scale-canvas.mjs.map +2 -2
- package/build-module/components/inserter/hooks/use-patterns-state.mjs +8 -7
- package/build-module/components/inserter/hooks/use-patterns-state.mjs.map +2 -2
- package/build-module/components/inserter/index.mjs +1 -0
- package/build-module/components/inserter/index.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/media-preview.mjs +27 -19
- package/build-module/components/inserter/media-tab/media-preview.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/utils.mjs +1 -1
- package/build-module/components/inserter/media-tab/utils.mjs.map +2 -2
- package/build-module/components/inserter/panel.mjs +2 -2
- package/build-module/components/inserter/panel.mjs.map +2 -2
- package/build-module/components/inspector-controls/block-support-tools-panel.mjs +10 -2
- package/build-module/components/inspector-controls/block-support-tools-panel.mjs.map +2 -2
- package/build-module/components/inspector-controls/fill.mjs +18 -5
- 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 +14 -10
- package/build-module/components/inspector-controls-tabs/index.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/settings-tab.mjs +1 -4
- package/build-module/components/inspector-controls-tabs/settings-tab.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs +9 -0
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/use-inspector-controls-tabs.mjs +11 -5
- package/build-module/components/inspector-controls-tabs/use-inspector-controls-tabs.mjs.map +2 -2
- package/build-module/components/list-view/block-select-button.mjs +20 -9
- package/build-module/components/list-view/block-select-button.mjs.map +2 -2
- package/build-module/components/list-view/block.mjs +2 -1
- package/build-module/components/list-view/block.mjs.map +2 -2
- package/build-module/components/preset-input-control/custom-value-controls.mjs +10 -2
- package/build-module/components/preset-input-control/custom-value-controls.mjs.map +2 -2
- package/build-module/components/preset-input-control/index.mjs +2 -2
- package/build-module/components/preset-input-control/index.mjs.map +2 -2
- package/build-module/components/provider/use-media-upload-settings.mjs +1 -0
- package/build-module/components/provider/use-media-upload-settings.mjs.map +2 -2
- package/build-module/components/rich-text/event-listeners/enter.mjs +9 -2
- package/build-module/components/rich-text/event-listeners/enter.mjs.map +2 -2
- package/build-module/components/rich-text/event-listeners/paste-handler.mjs +4 -4
- package/build-module/components/rich-text/event-listeners/paste-handler.mjs.map +2 -2
- package/build-module/hooks/background.mjs +18 -3
- package/build-module/hooks/background.mjs.map +2 -2
- package/build-module/hooks/block-fields/link/index.mjs +3 -3
- package/build-module/hooks/block-fields/link/index.mjs.map +2 -2
- package/build-module/hooks/block-fields/media/index.mjs +3 -3
- package/build-module/hooks/block-fields/media/index.mjs.map +2 -2
- package/build-module/hooks/block-style-state.mjs +79 -0
- package/build-module/hooks/block-style-state.mjs.map +7 -0
- package/build-module/hooks/border.mjs +18 -3
- package/build-module/hooks/border.mjs.map +2 -2
- package/build-module/hooks/color.mjs +33 -9
- package/build-module/hooks/color.mjs.map +2 -2
- package/build-module/hooks/dimensions.mjs +20 -6
- package/build-module/hooks/dimensions.mjs.map +2 -2
- package/build-module/hooks/layout-child.mjs +141 -61
- package/build-module/hooks/layout-child.mjs.map +2 -2
- package/build-module/hooks/layout.mjs +270 -58
- package/build-module/hooks/layout.mjs.map +2 -2
- package/build-module/hooks/state-utils.mjs +64 -0
- package/build-module/hooks/state-utils.mjs.map +7 -0
- package/build-module/hooks/states.mjs +85 -0
- package/build-module/hooks/states.mjs.map +7 -0
- package/build-module/hooks/style.mjs +309 -18
- package/build-module/hooks/style.mjs.map +2 -2
- package/build-module/hooks/typography.mjs +19 -5
- package/build-module/hooks/typography.mjs.map +2 -2
- package/build-module/layouts/constrained.mjs +130 -57
- package/build-module/layouts/constrained.mjs.map +2 -2
- package/build-module/layouts/flex.mjs +123 -35
- package/build-module/layouts/flex.mjs.map +2 -2
- package/build-module/layouts/grid.mjs +105 -42
- package/build-module/layouts/grid.mjs.map +2 -2
- package/build-module/private-apis.mjs +4 -0
- package/build-module/private-apis.mjs.map +2 -2
- package/build-module/store/private-actions.mjs +16 -0
- package/build-module/store/private-actions.mjs.map +2 -2
- package/build-module/store/private-keys.mjs +7 -1
- package/build-module/store/private-keys.mjs.map +2 -2
- package/build-module/store/private-selectors.mjs +25 -2
- package/build-module/store/private-selectors.mjs.map +2 -2
- package/build-module/store/reducer.mjs +69 -1
- package/build-module/store/reducer.mjs.map +2 -2
- package/build-module/store/utils.mjs +5 -2
- package/build-module/store/utils.mjs.map +2 -2
- package/build-module/utils/color-values.mjs +19 -0
- package/build-module/utils/color-values.mjs.map +7 -0
- package/build-style/content-rtl.css +18 -3
- package/build-style/content.css +18 -3
- package/build-style/style-rtl.css +14 -17
- package/build-style/style.css +14 -17
- package/package.json +41 -41
- package/src/components/audio-player/index.native.js +7 -3
- package/src/components/block-card/index.js +67 -60
- package/src/components/block-heading-level-dropdown/heading-level-icon.js +2 -2
- package/src/components/block-icon/index.js +5 -2
- package/src/components/block-icon/index.native.js +2 -2
- package/src/components/block-inspector/index.js +153 -7
- package/src/components/block-inspector/inspector-pre-tabs-slot-fill.js +11 -0
- package/src/components/block-list/block-selection-button.native.js +3 -3
- package/src/components/block-list/content.scss +0 -6
- package/src/components/block-list/use-block-props/index.js +1 -1
- package/src/components/block-list/use-block-props/use-focus-handler.js +8 -6
- package/src/components/block-list/use-block-props/use-is-hovered.js +32 -15
- package/src/components/block-lock/modal.js +4 -4
- package/src/components/block-patterns-list/index.js +14 -5
- package/src/components/block-patterns-list/stories/index.story.jsx +2 -0
- package/src/components/block-patterns-list/style.scss +0 -1
- package/src/components/block-popover/index.js +20 -10
- package/src/components/block-toolbar/switch-section-style.js +2 -2
- package/src/components/block-visibility/modal.js +2 -2
- package/src/components/block-visibility/viewport-visibility-info.js +2 -2
- package/src/components/colors/test/with-colors.js +1 -1
- package/src/components/colors-gradients/control.js +10 -8
- package/src/components/colors-gradients/test/control.js +98 -1
- package/src/components/global-styles/advanced-panel.js +44 -39
- package/src/components/global-styles/color-panel.js +133 -60
- package/src/components/global-styles/dimensions-panel.js +17 -4
- package/src/components/global-styles/index.js +1 -0
- package/src/components/global-styles/shadow-panel-components.js +29 -19
- package/src/components/global-styles/state-control-badges.js +58 -0
- package/src/components/global-styles/state-control.js +28 -36
- package/src/components/global-styles/test/color-panel.js +135 -0
- package/src/components/iframe/index.js +0 -3
- package/src/components/iframe/use-scale-canvas.js +8 -2
- package/src/components/inserter/hooks/use-patterns-state.js +12 -7
- package/src/components/inserter/index.js +1 -0
- package/src/components/inserter/media-tab/media-preview.js +29 -20
- package/src/components/inserter/media-tab/utils.js +1 -1
- package/src/components/inserter/panel.js +2 -2
- package/src/components/inserter/style.scss +1 -0
- package/src/components/inserter-button/index.native.js +5 -2
- package/src/components/inspector-controls/block-support-tools-panel.js +10 -2
- package/src/components/inspector-controls/fill.js +18 -5
- package/src/components/inspector-controls/groups.js +2 -0
- package/src/components/inspector-controls-tabs/index.js +9 -5
- package/src/components/inspector-controls-tabs/settings-tab.js +1 -7
- package/src/components/inspector-controls-tabs/styles-tab.js +6 -0
- package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js +13 -7
- package/src/components/list-view/block-select-button.js +19 -9
- package/src/components/list-view/block.js +6 -1
- package/src/components/media-replace-flow/style.scss +0 -18
- package/src/components/preset-input-control/custom-value-controls.js +13 -6
- package/src/components/preset-input-control/index.js +2 -2
- package/src/components/provider/use-media-upload-settings.js +1 -0
- package/src/components/rich-text/event-listeners/enter.js +14 -2
- package/src/components/rich-text/event-listeners/paste-handler.js +5 -4
- package/src/components/unsupported-block-details/index.native.js +6 -2
- package/src/components/video-player/index.native.js +2 -2
- package/src/components/warning/index.native.js +2 -2
- package/src/hooks/background.js +59 -37
- package/src/hooks/block-fields/link/index.js +3 -3
- package/src/hooks/block-fields/media/index.js +3 -3
- package/src/hooks/block-style-state.js +127 -0
- package/src/hooks/border.js +25 -6
- package/src/hooks/color.js +40 -18
- package/src/hooks/dimensions.js +32 -11
- package/src/hooks/layout-child.js +179 -62
- package/src/hooks/layout.js +349 -75
- package/src/hooks/layout.scss +6 -0
- package/src/hooks/state-utils.js +158 -0
- package/src/hooks/states.js +109 -0
- package/src/hooks/style.js +456 -19
- package/src/hooks/test/block-style-state.js +270 -0
- package/src/hooks/test/layout.js +185 -0
- package/src/hooks/test/state-utils.js +193 -0
- package/src/hooks/test/style.js +301 -1
- package/src/hooks/typography.js +33 -14
- package/src/layouts/constrained.js +182 -95
- package/src/layouts/flex.js +141 -36
- package/src/layouts/grid.js +122 -32
- package/src/layouts/test/flex.js +57 -20
- package/src/private-apis.js +4 -0
- package/src/store/private-actions.js +32 -0
- package/src/store/private-keys.js +4 -0
- package/src/store/private-selectors.js +44 -2
- package/src/store/reducer.js +105 -1
- package/src/store/test/private-actions.js +26 -0
- package/src/store/test/private-selectors.js +90 -0
- package/src/store/test/reducer.js +363 -0
- package/src/store/utils.js +6 -2
- package/src/utils/color-values.js +28 -0
- package/src/utils/test/color-values.js +78 -0
|
@@ -14,6 +14,12 @@ import { TEXT_ALIGN_SUPPORT_KEY } from "./text-align.mjs";
|
|
|
14
14
|
import { FIT_TEXT_SUPPORT_KEY } from "./fit-text.mjs";
|
|
15
15
|
import { cleanEmptyObject } from "./utils.mjs";
|
|
16
16
|
import { store as blockEditorStore } from "../store/index.mjs";
|
|
17
|
+
import {
|
|
18
|
+
getStyleForState,
|
|
19
|
+
isDefaultBlockStyleState,
|
|
20
|
+
setStyleForState,
|
|
21
|
+
useBlockStyleState
|
|
22
|
+
} from "./block-style-state.mjs";
|
|
17
23
|
import { jsx } from "react/jsx-runtime";
|
|
18
24
|
function omit(object, keys) {
|
|
19
25
|
return Object.fromEntries(
|
|
@@ -94,6 +100,7 @@ function TypographyInspectorControl({ children, resetAllFilter }) {
|
|
|
94
100
|
);
|
|
95
101
|
}
|
|
96
102
|
function TypographyPanel({ clientId, name, setAttributes, settings }) {
|
|
103
|
+
const selectedState = useBlockStyleState();
|
|
97
104
|
const isEnabled = useHasTypographyPanel(settings);
|
|
98
105
|
const { style, fontFamily, fontSize, fitText } = useSelect(
|
|
99
106
|
(select) => {
|
|
@@ -115,11 +122,18 @@ function TypographyPanel({ clientId, name, setAttributes, settings }) {
|
|
|
115
122
|
},
|
|
116
123
|
[clientId, isEnabled]
|
|
117
124
|
);
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
125
|
+
const isStateSelected = !isDefaultBlockStyleState(selectedState);
|
|
126
|
+
const value = useMemo(() => {
|
|
127
|
+
if (isStateSelected) {
|
|
128
|
+
return getStyleForState(style, selectedState);
|
|
129
|
+
}
|
|
130
|
+
return attributesToStyle({ style, fontFamily, fontSize });
|
|
131
|
+
}, [isStateSelected, selectedState, style, fontSize, fontFamily]);
|
|
132
|
+
const onChange = isStateSelected ? (newStyle) => {
|
|
133
|
+
setAttributes({
|
|
134
|
+
style: setStyleForState(style, selectedState, newStyle)
|
|
135
|
+
});
|
|
136
|
+
} : (newStyle) => {
|
|
123
137
|
const newAttributes = styleToAttributes(newStyle);
|
|
124
138
|
const hasFontSize = newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
|
|
125
139
|
if (hasFontSize && fitText) {
|
|
@@ -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';\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( { clientId, name, setAttributes, settings } ) {\n\tconst isEnabled = useHasTypographyPanel( settings );\n\n\tconst { style, fontFamily, fontSize, fitText } = 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} = 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};\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\tconst value = useMemo(\n\t\t()
|
|
5
|
-
"mappings": ";AAGA,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAK1B,OAAO,uBAAuB;AAC9B;AAAA,EACC,WAAW;AAAA,EACX;AAAA,OACM;AAEP,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,SAAS,wBAAwB;
|
|
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( { clientId, name, setAttributes, settings } ) {\n\tconst selectedState = useBlockStyleState();\n\tconst isEnabled = useHasTypographyPanel( settings );\n\n\tconst { style, fontFamily, fontSize, fitText } = 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} = 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};\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 } );\n\t}, [ isStateSelected, selectedState, style, fontSize, fontFamily ] );\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\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultControls = getBlockSupport( name, [\n\t\tTYPOGRAPHY_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tas={ TypographyInspectorControl }\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/>\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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
__experimentalToggleGroupControl as ToggleGroupControl,
|
|
6
6
|
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
|
|
7
7
|
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
|
|
8
|
-
|
|
8
|
+
__experimentalToolsPanelItem as ToolsPanelItem
|
|
9
9
|
} from "@wordpress/components";
|
|
10
10
|
import { __ } from "@wordpress/i18n";
|
|
11
11
|
import {
|
|
@@ -21,7 +21,7 @@ import { useSettings } from "../components/use-settings/index.mjs";
|
|
|
21
21
|
import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from "./utils.mjs";
|
|
22
22
|
import { getGapCSSValue } from "../hooks/gap.mjs";
|
|
23
23
|
import { BlockControls, JustifyContentControl } from "../components/index.mjs";
|
|
24
|
-
import { shouldSkipSerialization } from "../hooks/utils.mjs";
|
|
24
|
+
import { cleanEmptyObject, shouldSkipSerialization } from "../hooks/utils.mjs";
|
|
25
25
|
import { LAYOUT_DEFINITIONS } from "./definitions.mjs";
|
|
26
26
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
27
27
|
var constrained_default = {
|
|
@@ -30,7 +30,9 @@ var constrained_default = {
|
|
|
30
30
|
inspectorControls: function DefaultLayoutInspectorControls({
|
|
31
31
|
layout,
|
|
32
32
|
onChange,
|
|
33
|
-
layoutBlockSupport = {}
|
|
33
|
+
layoutBlockSupport = {},
|
|
34
|
+
resetLayout = {},
|
|
35
|
+
clientId
|
|
34
36
|
}) {
|
|
35
37
|
const { wideSize, contentSize, justifyContent = "center" } = layout;
|
|
36
38
|
const {
|
|
@@ -64,14 +66,38 @@ var constrained_default = {
|
|
|
64
66
|
const units = useCustomUnits({
|
|
65
67
|
availableUnits: availableUnits || ["%", "px", "em", "rem", "vw"]
|
|
66
68
|
});
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
{
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
const hasLayoutValue = (key, defaultValue) => (layout?.[key] ?? defaultValue) !== (resetLayout?.[key] ?? defaultValue);
|
|
70
|
+
const resetContentSize = () => onChange(
|
|
71
|
+
cleanEmptyObject({
|
|
72
|
+
...layout,
|
|
73
|
+
contentSize: resetLayout?.contentSize
|
|
74
|
+
})
|
|
75
|
+
);
|
|
76
|
+
const resetWideSize = () => onChange(
|
|
77
|
+
cleanEmptyObject({
|
|
78
|
+
...layout,
|
|
79
|
+
wideSize: resetLayout?.wideSize
|
|
80
|
+
})
|
|
81
|
+
);
|
|
82
|
+
const resetJustification = () => onChange(
|
|
83
|
+
cleanEmptyObject({
|
|
84
|
+
...layout,
|
|
85
|
+
justifyContent: resetLayout?.justifyContent
|
|
86
|
+
})
|
|
87
|
+
);
|
|
88
|
+
const hasContentSizeValue = () => hasLayoutValue("contentSize");
|
|
89
|
+
const hasWideSizeValue = () => hasLayoutValue("wideSize");
|
|
90
|
+
const hasJustificationValue = () => hasLayoutValue("justifyContent", "center");
|
|
91
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
92
|
+
allowCustomContentAndWideSize && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
ToolsPanelItem,
|
|
95
|
+
{
|
|
96
|
+
label: __("Content width"),
|
|
97
|
+
hasValue: hasContentSizeValue,
|
|
98
|
+
onDeselect: resetContentSize,
|
|
99
|
+
panelId: clientId,
|
|
100
|
+
children: /* @__PURE__ */ jsx(
|
|
75
101
|
UnitControl,
|
|
76
102
|
{
|
|
77
103
|
__next40pxDefaultSize: true,
|
|
@@ -80,38 +106,62 @@ var constrained_default = {
|
|
|
80
106
|
value: contentSize || wideSize || "",
|
|
81
107
|
onChange: (nextWidth) => {
|
|
82
108
|
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
|
|
83
|
-
onChange(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
109
|
+
onChange(
|
|
110
|
+
cleanEmptyObject({
|
|
111
|
+
...layout,
|
|
112
|
+
contentSize: nextWidth !== "" ? nextWidth : void 0
|
|
113
|
+
})
|
|
114
|
+
);
|
|
87
115
|
},
|
|
88
116
|
units,
|
|
89
117
|
prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: alignNone }) })
|
|
90
118
|
}
|
|
91
|
-
)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
119
|
+
)
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
/* @__PURE__ */ jsxs(
|
|
123
|
+
ToolsPanelItem,
|
|
124
|
+
{
|
|
125
|
+
label: __("Wide width"),
|
|
126
|
+
hasValue: hasWideSizeValue,
|
|
127
|
+
onDeselect: resetWideSize,
|
|
128
|
+
panelId: clientId,
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ jsx(
|
|
131
|
+
UnitControl,
|
|
132
|
+
{
|
|
133
|
+
__next40pxDefaultSize: true,
|
|
134
|
+
label: __("Wide width"),
|
|
135
|
+
labelPosition: "top",
|
|
136
|
+
value: wideSize || contentSize || "",
|
|
137
|
+
onChange: (nextWidth) => {
|
|
138
|
+
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
|
|
139
|
+
onChange(
|
|
140
|
+
cleanEmptyObject({
|
|
141
|
+
...layout,
|
|
142
|
+
wideSize: nextWidth !== "" ? nextWidth : void 0
|
|
143
|
+
})
|
|
144
|
+
);
|
|
145
|
+
},
|
|
146
|
+
units,
|
|
147
|
+
prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: stretchWide }) })
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
/* @__PURE__ */ jsx("p", { className: "block-editor-hooks__layout-constrained-helptext", children: __(
|
|
151
|
+
"Customize the width for all elements that are assigned to the center or wide columns."
|
|
152
|
+
) })
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
] }),
|
|
157
|
+
allowJustification && /* @__PURE__ */ jsx(
|
|
158
|
+
ToolsPanelItem,
|
|
159
|
+
{
|
|
160
|
+
label: __("Justification"),
|
|
161
|
+
hasValue: hasJustificationValue,
|
|
162
|
+
onDeselect: resetJustification,
|
|
163
|
+
panelId: clientId,
|
|
164
|
+
children: /* @__PURE__ */ jsx(
|
|
115
165
|
ToggleGroupControl,
|
|
116
166
|
{
|
|
117
167
|
__next40pxDefaultSize: true,
|
|
@@ -133,9 +183,9 @@ var constrained_default = {
|
|
|
133
183
|
)
|
|
134
184
|
}
|
|
135
185
|
)
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
);
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
] });
|
|
139
189
|
},
|
|
140
190
|
toolBarControls: function DefaultLayoutToolbarControls({
|
|
141
191
|
layout = {},
|
|
@@ -157,13 +207,19 @@ var constrained_default = {
|
|
|
157
207
|
getLayoutStyle: function getLayoutStyle({
|
|
158
208
|
selector,
|
|
159
209
|
layout = {},
|
|
210
|
+
viewportOverrides,
|
|
160
211
|
style,
|
|
161
212
|
blockName,
|
|
162
213
|
hasBlockGapSupport,
|
|
163
214
|
layoutDefinitions = LAYOUT_DEFINITIONS
|
|
164
215
|
}) {
|
|
165
|
-
const
|
|
216
|
+
const hasViewportOverrides = viewportOverrides !== void 0;
|
|
217
|
+
const effectiveLayout = hasViewportOverrides ? { ...layout, ...viewportOverrides } : layout;
|
|
218
|
+
const hasViewportOverride = (key) => Object.hasOwn(viewportOverrides || {}, key);
|
|
219
|
+
const { contentSize, wideSize, justifyContent } = effectiveLayout;
|
|
166
220
|
const blockGapStyleValue = getGapCSSValue(style?.spacing?.blockGap);
|
|
221
|
+
const hasBlockGapOverride = !hasViewportOverrides || Object.hasOwn(style?.spacing || {}, "blockGap");
|
|
222
|
+
const hasBlockSpacingOverride = !hasViewportOverrides || Object.hasOwn(style?.spacing || {}, "padding");
|
|
167
223
|
let blockGapValue = "";
|
|
168
224
|
if (!shouldSkipSerialization(blockName, "spacing", "blockGap")) {
|
|
169
225
|
if (blockGapStyleValue?.top) {
|
|
@@ -174,14 +230,23 @@ var constrained_default = {
|
|
|
174
230
|
}
|
|
175
231
|
const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
|
|
176
232
|
const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
|
|
177
|
-
|
|
178
|
-
|
|
233
|
+
const hasJustificationOverride = hasViewportOverrides && hasViewportOverride("justifyContent");
|
|
234
|
+
const shouldOutputConstrainedSizes = !hasViewportOverrides || hasViewportOverride("contentSize") || hasViewportOverride("wideSize");
|
|
235
|
+
const constrainedSizeDeclarations = [
|
|
236
|
+
`max-width: ${contentSize ?? wideSize}`
|
|
237
|
+
];
|
|
238
|
+
if (!hasViewportOverrides || hasJustificationOverride) {
|
|
239
|
+
constrainedSizeDeclarations.push(
|
|
240
|
+
`margin-left: ${marginLeft}`,
|
|
241
|
+
`margin-right: ${marginRight}`
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
let output = shouldOutputConstrainedSizes && (!!contentSize || !!wideSize) ? `
|
|
245
|
+
${appendSelectors(
|
|
179
246
|
selector,
|
|
180
247
|
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
|
|
181
248
|
)} {
|
|
182
|
-
|
|
183
|
-
margin-left: ${marginLeft};
|
|
184
|
-
margin-right: ${marginRight};
|
|
249
|
+
${constrainedSizeDeclarations.join("; ")};
|
|
185
250
|
}
|
|
186
251
|
${appendSelectors(selector, "> .alignwide")} {
|
|
187
252
|
max-width: ${wideSize ?? contentSize};
|
|
@@ -189,21 +254,29 @@ var constrained_default = {
|
|
|
189
254
|
${appendSelectors(selector, "> .alignfull")} {
|
|
190
255
|
max-width: none;
|
|
191
256
|
}
|
|
192
|
-
|
|
193
|
-
if (
|
|
257
|
+
` : "";
|
|
258
|
+
if (hasJustificationOverride && !shouldOutputConstrainedSizes) {
|
|
194
259
|
output += `${appendSelectors(
|
|
195
260
|
selector,
|
|
196
261
|
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
|
|
197
262
|
)}
|
|
263
|
+
{ margin-left: ${marginLeft}; margin-right: ${marginRight}; }`;
|
|
264
|
+
} else if (!hasViewportOverrides) {
|
|
265
|
+
if (justifyContent === "left") {
|
|
266
|
+
output += `${appendSelectors(
|
|
267
|
+
selector,
|
|
268
|
+
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
|
|
269
|
+
)}
|
|
198
270
|
{ margin-left: ${marginLeft}; }`;
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
271
|
+
} else if (justifyContent === "right") {
|
|
272
|
+
output += `${appendSelectors(
|
|
273
|
+
selector,
|
|
274
|
+
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
|
|
275
|
+
)}
|
|
204
276
|
{ margin-right: ${marginRight}; }`;
|
|
277
|
+
}
|
|
205
278
|
}
|
|
206
|
-
if (style?.spacing?.padding) {
|
|
279
|
+
if (hasBlockSpacingOverride && style?.spacing?.padding) {
|
|
207
280
|
const paddingValues = getCSSRules(style);
|
|
208
281
|
paddingValues.forEach((rule) => {
|
|
209
282
|
if (rule.key === "paddingRight") {
|
|
@@ -223,7 +296,7 @@ var constrained_default = {
|
|
|
223
296
|
}
|
|
224
297
|
});
|
|
225
298
|
}
|
|
226
|
-
if (hasBlockGapSupport && blockGapValue) {
|
|
299
|
+
if (hasBlockGapSupport && hasBlockGapOverride && blockGapValue) {
|
|
227
300
|
output += getBlockGapCSS(
|
|
228
301
|
selector,
|
|
229
302
|
layoutDefinitions,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/layouts/constrained.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tIcon,\n\talignNone,\n\tstretchWide,\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n} from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../components/use-settings';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { BlockControls, JustifyContentControl } from '../components';\nimport { shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { wideSize, contentSize, justifyContent = 'center' } = layout;\n\t\tconst {\n\t\t\tallowJustification = true,\n\t\t\tallowCustomContentAndWideSize = true,\n\t\t} = layoutBlockSupport;\n\t\tconst onJustificationChange = ( value ) => {\n\t\t\tonChange( {\n\t\t\t\t...layout,\n\t\t\t\tjustifyContent: value,\n\t\t\t} );\n\t\t};\n\t\tconst justificationOptions = [\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\ticon: justifyLeft,\n\t\t\t\tlabel: __( 'Justify items left' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'center',\n\t\t\t\ticon: justifyCenter,\n\t\t\t\tlabel: __( 'Justify items center' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\ticon: justifyRight,\n\t\t\t\tlabel: __( 'Justify items right' ),\n\t\t\t},\n\t\t];\n\t\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],\n\t\t} );\n\t\treturn (\n\t\t\t<VStack\n\t\t\t\tspacing={ 4 }\n\t\t\t\tclassName=\"block-editor-hooks__layout-constrained\"\n\t\t\t>\n\t\t\t\t{ allowCustomContentAndWideSize && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Content width' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\tcontentSize:\n\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\t\t\t\t\t\t\t\t\t\t\t? nextWidth\n\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t\t\t\t<Icon icon={ alignNone } />\n\t\t\t\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Wide width' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\twideSize:\n\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\t\t\t\t\t\t\t\t\t\t\t? nextWidth\n\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<p className=\"block-editor-hooks__layout-constrained-helptext\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Customize the width for all elements that are assigned to the center or wide columns.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\tvalue={ justifyContent }\n\t\t\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ justificationOptions.map(\n\t\t\t\t\t\t\t( { value, icon, label } ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t/>\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</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tconst { allowJustification = true } = layoutBlockSupport;\n\n\t\tif ( ! allowJustification ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<DefaultLayoutJustifyContentControl\n\t\t\t\t\tlayout={ layout }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t);\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst { contentSize, wideSize, justifyContent } = layout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\n\t\t// If a block's block.json skips serialization for spacing or\n\t\t// spacing.blockGap, don't apply the user-defined value to the styles.\n\t\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tconst marginLeft =\n\t\t\tjustifyContent === 'left' ? '0 !important' : 'auto !important';\n\t\tconst marginRight =\n\t\t\tjustifyContent === 'right' ? '0 !important' : 'auto !important';\n\n\t\tlet output =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: ${ marginLeft };\n\t\t\t\t\t\tmargin-right: ${ marginRight };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignwide' ) } {\n\t\t\t\t\t\tmax-width: ${ wideSize ?? contentSize };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmax-width: none;\n\t\t\t\t\t}\n\t\t\t\t`\n\t\t\t\t: '';\n\n\t\tif ( justifyContent === 'left' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-left: ${ marginLeft }; }`;\n\t\t} else if ( justifyContent === 'right' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-right: ${ marginRight }; }`;\n\t\t}\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingRightValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ paddingRightValue } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingLeftValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ paddingLeftValue } * -1);\n\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// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction DefaultLayoutJustifyContentControl( { layout, onChange } ) {\n\tconst { justifyContent = 'center' } = layout;\n\tconst onJustificationChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tjustifyContent: value,\n\t\t} );\n\t};\n\tconst allowedControls = [ 'left', 'center', 'right' ];\n\n\treturn (\n\t\t<JustifyContentControl\n\t\t\tallowedControls={ allowedControls }\n\t\t\tvalue={ justifyContent }\n\t\t\tonChange={ onJustificationChange }\n\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,EAC7B,oCAAoC;AAAA,EACpC,8CAA8C;AAAA,EAC9C,2CAA2C;AAAA,EAC3C,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tIcon,\n\talignNone,\n\tstretchWide,\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n} from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../components/use-settings';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { BlockControls, JustifyContentControl } from '../components';\nimport { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t\tresetLayout = {},\n\t\tclientId,\n\t} ) {\n\t\tconst { wideSize, contentSize, justifyContent = 'center' } = layout;\n\t\tconst {\n\t\t\tallowJustification = true,\n\t\t\tallowCustomContentAndWideSize = true,\n\t\t} = layoutBlockSupport;\n\t\tconst onJustificationChange = ( value ) => {\n\t\t\tonChange( {\n\t\t\t\t...layout,\n\t\t\t\tjustifyContent: value,\n\t\t\t} );\n\t\t};\n\t\tconst justificationOptions = [\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\ticon: justifyLeft,\n\t\t\t\tlabel: __( 'Justify items left' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'center',\n\t\t\t\ticon: justifyCenter,\n\t\t\t\tlabel: __( 'Justify items center' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\ticon: justifyRight,\n\t\t\t\tlabel: __( 'Justify items right' ),\n\t\t\t},\n\t\t];\n\t\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],\n\t\t} );\n\t\tconst hasLayoutValue = ( key, defaultValue ) =>\n\t\t\t( layout?.[ key ] ?? defaultValue ) !==\n\t\t\t( resetLayout?.[ key ] ?? defaultValue );\n\t\tconst resetContentSize = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tcontentSize: resetLayout?.contentSize,\n\t\t\t\t} )\n\t\t\t);\n\t\tconst resetWideSize = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\twideSize: resetLayout?.wideSize,\n\t\t\t\t} )\n\t\t\t);\n\t\tconst resetJustification = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tjustifyContent: resetLayout?.justifyContent,\n\t\t\t\t} )\n\t\t\t);\n\t\tconst hasContentSizeValue = () => hasLayoutValue( 'contentSize' );\n\t\tconst hasWideSizeValue = () => hasLayoutValue( 'wideSize' );\n\t\tconst hasJustificationValue = () =>\n\t\t\thasLayoutValue( 'justifyContent', 'center' );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ allowCustomContentAndWideSize && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tlabel={ __( 'Content width' ) }\n\t\t\t\t\t\t\thasValue={ hasContentSizeValue }\n\t\t\t\t\t\t\tonDeselect={ resetContentSize }\n\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Content width' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\tcontentSize:\n\t\t\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t\t? nextWidth\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ alignNone } />\n\t\t\t\t\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tlabel={ __( 'Wide width' ) }\n\t\t\t\t\t\t\thasValue={ hasWideSizeValue }\n\t\t\t\t\t\t\tonDeselect={ resetWideSize }\n\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Wide width' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\twideSize:\n\t\t\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t\t? nextWidth\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<p className=\"block-editor-hooks__layout-constrained-helptext\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Customize the width for all elements that are assigned to the center or wide columns.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\thasValue={ hasJustificationValue }\n\t\t\t\t\t\tonDeselect={ resetJustification }\n\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\t\tvalue={ justifyContent }\n\t\t\t\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ justificationOptions.map(\n\t\t\t\t\t\t\t\t( { value, icon, label } ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tconst { allowJustification = true } = layoutBlockSupport;\n\n\t\tif ( ! allowJustification ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<DefaultLayoutJustifyContentControl\n\t\t\t\t\tlayout={ layout }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t);\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tviewportOverrides,\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst hasViewportOverrides = viewportOverrides !== undefined;\n\t\tconst effectiveLayout = hasViewportOverrides\n\t\t\t? { ...layout, ...viewportOverrides }\n\t\t\t: layout;\n\t\tconst hasViewportOverride = ( key ) =>\n\t\t\tObject.hasOwn( viewportOverrides || {}, key );\n\t\tconst { contentSize, wideSize, justifyContent } = effectiveLayout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\t\tconst hasBlockGapOverride =\n\t\t\t! hasViewportOverrides ||\n\t\t\tObject.hasOwn( style?.spacing || {}, 'blockGap' );\n\t\tconst hasBlockSpacingOverride =\n\t\t\t! hasViewportOverrides ||\n\t\t\tObject.hasOwn( style?.spacing || {}, 'padding' );\n\n\t\t// If a block's block.json skips serialization for spacing or\n\t\t// spacing.blockGap, don't apply the user-defined value to the styles.\n\t\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tconst marginLeft =\n\t\t\tjustifyContent === 'left' ? '0 !important' : 'auto !important';\n\t\tconst marginRight =\n\t\t\tjustifyContent === 'right' ? '0 !important' : 'auto !important';\n\n\t\tconst hasJustificationOverride =\n\t\t\thasViewportOverrides && hasViewportOverride( 'justifyContent' );\n\t\tconst shouldOutputConstrainedSizes =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasViewportOverride( 'contentSize' ) ||\n\t\t\thasViewportOverride( 'wideSize' );\n\t\tconst constrainedSizeDeclarations = [\n\t\t\t`max-width: ${ contentSize ?? wideSize }`,\n\t\t];\n\t\tif ( ! hasViewportOverrides || hasJustificationOverride ) {\n\t\t\tconstrainedSizeDeclarations.push(\n\t\t\t\t`margin-left: ${ marginLeft }`,\n\t\t\t\t`margin-right: ${ marginRight }`\n\t\t\t);\n\t\t}\n\t\tlet output =\n\t\t\tshouldOutputConstrainedSizes && ( !! contentSize || !! wideSize )\n\t\t\t\t? `\n\t\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\t\tselector,\n\t\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t\t) } {\n\t\t\t\t\t\t${ constrainedSizeDeclarations.join( '; ' ) };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignwide' ) } {\n\t\t\t\t\t\tmax-width: ${ wideSize ?? contentSize };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmax-width: none;\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t: '';\n\n\t\tif ( hasJustificationOverride && ! shouldOutputConstrainedSizes ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t\t{ margin-left: ${ marginLeft }; margin-right: ${ marginRight }; }`;\n\t\t} else if ( ! hasViewportOverrides ) {\n\t\t\tif ( justifyContent === 'left' ) {\n\t\t\t\toutput += `${ appendSelectors(\n\t\t\t\t\tselector,\n\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t) }\n\t\t\t{ margin-left: ${ marginLeft }; }`;\n\t\t\t} else if ( justifyContent === 'right' ) {\n\t\t\t\toutput += `${ appendSelectors(\n\t\t\t\t\tselector,\n\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t) }\n\t\t\t{ margin-right: ${ marginRight }; }`;\n\t\t\t}\n\t\t}\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( hasBlockSpacingOverride && style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingRightValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ paddingRightValue } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingLeftValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ paddingLeftValue } * -1);\n\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// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && hasBlockGapOverride && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction DefaultLayoutJustifyContentControl( { layout, onChange } ) {\n\tconst { justifyContent = 'center' } = layout;\n\tconst onJustificationChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tjustifyContent: value,\n\t\t} );\n\t};\n\tconst allowedControls = [ 'left', 'center', 'right' ];\n\n\treturn (\n\t\t<JustifyContentControl\n\t\t\tallowedControls={ allowedControls }\n\t\t\tvalue={ justifyContent }\n\t\t\tonChange={ onJustificationChange }\n\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|