@wordpress/block-editor 15.22.1 → 16.0.1-next.v.202607070741.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 +27 -0
- package/build/autocompleters/block.cjs +10 -2
- package/build/autocompleters/block.cjs.map +2 -2
- package/build/components/background-image-control/index.cjs +0 -2
- package/build/components/background-image-control/index.cjs.map +2 -2
- package/build/components/block-inspector/edit-contents.cjs +3 -0
- package/build/components/block-inspector/edit-contents.cjs.map +3 -3
- package/build/components/block-inspector/index.cjs +18 -36
- package/build/components/block-inspector/index.cjs.map +2 -2
- package/build/components/block-list/block-invalid-warning.cjs +8 -19
- package/build/components/block-list/block-invalid-warning.cjs.map +2 -2
- package/build/components/block-styles/use-styles-for-block.cjs +2 -1
- package/build/components/block-styles/use-styles-for-block.cjs.map +2 -2
- package/build/components/block-title/use-block-display-title.cjs +7 -2
- package/build/components/block-title/use-block-display-title.cjs.map +2 -2
- package/build/components/block-toolbar/block-toolbar-icon.cjs +10 -14
- package/build/components/block-toolbar/block-toolbar-icon.cjs.map +2 -2
- package/build/components/block-variation-transforms/index.cjs +0 -1
- package/build/components/block-variation-transforms/index.cjs.map +2 -2
- package/build/components/child-layout-control/index.cjs +0 -2
- package/build/components/child-layout-control/index.cjs.map +2 -2
- package/build/components/colors-gradients/control.cjs +5 -5
- package/build/components/colors-gradients/control.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/aspect-ratio-tool.cjs +1 -2
- package/build/components/dimensions-tool/aspect-ratio-tool.cjs.map +2 -2
- package/build/components/dimensions-tool/scale-tool.cjs +0 -1
- package/build/components/dimensions-tool/scale-tool.cjs.map +2 -2
- package/build/components/dimensions-tool/width-height-tool.cjs +2 -4
- package/build/components/dimensions-tool/width-height-tool.cjs.map +2 -2
- package/build/components/font-appearance-control/index.cjs +6 -25
- package/build/components/font-appearance-control/index.cjs.map +3 -3
- package/build/components/font-family/index.cjs +6 -15
- package/build/components/font-family/index.cjs.map +3 -3
- package/build/components/font-sizes/font-size-picker.cjs +1 -2
- package/build/components/font-sizes/font-size-picker.cjs.map +2 -2
- package/build/components/global-styles/border-panel.cjs +0 -1
- package/build/components/global-styles/border-panel.cjs.map +2 -2
- package/build/components/global-styles/dimensions-panel.cjs +0 -3
- package/build/components/global-styles/dimensions-panel.cjs.map +2 -2
- package/build/components/global-styles/typography-panel.cjs +4 -10
- package/build/components/global-styles/typography-panel.cjs.map +2 -2
- package/build/components/height-control/index.cjs +0 -2
- package/build/components/height-control/index.cjs.map +2 -2
- package/build/components/html-element-control/index.cjs +0 -1
- package/build/components/html-element-control/index.cjs.map +2 -2
- package/build/components/image-editor/index.cjs +5 -0
- package/build/components/image-editor/index.cjs.map +3 -3
- package/build/components/image-editor/zoom-dropdown.cjs +0 -1
- package/build/components/image-editor/zoom-dropdown.cjs.map +2 -2
- package/build/components/image-size-control/index.cjs +1 -3
- package/build/components/image-size-control/index.cjs.map +2 -2
- package/build/components/inner-content/index.cjs +107 -0
- package/build/components/inner-content/index.cjs.map +7 -0
- package/build/components/inserter/hooks/use-block-types-state.cjs +10 -2
- package/build/components/inserter/hooks/use-block-types-state.cjs.map +2 -2
- package/build/components/inserter/media-tab/hooks.cjs +34 -6
- package/build/components/inserter/media-tab/hooks.cjs.map +2 -2
- package/build/components/inserter/media-tab/media-list.cjs +3 -1
- package/build/components/inserter/media-tab/media-list.cjs.map +2 -2
- package/build/components/inserter/media-tab/media-panel.cjs +224 -27
- package/build/components/inserter/media-tab/media-panel.cjs.map +3 -3
- package/build/components/inserter/media-tab/media-preview.cjs +32 -17
- package/build/components/inserter/media-tab/media-preview.cjs.map +2 -2
- package/build/components/inserter/media-tab/media-tab.cjs +26 -6
- package/build/components/inserter/media-tab/media-tab.cjs.map +2 -2
- package/build/components/inserter/mobile-tab-navigation.cjs +6 -1
- package/build/components/inserter/mobile-tab-navigation.cjs.map +2 -2
- package/build/components/inserter/no-results.cjs +2 -2
- package/build/components/inserter/no-results.cjs.map +2 -2
- package/build/components/inserter/preview-panel.cjs +2 -1
- package/build/components/inserter/preview-panel.cjs.map +2 -2
- package/build/components/inserter-list-item/index.cjs +8 -2
- package/build/components/inserter-list-item/index.cjs.map +2 -2
- package/build/components/letter-spacing-control/index.cjs +0 -24
- package/build/components/letter-spacing-control/index.cjs.map +3 -3
- package/build/components/line-height-control/index.cjs +7 -22
- package/build/components/line-height-control/index.cjs.map +3 -3
- package/build/components/list-view/block-select-button.cjs +90 -84
- package/build/components/list-view/block-select-button.cjs.map +2 -2
- package/build/components/list-view/block.cjs +51 -20
- package/build/components/list-view/block.cjs.map +2 -2
- package/build/components/list-view/expander.cjs +1 -1
- package/build/components/list-view/expander.cjs.map +2 -2
- package/build/components/list-view/use-list-view-client-ids.cjs +2 -2
- package/build/components/list-view/use-list-view-client-ids.cjs.map +2 -2
- package/build/components/observe-typing/index.cjs +4 -3
- package/build/components/observe-typing/index.cjs.map +2 -2
- package/build/components/preset-input-control/custom-value-controls.cjs +1 -3
- package/build/components/preset-input-control/custom-value-controls.cjs.map +2 -2
- package/build/components/preset-input-control/index.cjs +1 -3
- package/build/components/preset-input-control/index.cjs.map +2 -2
- package/build/components/resolution-tool/index.cjs +1 -2
- package/build/components/resolution-tool/index.cjs.map +2 -2
- package/build/components/text-alignment-control/index.cjs +0 -1
- package/build/components/text-alignment-control/index.cjs.map +2 -2
- package/build/components/text-decoration-control/index.cjs +0 -1
- package/build/components/text-decoration-control/index.cjs.map +2 -2
- package/build/components/text-indent-control/index.cjs +0 -8
- package/build/components/text-indent-control/index.cjs.map +2 -2
- package/build/components/text-transform-control/index.cjs +0 -1
- package/build/components/text-transform-control/index.cjs.map +2 -2
- package/build/components/use-block-display-information/index.cjs +10 -8
- package/build/components/use-block-display-information/index.cjs.map +2 -2
- package/build/components/use-on-block-drop/index.cjs +3 -7
- package/build/components/use-on-block-drop/index.cjs.map +2 -2
- package/build/components/use-resize-canvas/index.cjs +16 -53
- package/build/components/use-resize-canvas/index.cjs.map +3 -3
- package/build/components/writing-mode-control/index.cjs +0 -1
- package/build/components/writing-mode-control/index.cjs.map +2 -2
- package/build/hooks/font-size.cjs +1 -2
- package/build/hooks/font-size.cjs.map +2 -2
- package/build/hooks/layout.cjs +5 -3
- package/build/hooks/layout.cjs.map +2 -2
- package/build/hooks/position.cjs +36 -16
- package/build/hooks/position.cjs.map +2 -2
- package/build/hooks/states.cjs +10 -21
- package/build/hooks/states.cjs.map +2 -2
- package/build/layouts/constrained.cjs +21 -21
- package/build/layouts/constrained.cjs.map +2 -2
- package/build/layouts/flex.cjs +0 -3
- package/build/layouts/flex.cjs.map +2 -2
- package/build/layouts/grid.cjs +51 -9
- package/build/layouts/grid.cjs.map +2 -2
- package/build/private-apis.cjs +4 -2
- package/build/private-apis.cjs.map +3 -3
- package/build/store/actions.cjs.map +2 -2
- package/build/store/private-actions.cjs +16 -0
- package/build/store/private-actions.cjs.map +2 -2
- package/build/store/private-keys.cjs +3 -3
- package/build/store/private-keys.cjs.map +2 -2
- package/build/store/private-selectors.cjs +96 -10
- package/build/store/private-selectors.cjs.map +2 -2
- package/build/store/reducer.cjs +19 -3
- package/build/store/reducer.cjs.map +2 -2
- package/build/store/selectors.cjs +13 -0
- package/build/store/selectors.cjs.map +2 -2
- package/build-module/autocompleters/block.mjs +10 -2
- package/build-module/autocompleters/block.mjs.map +2 -2
- package/build-module/components/background-image-control/index.mjs +0 -2
- package/build-module/components/background-image-control/index.mjs.map +2 -2
- package/build-module/components/block-inspector/edit-contents.mjs +4 -1
- package/build-module/components/block-inspector/edit-contents.mjs.map +2 -2
- package/build-module/components/block-inspector/index.mjs +18 -36
- package/build-module/components/block-inspector/index.mjs.map +2 -2
- package/build-module/components/block-list/block-invalid-warning.mjs +8 -19
- package/build-module/components/block-list/block-invalid-warning.mjs.map +2 -2
- package/build-module/components/block-styles/use-styles-for-block.mjs +2 -1
- package/build-module/components/block-styles/use-styles-for-block.mjs.map +2 -2
- package/build-module/components/block-title/use-block-display-title.mjs +7 -2
- package/build-module/components/block-title/use-block-display-title.mjs.map +2 -2
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs +10 -14
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs.map +2 -2
- package/build-module/components/block-variation-transforms/index.mjs +0 -1
- package/build-module/components/block-variation-transforms/index.mjs.map +2 -2
- package/build-module/components/child-layout-control/index.mjs +0 -2
- package/build-module/components/child-layout-control/index.mjs.map +2 -2
- package/build-module/components/colors-gradients/control.mjs +5 -5
- package/build-module/components/colors-gradients/control.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/aspect-ratio-tool.mjs +1 -2
- package/build-module/components/dimensions-tool/aspect-ratio-tool.mjs.map +2 -2
- package/build-module/components/dimensions-tool/scale-tool.mjs +0 -1
- package/build-module/components/dimensions-tool/scale-tool.mjs.map +2 -2
- package/build-module/components/dimensions-tool/width-height-tool.mjs +2 -4
- package/build-module/components/dimensions-tool/width-height-tool.mjs.map +2 -2
- package/build-module/components/font-appearance-control/index.mjs +6 -15
- package/build-module/components/font-appearance-control/index.mjs.map +2 -2
- package/build-module/components/font-family/index.mjs +6 -15
- package/build-module/components/font-family/index.mjs.map +2 -2
- package/build-module/components/font-sizes/font-size-picker.mjs +1 -2
- package/build-module/components/font-sizes/font-size-picker.mjs.map +2 -2
- package/build-module/components/global-styles/border-panel.mjs +0 -1
- package/build-module/components/global-styles/border-panel.mjs.map +2 -2
- package/build-module/components/global-styles/dimensions-panel.mjs +0 -3
- package/build-module/components/global-styles/dimensions-panel.mjs.map +2 -2
- package/build-module/components/global-styles/typography-panel.mjs +4 -10
- package/build-module/components/global-styles/typography-panel.mjs.map +2 -2
- package/build-module/components/height-control/index.mjs +0 -2
- package/build-module/components/height-control/index.mjs.map +2 -2
- package/build-module/components/html-element-control/index.mjs +0 -1
- package/build-module/components/html-element-control/index.mjs.map +2 -2
- package/build-module/components/image-editor/index.mjs +5 -0
- package/build-module/components/image-editor/index.mjs.map +2 -2
- package/build-module/components/image-editor/zoom-dropdown.mjs +0 -1
- package/build-module/components/image-editor/zoom-dropdown.mjs.map +2 -2
- package/build-module/components/image-size-control/index.mjs +1 -3
- package/build-module/components/image-size-control/index.mjs.map +2 -2
- package/build-module/components/inner-content/index.mjs +82 -0
- package/build-module/components/inner-content/index.mjs.map +7 -0
- package/build-module/components/inserter/hooks/use-block-types-state.mjs +10 -2
- package/build-module/components/inserter/hooks/use-block-types-state.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/hooks.mjs +33 -6
- package/build-module/components/inserter/media-tab/hooks.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/media-list.mjs +3 -1
- package/build-module/components/inserter/media-tab/media-list.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/media-panel.mjs +227 -30
- package/build-module/components/inserter/media-tab/media-panel.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/media-preview.mjs +33 -18
- package/build-module/components/inserter/media-tab/media-preview.mjs.map +2 -2
- package/build-module/components/inserter/media-tab/media-tab.mjs +27 -7
- package/build-module/components/inserter/media-tab/media-tab.mjs.map +2 -2
- package/build-module/components/inserter/mobile-tab-navigation.mjs +6 -1
- package/build-module/components/inserter/mobile-tab-navigation.mjs.map +2 -2
- package/build-module/components/inserter/no-results.mjs +2 -2
- package/build-module/components/inserter/no-results.mjs.map +2 -2
- package/build-module/components/inserter/preview-panel.mjs +2 -1
- package/build-module/components/inserter/preview-panel.mjs.map +2 -2
- package/build-module/components/inserter-list-item/index.mjs +8 -2
- package/build-module/components/inserter-list-item/index.mjs.map +2 -2
- package/build-module/components/letter-spacing-control/index.mjs +0 -14
- package/build-module/components/letter-spacing-control/index.mjs.map +2 -2
- package/build-module/components/line-height-control/index.mjs +7 -12
- package/build-module/components/line-height-control/index.mjs.map +2 -2
- package/build-module/components/list-view/block-select-button.mjs +90 -84
- package/build-module/components/list-view/block-select-button.mjs.map +2 -2
- package/build-module/components/list-view/block.mjs +51 -20
- package/build-module/components/list-view/block.mjs.map +2 -2
- package/build-module/components/list-view/expander.mjs +1 -1
- package/build-module/components/list-view/expander.mjs.map +2 -2
- package/build-module/components/list-view/use-list-view-client-ids.mjs +2 -2
- package/build-module/components/list-view/use-list-view-client-ids.mjs.map +2 -2
- package/build-module/components/observe-typing/index.mjs +4 -3
- package/build-module/components/observe-typing/index.mjs.map +2 -2
- package/build-module/components/preset-input-control/custom-value-controls.mjs +1 -3
- package/build-module/components/preset-input-control/custom-value-controls.mjs.map +2 -2
- package/build-module/components/preset-input-control/index.mjs +1 -3
- package/build-module/components/preset-input-control/index.mjs.map +2 -2
- package/build-module/components/resolution-tool/index.mjs +1 -2
- package/build-module/components/resolution-tool/index.mjs.map +2 -2
- package/build-module/components/text-alignment-control/index.mjs +0 -1
- package/build-module/components/text-alignment-control/index.mjs.map +2 -2
- package/build-module/components/text-decoration-control/index.mjs +0 -1
- package/build-module/components/text-decoration-control/index.mjs.map +2 -2
- package/build-module/components/text-indent-control/index.mjs +0 -8
- package/build-module/components/text-indent-control/index.mjs.map +2 -2
- package/build-module/components/text-transform-control/index.mjs +0 -1
- package/build-module/components/text-transform-control/index.mjs.map +2 -2
- package/build-module/components/use-block-display-information/index.mjs +10 -8
- package/build-module/components/use-block-display-information/index.mjs.map +2 -2
- package/build-module/components/use-on-block-drop/index.mjs +4 -7
- package/build-module/components/use-on-block-drop/index.mjs.map +2 -2
- package/build-module/components/use-resize-canvas/index.mjs +6 -53
- package/build-module/components/use-resize-canvas/index.mjs.map +2 -2
- package/build-module/components/writing-mode-control/index.mjs +0 -1
- package/build-module/components/writing-mode-control/index.mjs.map +2 -2
- package/build-module/hooks/font-size.mjs +1 -2
- package/build-module/hooks/font-size.mjs.map +2 -2
- package/build-module/hooks/layout.mjs +4 -3
- package/build-module/hooks/layout.mjs.map +2 -2
- package/build-module/hooks/position.mjs +38 -18
- package/build-module/hooks/position.mjs.map +2 -2
- package/build-module/hooks/states.mjs +10 -21
- package/build-module/hooks/states.mjs.map +2 -2
- package/build-module/layouts/constrained.mjs +21 -21
- package/build-module/layouts/constrained.mjs.map +2 -2
- package/build-module/layouts/flex.mjs +0 -3
- package/build-module/layouts/flex.mjs.map +2 -2
- package/build-module/layouts/grid.mjs +52 -9
- package/build-module/layouts/grid.mjs.map +2 -2
- package/build-module/private-apis.mjs +5 -3
- package/build-module/private-apis.mjs.map +2 -2
- package/build-module/store/actions.mjs.map +2 -2
- package/build-module/store/private-actions.mjs +14 -0
- package/build-module/store/private-actions.mjs.map +2 -2
- package/build-module/store/private-keys.mjs +2 -2
- package/build-module/store/private-keys.mjs.map +2 -2
- package/build-module/store/private-selectors.mjs +93 -10
- package/build-module/store/private-selectors.mjs.map +2 -2
- package/build-module/store/reducer.mjs +17 -3
- package/build-module/store/reducer.mjs.map +2 -2
- package/build-module/store/selectors.mjs +13 -0
- package/build-module/store/selectors.mjs.map +2 -2
- package/build-style/content-rtl.css +11 -5
- package/build-style/content.css +11 -5
- package/build-style/style-rtl.css +113 -3
- package/build-style/style.css +113 -3
- package/package.json +43 -41
- package/src/autocompleters/block.js +10 -3
- package/src/autocompleters/test/block.js +53 -0
- package/src/components/background-image-control/index.js +0 -2
- package/src/components/block-inspector/edit-contents.js +5 -1
- package/src/components/block-inspector/index.js +25 -44
- package/src/components/block-list/block-invalid-warning.js +8 -19
- package/src/components/block-patterns-list/stories/index.story.jsx +1 -1
- package/src/components/block-styles/use-styles-for-block.js +1 -0
- package/src/components/block-title/use-block-display-title.js +7 -2
- package/src/components/block-toolbar/block-toolbar-icon.js +11 -16
- package/src/components/block-toolbar/test/block-toolbar-icon.js +32 -9
- package/src/components/block-variation-transforms/index.js +0 -1
- package/src/components/child-layout-control/index.js +0 -2
- package/src/components/color-palette/test/__snapshots__/control.js.snap +11 -106
- package/src/components/colors-gradients/control.js +4 -4
- package/src/components/colors-gradients/style.scss +2 -2
- package/src/components/date-format-picker/index.js +0 -1
- package/src/components/dimensions-tool/aspect-ratio-tool.js +0 -1
- package/src/components/dimensions-tool/scale-tool.js +0 -1
- package/src/components/dimensions-tool/width-height-tool.js +0 -2
- package/src/components/font-appearance-control/index.js +6 -19
- package/src/components/font-family/README.md +0 -9
- package/src/components/font-family/index.js +6 -19
- package/src/components/font-family/stories/index.story.jsx +0 -1
- package/src/components/font-sizes/font-size-picker.js +0 -1
- package/src/components/global-styles/border-panel.js +0 -1
- package/src/components/global-styles/dimensions-panel.js +0 -3
- package/src/components/global-styles/typography-panel.js +0 -6
- package/src/components/height-control/index.js +0 -2
- package/src/components/html-element-control/index.js +0 -1
- package/src/components/iframe/content.scss +3 -3
- package/src/components/image-editor/index.js +22 -0
- package/src/components/image-editor/zoom-dropdown.js +0 -1
- package/src/components/image-size-control/index.js +0 -2
- package/src/components/inner-content/index.js +119 -0
- package/src/components/inner-content/test/index.js +81 -0
- package/src/components/inserter/hooks/use-block-types-state.js +10 -2
- package/src/components/inserter/media-tab/hooks.js +59 -9
- package/src/components/inserter/media-tab/media-list.js +2 -0
- package/src/components/inserter/media-tab/media-panel.js +256 -17
- package/src/components/inserter/media-tab/media-preview.js +34 -17
- package/src/components/inserter/media-tab/media-tab.js +20 -2
- package/src/components/inserter/media-tab/test/hooks.js +204 -0
- package/src/components/inserter/mobile-tab-navigation.js +6 -1
- package/src/components/inserter/no-results.js +2 -2
- package/src/components/inserter/preview-panel.js +1 -0
- package/src/components/inserter/style.scss +110 -1
- package/src/components/inserter-list-item/index.js +8 -2
- package/src/components/letter-spacing-control/README.md +0 -8
- package/src/components/letter-spacing-control/index.js +5 -23
- package/src/components/letter-spacing-control/stories/index.story.jsx +0 -12
- package/src/components/line-height-control/README.md +0 -8
- package/src/components/line-height-control/index.js +7 -16
- package/src/components/line-height-control/stories/index.story.jsx +0 -1
- package/src/components/line-height-control/test/index.js +1 -7
- package/src/components/link-picker/test/index.js +3 -1
- package/src/components/list-view/block-select-button.js +5 -1
- package/src/components/list-view/block.js +57 -20
- package/src/components/list-view/expander.js +5 -1
- package/src/components/list-view/style.scss +19 -0
- package/src/components/list-view/use-list-view-client-ids.js +2 -2
- package/src/components/observe-typing/index.js +9 -4
- package/src/components/preset-input-control/custom-value-controls.js +0 -2
- package/src/components/preset-input-control/index.js +0 -2
- package/src/components/resolution-tool/index.js +0 -1
- package/src/components/responsive-block-control/test/index.js +1 -5
- package/src/components/text-alignment-control/index.js +0 -1
- package/src/components/text-decoration-control/index.js +0 -1
- package/src/components/text-indent-control/index.js +7 -16
- package/src/components/text-transform-control/index.js +0 -1
- package/src/components/use-block-display-information/index.js +9 -13
- package/src/components/use-block-display-information/test/index.js +47 -9
- package/src/components/use-on-block-drop/index.js +4 -7
- package/src/components/use-resize-canvas/index.js +10 -71
- package/src/components/writing-mode-control/index.js +0 -1
- package/src/hooks/block-hooks.scss +15 -0
- package/src/hooks/font-size.js +0 -1
- package/src/hooks/layout.js +5 -4
- package/src/hooks/position.js +44 -23
- package/src/hooks/states.js +24 -26
- package/src/hooks/test/cross-origin-isolation.js +0 -4
- package/src/hooks/test/layout.js +75 -1
- package/src/layouts/constrained.js +51 -28
- package/src/layouts/flex.js +0 -3
- package/src/layouts/grid.js +59 -7
- package/src/layouts/test/constrained.js +91 -0
- package/src/layouts/test/grid.js +71 -0
- package/src/private-apis.js +4 -2
- package/src/store/actions.js +1 -0
- package/src/store/private-actions.js +31 -0
- package/src/store/private-keys.js +1 -1
- package/src/store/private-selectors.js +184 -11
- package/src/store/reducer.js +37 -2
- package/src/store/selectors.js +41 -0
- package/src/store/test/private-selectors.js +436 -10
- package/src/store/test/reducer.js +41 -13
- package/src/store/test/selectors.js +133 -0
- package/src/style.scss +1 -0
- package/src/components/use-resize-canvas/README.md +0 -37
|
@@ -34,6 +34,8 @@ var import_components2 = require("../components/index.cjs");
|
|
|
34
34
|
var import_utils2 = require("../hooks/utils.cjs");
|
|
35
35
|
var import_definitions = require("./definitions.cjs");
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var GLOBAL_CONTENT_SIZE = "var(--wp--style--global--content-size, none)";
|
|
38
|
+
var GLOBAL_WIDE_SIZE = "var(--wp--style--global--wide-size, none)";
|
|
37
39
|
var constrained_default = {
|
|
38
40
|
name: "constrained",
|
|
39
41
|
label: (0, import_i18n.__)("Constrained"),
|
|
@@ -110,18 +112,15 @@ var constrained_default = {
|
|
|
110
112
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
113
|
import_components.__experimentalUnitControl,
|
|
112
114
|
{
|
|
113
|
-
__next40pxDefaultSize: true,
|
|
114
115
|
label: (0, import_i18n.__)("Content width"),
|
|
115
116
|
labelPosition: "top",
|
|
116
|
-
value: contentSize || wideSize || "",
|
|
117
|
+
value: contentSize === null ? "" : contentSize || wideSize || "",
|
|
117
118
|
onChange: (nextWidth) => {
|
|
118
119
|
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
|
|
119
|
-
onChange(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
})
|
|
124
|
-
);
|
|
120
|
+
onChange({
|
|
121
|
+
...layout,
|
|
122
|
+
contentSize: nextWidth !== "" ? nextWidth : void 0
|
|
123
|
+
});
|
|
125
124
|
},
|
|
126
125
|
units,
|
|
127
126
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.alignNone }) })
|
|
@@ -140,18 +139,15 @@ var constrained_default = {
|
|
|
140
139
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
140
|
import_components.__experimentalUnitControl,
|
|
142
141
|
{
|
|
143
|
-
__next40pxDefaultSize: true,
|
|
144
142
|
label: (0, import_i18n.__)("Wide width"),
|
|
145
143
|
labelPosition: "top",
|
|
146
|
-
value: wideSize || contentSize || "",
|
|
144
|
+
value: wideSize === null ? "" : wideSize || contentSize || "",
|
|
147
145
|
onChange: (nextWidth) => {
|
|
148
146
|
nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
|
|
149
|
-
onChange(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
})
|
|
154
|
-
);
|
|
147
|
+
onChange({
|
|
148
|
+
...layout,
|
|
149
|
+
wideSize: nextWidth !== "" ? nextWidth : void 0
|
|
150
|
+
});
|
|
155
151
|
},
|
|
156
152
|
units,
|
|
157
153
|
prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.stretchWide }) })
|
|
@@ -174,7 +170,6 @@ var constrained_default = {
|
|
|
174
170
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
171
|
import_components.__experimentalToggleGroupControl,
|
|
176
172
|
{
|
|
177
|
-
__next40pxDefaultSize: true,
|
|
178
173
|
label: (0, import_i18n.__)("Justification"),
|
|
179
174
|
value: justifyContent,
|
|
180
175
|
onChange: onJustificationChange,
|
|
@@ -241,9 +236,14 @@ var constrained_default = {
|
|
|
241
236
|
const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
|
|
242
237
|
const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
|
|
243
238
|
const hasJustificationOverride = hasViewportOverrides && hasViewportOverride("justifyContent");
|
|
244
|
-
const
|
|
239
|
+
const hasContentSizeOverride = hasViewportOverrides && hasViewportOverride("contentSize");
|
|
240
|
+
const hasWideSizeOverride = hasViewportOverrides && hasViewportOverride("wideSize");
|
|
241
|
+
const shouldOutputConstrainedSizes = !hasViewportOverrides || hasContentSizeOverride || hasWideSizeOverride;
|
|
242
|
+
const isResettingConstrainedSizes = hasViewportOverrides && (hasContentSizeOverride && !contentSize || hasWideSizeOverride && !wideSize);
|
|
243
|
+
const contentMaxWidth = contentSize || (wideSize && !hasContentSizeOverride ? wideSize : GLOBAL_CONTENT_SIZE);
|
|
244
|
+
const wideMaxWidth = wideSize || (contentSize && !hasWideSizeOverride ? contentSize : GLOBAL_WIDE_SIZE);
|
|
245
245
|
const constrainedSizeDeclarations = [
|
|
246
|
-
`max-width: ${
|
|
246
|
+
`max-width: ${contentMaxWidth}`
|
|
247
247
|
];
|
|
248
248
|
if (!hasViewportOverrides || hasJustificationOverride) {
|
|
249
249
|
constrainedSizeDeclarations.push(
|
|
@@ -251,7 +251,7 @@ var constrained_default = {
|
|
|
251
251
|
`margin-right: ${marginRight}`
|
|
252
252
|
);
|
|
253
253
|
}
|
|
254
|
-
let output = shouldOutputConstrainedSizes && (!!contentSize || !!wideSize) ? `
|
|
254
|
+
let output = shouldOutputConstrainedSizes && (!!contentSize || !!wideSize || isResettingConstrainedSizes) ? `
|
|
255
255
|
${(0, import_utils.appendSelectors)(
|
|
256
256
|
selector,
|
|
257
257
|
"> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
|
|
@@ -259,7 +259,7 @@ var constrained_default = {
|
|
|
259
259
|
${constrainedSizeDeclarations.join("; ")};
|
|
260
260
|
}
|
|
261
261
|
${(0, import_utils.appendSelectors)(selector, "> .alignwide")} {
|
|
262
|
-
max-width: ${
|
|
262
|
+
max-width: ${wideMaxWidth};
|
|
263
263
|
}
|
|
264
264
|
${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
|
|
265
265
|
max-width: none;
|
|
@@ -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__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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAOO;AACP,kBAAmB;AACnB,mBAOO;AACP,0BAA4B;AAK5B,0BAA4B;AAC5B,mBAAmE;AACnE,iBAA+B;AAC/B,IAAAA,qBAAqD;AACrD,IAAAC,gBAA0D;AAC1D,yBAAmC;
|
|
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\nconst GLOBAL_CONTENT_SIZE = 'var(--wp--style--global--content-size, none)';\nconst GLOBAL_WIDE_SIZE = 'var(--wp--style--global--wide-size, none)';\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\tlabel={ __( 'Content width' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tcontentSize === null\n\t\t\t\t\t\t\t\t\t\t? ''\n\t\t\t\t\t\t\t\t\t\t: contentSize || wideSize || ''\n\t\t\t\t\t\t\t\t}\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\t...layout,\n\t\t\t\t\t\t\t\t\t\tcontentSize:\n\t\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\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: undefined,\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\tlabel={ __( 'Wide width' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\twideSize === null\n\t\t\t\t\t\t\t\t\t\t? ''\n\t\t\t\t\t\t\t\t\t\t: wideSize || contentSize || ''\n\t\t\t\t\t\t\t\t}\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\t...layout,\n\t\t\t\t\t\t\t\t\t\twideSize:\n\t\t\t\t\t\t\t\t\t\t\tnextWidth !== ''\n\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: undefined,\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\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 hasContentSizeOverride =\n\t\t\thasViewportOverrides && hasViewportOverride( 'contentSize' );\n\t\tconst hasWideSizeOverride =\n\t\t\thasViewportOverrides && hasViewportOverride( 'wideSize' );\n\t\tconst shouldOutputConstrainedSizes =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasContentSizeOverride ||\n\t\t\thasWideSizeOverride;\n\t\tconst isResettingConstrainedSizes =\n\t\t\thasViewportOverrides &&\n\t\t\t( ( hasContentSizeOverride && ! contentSize ) ||\n\t\t\t\t( hasWideSizeOverride && ! wideSize ) );\n\t\tconst contentMaxWidth =\n\t\t\tcontentSize ||\n\t\t\t( wideSize && ! hasContentSizeOverride\n\t\t\t\t? wideSize\n\t\t\t\t: GLOBAL_CONTENT_SIZE );\n\t\tconst wideMaxWidth =\n\t\t\twideSize ||\n\t\t\t( contentSize && ! hasWideSizeOverride\n\t\t\t\t? contentSize\n\t\t\t\t: GLOBAL_WIDE_SIZE );\n\t\tconst constrainedSizeDeclarations = [\n\t\t\t`max-width: ${ contentMaxWidth }`,\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 &&\n\t\t\t( !! contentSize || !! wideSize || isResettingConstrainedSizes )\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: ${ wideMaxWidth };\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": ["import_components", "import_utils", "useCustomUnits", "ToolsPanelItem", "UnitControl", "InputControlPrefixWrapper", "ToggleGroupControl", "ToggleGroupControlOptionIcon"]
|
|
7
7
|
}
|
package/build/layouts/flex.cjs
CHANGED
|
@@ -359,7 +359,6 @@ function FlexLayoutVerticalAlignmentControl({
|
|
|
359
359
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
360
360
|
import_components.__experimentalToggleGroupControl,
|
|
361
361
|
{
|
|
362
|
-
__next40pxDefaultSize: true,
|
|
363
362
|
label: (0, import_i18n.__)("Alignment"),
|
|
364
363
|
onChange: onVerticalAlignmentChange,
|
|
365
364
|
value: verticalAlignment,
|
|
@@ -444,7 +443,6 @@ function FlexLayoutJustifyContentControl({
|
|
|
444
443
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
445
444
|
import_components.__experimentalToggleGroupControl,
|
|
446
445
|
{
|
|
447
|
-
__next40pxDefaultSize: true,
|
|
448
446
|
label: (0, import_i18n.__)("Justification"),
|
|
449
447
|
value: justifyContent,
|
|
450
448
|
onChange: onJustificationChange,
|
|
@@ -488,7 +486,6 @@ function OrientationControl({ layout, onChange }) {
|
|
|
488
486
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
489
487
|
import_components.__experimentalToggleGroupControl,
|
|
490
488
|
{
|
|
491
|
-
__next40pxDefaultSize: true,
|
|
492
489
|
className: "block-editor-hooks__flex-layout-orientation-controls",
|
|
493
490
|
label: (0, import_i18n.__)("Orientation"),
|
|
494
491
|
value: orientation,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/layouts/flex.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n\tjustifySpaceBetween,\n\tjustifyStretch,\n\tjustifyTop,\n\tjustifyCenterVertical,\n\tjustifyBottom,\n\tjustifyStretchVertical,\n\tjustifySpaceBetweenVertical,\n\tarrowRight,\n\tarrowDown,\n} from '@wordpress/icons';\nimport {\n\tFlex,\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';\nimport { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';\nimport {\n\tBlockControls,\n\tJustifyContentControl,\n\tBlockVerticalAlignmentControl,\n} from '../components';\nimport { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\n// Used with the default, horizontal flex orientation.\nconst justifyContentMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\t'space-between': 'space-between',\n};\n\n// Used with the vertical (column) flex orientation.\nconst alignItemsMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\tstretch: 'stretch',\n};\n\nconst verticalAlignmentMap = {\n\ttop: 'flex-start',\n\tcenter: 'center',\n\tbottom: 'flex-end',\n\tstretch: 'stretch',\n\t'space-between': 'space-between',\n};\n\nconst defaultAlignments = {\n\thorizontal: 'center',\n\tvertical: 'top',\n};\n\nconst verticalAlignmentOptions = {\n\ttop: {\n\t\ticon: justifyTop,\n\t\tlabel: _x( 'Align top', 'Block vertical alignment setting' ),\n\t},\n\tcenter: {\n\t\ticon: justifyCenterVertical,\n\t\tlabel: _x( 'Align middle', 'Block vertical alignment setting' ),\n\t},\n\tbottom: {\n\t\ticon: justifyBottom,\n\t\tlabel: _x( 'Align bottom', 'Block vertical alignment setting' ),\n\t},\n\tstretch: {\n\t\ticon: justifyStretchVertical,\n\t\tlabel: _x( 'Stretch to fill', 'Block vertical alignment setting' ),\n\t},\n\t'space-between': {\n\t\ticon: justifySpaceBetweenVertical,\n\t\tlabel: _x( 'Space between', 'Block vertical alignment setting' ),\n\t},\n};\n\nconst flexWrapOptions = [ 'wrap', 'nowrap' ];\n\nexport default {\n\tname: 'flex',\n\tlabel: __( 'Flex' ),\n\tinspectorControls: function FlexLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t\tresetLayout = {},\n\t\tclientId,\n\t} ) {\n\t\tconst {\n\t\t\tallowOrientation = true,\n\t\t\tallowJustification = true,\n\t\t\tallowVerticalAlignment = true,\n\t\t\tallowWrap = true,\n\t\t} = layoutBlockSupport;\n\t\tconst hasLayoutValue = ( key, defaultValue ) =>\n\t\t\t( layout?.[ key ] ?? defaultValue ) !==\n\t\t\t( resetLayout?.[ key ] ?? defaultValue );\n\t\tconst hasJustificationValue = () =>\n\t\t\thasLayoutValue( 'justifyContent', 'left' );\n\t\tconst hasVerticalAlignmentValue = () =>\n\t\t\thasLayoutValue(\n\t\t\t\t'verticalAlignment',\n\t\t\t\tgetDefaultVerticalAlignment( layout )\n\t\t\t);\n\t\tconst hasOrientationValue = () =>\n\t\t\thasLayoutValue( 'orientation', 'horizontal' );\n\t\tconst hasWrapValue = () => hasLayoutValue( 'flexWrap', 'wrap' );\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 resetVerticalAlignment = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tverticalAlignment: getCompatibleVerticalAlignment(\n\t\t\t\t\t\tresetLayout?.verticalAlignment,\n\t\t\t\t\t\tlayout?.orientation\n\t\t\t\t\t),\n\t\t\t\t} )\n\t\t\t);\n\t\tconst resetOrientation = () => {\n\t\t\tconst { verticalAlignment, justifyContent } = layout;\n\t\t\tconst nextOrientation = resetLayout?.orientation;\n\t\t\tconst isHorizontal =\n\t\t\t\t! nextOrientation || nextOrientation === 'horizontal';\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\torientation: nextOrientation,\n\t\t\t\t\tverticalAlignment:\n\t\t\t\t\t\tresetLayout?.verticalAlignment ??\n\t\t\t\t\t\t( isHorizontal && verticalAlignment === 'space-between'\n\t\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t\t: verticalAlignment ),\n\t\t\t\t\tjustifyContent:\n\t\t\t\t\t\tresetLayout?.justifyContent ??\n\t\t\t\t\t\t( isHorizontal && justifyContent === 'stretch'\n\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t: justifyContent ),\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\t\tconst resetWrap = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: resetLayout?.flexWrap,\n\t\t\t\t} )\n\t\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ ( allowJustification || allowOrientation ) && (\n\t\t\t\t\t<Flex\n\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\tclassName=\"block-editor-hooks__flex-layout-controls\"\n\t\t\t\t\t\tgap={ 4 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ allowJustification && (\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\t\t\thasValue={ hasJustificationValue }\n\t\t\t\t\t\t\t\tonDeselect={ resetJustification }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ allowOrientation && (\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\t\t\t\t\t\thasValue={ hasOrientationValue }\n\t\t\t\t\t\t\t\tonDeselect={ resetOrientation }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OrientationControl\n\t\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t\t{ allowVerticalAlignment && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Alignment' ) }\n\t\t\t\t\t\thasValue={ hasVerticalAlignmentValue }\n\t\t\t\t\t\tonDeselect={ resetVerticalAlignment }\n\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexLayoutVerticalAlignmentControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ allowWrap && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Wrapping' ) }\n\t\t\t\t\t\thasValue={ hasWrapValue }\n\t\t\t\t\t\tonDeselect={ resetWrap }\n\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexWrapControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function FlexLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tconst { allowVerticalAlignment = true, allowJustification = true } =\n\t\t\tlayoutBlockSupport;\n\n\t\tif ( ! allowJustification && ! allowVerticalAlignment ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisToolbar\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ allowVerticalAlignment && (\n\t\t\t\t\t<FlexLayoutVerticalAlignmentControl\n\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisToolbar\n\t\t\t\t\t/>\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\tglobalBlockGapValue,\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 { orientation = 'horizontal' } = effectiveLayout;\n\n\t\t// Determine the fallback gap value using global styles (theme.json),\n\t\t// falling back to '0.5em' for backwards compatibility.\n\t\tlet fallbackGapValue = '0.5em';\n\t\tif ( globalBlockGapValue ) {\n\t\t\tconst gapBox =\n\t\t\t\tgetGapBoxControlValueFromStyle( globalBlockGapValue );\n\t\t\tfallbackGapValue =\n\t\t\t\tgetSpacingPresetCssVar( gapBox?.left ) ||\n\t\t\t\tgetSpacingPresetCssVar( gapBox?.top ) ||\n\t\t\t\t'0.5em';\n\t\t}\n\n\t\t// If a block's block.json skips serialization for spacing or spacing.blockGap,\n\t\t// don't apply the user-defined value to the styles.\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue )\n\t\t\t\t: undefined;\n\t\tconst hasBlockGapOverride =\n\t\t\t! hasViewportOverrides ||\n\t\t\tObject.hasOwn( style?.spacing || {}, 'blockGap' );\n\t\tconst justifyContent =\n\t\t\tjustifyContentMap[ effectiveLayout.justifyContent ];\n\t\tconst flexWrap = flexWrapOptions.includes( effectiveLayout.flexWrap )\n\t\t\t? effectiveLayout.flexWrap\n\t\t\t: 'wrap';\n\t\tconst verticalAlignment =\n\t\t\tverticalAlignmentMap[ effectiveLayout.verticalAlignment ];\n\t\tconst alignItems =\n\t\t\talignItemsMap[ effectiveLayout.justifyContent ] ||\n\t\t\talignItemsMap.left;\n\n\t\tlet output = '';\n\t\tconst rules = [];\n\n\t\tconst shouldOutputFlexWrap =\n\t\t\t! hasViewportOverrides || hasViewportOverride( 'flexWrap' );\n\t\tconst shouldOutputFlexOrientation =\n\t\t\t! hasViewportOverrides || hasViewportOverride( 'orientation' );\n\t\tconst shouldOutputFlexJustification =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasViewportOverride( 'justifyContent' ) ||\n\t\t\thasViewportOverride( 'orientation' );\n\t\tconst shouldOutputFlexAlignment =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasViewportOverride( 'verticalAlignment' ) ||\n\t\t\thasViewportOverride( 'orientation' );\n\n\t\tif ( shouldOutputFlexWrap && flexWrap && flexWrap !== 'wrap' ) {\n\t\t\trules.push( `flex-wrap: ${ flexWrap }` );\n\t\t}\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tif ( shouldOutputFlexAlignment && verticalAlignment ) {\n\t\t\t\trules.push( `align-items: ${ verticalAlignment }` );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexJustification && justifyContent ) {\n\t\t\t\trules.push( `justify-content: ${ justifyContent }` );\n\t\t\t}\n\t\t} else {\n\t\t\tif ( shouldOutputFlexAlignment && verticalAlignment ) {\n\t\t\t\trules.push( `justify-content: ${ verticalAlignment }` );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexOrientation ) {\n\t\t\t\trules.push( 'flex-direction: column' );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexJustification ) {\n\t\t\t\trules.push( `align-items: ${ alignItems }` );\n\t\t\t}\n\t\t}\n\n\t\tif ( rules.length ) {\n\t\t\toutput = `${ appendSelectors( selector ) } {\n\t\t\t\t${ rules.join( '; ' ) };\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'flex',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation( layout ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\treturn orientation;\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\nfunction getDefaultVerticalAlignment( { orientation = 'horizontal' } = {} ) {\n\treturn orientation === 'horizontal'\n\t\t? defaultAlignments.horizontal\n\t\t: defaultAlignments.vertical;\n}\n\nfunction getCompatibleVerticalAlignment( verticalAlignment, orientation ) {\n\tif (\n\t\t( orientation === 'horizontal' &&\n\t\t\tverticalAlignment === 'space-between' ) ||\n\t\t( orientation === 'vertical' && verticalAlignment === 'stretch' )\n\t) {\n\t\treturn undefined;\n\t}\n\n\treturn verticalAlignment;\n}\n\nfunction getVerticalAlignmentControls( orientation ) {\n\treturn orientation === 'horizontal'\n\t\t? [ 'top', 'center', 'bottom', 'stretch' ]\n\t\t: [ 'top', 'center', 'bottom', 'space-between' ];\n}\n\nfunction FlexLayoutVerticalAlignmentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { orientation = 'horizontal' } = layout;\n\n\tconst { verticalAlignment = getDefaultVerticalAlignment( layout ) } =\n\t\tlayout;\n\n\tconst onVerticalAlignmentChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tverticalAlignment: value,\n\t\t} );\n\t};\n\tconst controls = getVerticalAlignmentControls( orientation );\n\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<BlockVerticalAlignmentControl\n\t\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\t\tvalue={ verticalAlignment }\n\t\t\t\tcontrols={ controls }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Alignment' ) }\n\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\tvalue={ verticalAlignment }\n\t\t\tclassName=\"block-editor-hooks__flex-layout-alignment-controls\"\n\t\t>\n\t\t\t{ controls.map( ( control ) => {\n\t\t\t\tconst { icon, label } = verticalAlignmentOptions[ control ];\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ control }\n\t\t\t\t\t\tvalue={ control }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction FlexLayoutJustifyContentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { justifyContent = 'left', orientation = 'horizontal' } = 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\tif ( orientation === 'horizontal' ) {\n\t\tallowedControls.push( 'space-between' );\n\t} else {\n\t\tallowedControls.push( 'stretch' );\n\t}\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<JustifyContentControl\n\t\t\t\tallowedControls={ allowedControls }\n\t\t\t\tvalue={ justifyContent }\n\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst justificationOptions = [\n\t\t{\n\t\t\tvalue: 'left',\n\t\t\ticon: justifyLeft,\n\t\t\tlabel: __( 'Justify items left' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'center',\n\t\t\ticon: justifyCenter,\n\t\t\tlabel: __( 'Justify items center' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'right',\n\t\t\ticon: justifyRight,\n\t\t\tlabel: __( 'Justify items right' ),\n\t\t},\n\t];\n\tif ( orientation === 'horizontal' ) {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'space-between',\n\t\t\ticon: justifySpaceBetween,\n\t\t\tlabel: __( 'Space between items' ),\n\t\t} );\n\t} else {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'stretch',\n\t\t\ticon: justifyStretch,\n\t\t\tlabel: __( 'Stretch items' ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Justification' ) }\n\t\t\tvalue={ justifyContent }\n\t\t\tonChange={ onJustificationChange }\n\t\t\tclassName=\"block-editor-hooks__flex-layout-justification-controls\"\n\t\t>\n\t\t\t{ justificationOptions.map( ( { value, icon, label } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction FlexWrapControl( { layout, onChange } ) {\n\tconst { flexWrap = 'wrap' } = layout;\n\treturn (\n\t\t<ToggleControl\n\t\t\tlabel={ __( 'Allow to wrap to multiple lines' ) }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: value ? 'wrap' : 'nowrap',\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tchecked={ flexWrap === 'wrap' }\n\t\t/>\n\t);\n}\n\nfunction OrientationControl( { layout, onChange } ) {\n\tconst {\n\t\torientation = 'horizontal',\n\t\tverticalAlignment,\n\t\tjustifyContent,\n\t} = layout;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-hooks__flex-layout-orientation-controls\"\n\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\tvalue={ orientation }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\t// Make sure the vertical alignment and justification are compatible with the new orientation.\n\t\t\t\tlet newVerticalAlignment = verticalAlignment;\n\t\t\t\tlet newJustification = justifyContent;\n\t\t\t\tif ( value === 'horizontal' ) {\n\t\t\t\t\tif ( verticalAlignment === 'space-between' ) {\n\t\t\t\t\t\tnewVerticalAlignment = 'center';\n\t\t\t\t\t}\n\t\t\t\t\tif ( justifyContent === 'stretch' ) {\n\t\t\t\t\t\tnewJustification = 'left';\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif ( verticalAlignment === 'stretch' ) {\n\t\t\t\t\t\tnewVerticalAlignment = 'top';\n\t\t\t\t\t}\n\t\t\t\t\tif ( justifyContent === 'space-between' ) {\n\t\t\t\t\t\tnewJustification = 'left';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn onChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\torientation: value,\n\t\t\t\t\tverticalAlignment: newVerticalAlignment,\n\t\t\t\t\tjustifyContent: newJustification,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\ticon={ arrowRight }\n\t\t\t\tvalue=\"horizontal\"\n\t\t\t\tlabel={ __( 'Horizontal' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\ticon={ arrowDown }\n\t\t\t\tvalue=\"vertical\"\n\t\t\t\tlabel={ __( 'Vertical' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n\tjustifySpaceBetween,\n\tjustifyStretch,\n\tjustifyTop,\n\tjustifyCenterVertical,\n\tjustifyBottom,\n\tjustifyStretchVertical,\n\tjustifySpaceBetweenVertical,\n\tarrowRight,\n\tarrowDown,\n} from '@wordpress/icons';\nimport {\n\tFlex,\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';\nimport { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';\nimport {\n\tBlockControls,\n\tJustifyContentControl,\n\tBlockVerticalAlignmentControl,\n} from '../components';\nimport { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\n// Used with the default, horizontal flex orientation.\nconst justifyContentMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\t'space-between': 'space-between',\n};\n\n// Used with the vertical (column) flex orientation.\nconst alignItemsMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\tstretch: 'stretch',\n};\n\nconst verticalAlignmentMap = {\n\ttop: 'flex-start',\n\tcenter: 'center',\n\tbottom: 'flex-end',\n\tstretch: 'stretch',\n\t'space-between': 'space-between',\n};\n\nconst defaultAlignments = {\n\thorizontal: 'center',\n\tvertical: 'top',\n};\n\nconst verticalAlignmentOptions = {\n\ttop: {\n\t\ticon: justifyTop,\n\t\tlabel: _x( 'Align top', 'Block vertical alignment setting' ),\n\t},\n\tcenter: {\n\t\ticon: justifyCenterVertical,\n\t\tlabel: _x( 'Align middle', 'Block vertical alignment setting' ),\n\t},\n\tbottom: {\n\t\ticon: justifyBottom,\n\t\tlabel: _x( 'Align bottom', 'Block vertical alignment setting' ),\n\t},\n\tstretch: {\n\t\ticon: justifyStretchVertical,\n\t\tlabel: _x( 'Stretch to fill', 'Block vertical alignment setting' ),\n\t},\n\t'space-between': {\n\t\ticon: justifySpaceBetweenVertical,\n\t\tlabel: _x( 'Space between', 'Block vertical alignment setting' ),\n\t},\n};\n\nconst flexWrapOptions = [ 'wrap', 'nowrap' ];\n\nexport default {\n\tname: 'flex',\n\tlabel: __( 'Flex' ),\n\tinspectorControls: function FlexLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t\tresetLayout = {},\n\t\tclientId,\n\t} ) {\n\t\tconst {\n\t\t\tallowOrientation = true,\n\t\t\tallowJustification = true,\n\t\t\tallowVerticalAlignment = true,\n\t\t\tallowWrap = true,\n\t\t} = layoutBlockSupport;\n\t\tconst hasLayoutValue = ( key, defaultValue ) =>\n\t\t\t( layout?.[ key ] ?? defaultValue ) !==\n\t\t\t( resetLayout?.[ key ] ?? defaultValue );\n\t\tconst hasJustificationValue = () =>\n\t\t\thasLayoutValue( 'justifyContent', 'left' );\n\t\tconst hasVerticalAlignmentValue = () =>\n\t\t\thasLayoutValue(\n\t\t\t\t'verticalAlignment',\n\t\t\t\tgetDefaultVerticalAlignment( layout )\n\t\t\t);\n\t\tconst hasOrientationValue = () =>\n\t\t\thasLayoutValue( 'orientation', 'horizontal' );\n\t\tconst hasWrapValue = () => hasLayoutValue( 'flexWrap', 'wrap' );\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 resetVerticalAlignment = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tverticalAlignment: getCompatibleVerticalAlignment(\n\t\t\t\t\t\tresetLayout?.verticalAlignment,\n\t\t\t\t\t\tlayout?.orientation\n\t\t\t\t\t),\n\t\t\t\t} )\n\t\t\t);\n\t\tconst resetOrientation = () => {\n\t\t\tconst { verticalAlignment, justifyContent } = layout;\n\t\t\tconst nextOrientation = resetLayout?.orientation;\n\t\t\tconst isHorizontal =\n\t\t\t\t! nextOrientation || nextOrientation === 'horizontal';\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\torientation: nextOrientation,\n\t\t\t\t\tverticalAlignment:\n\t\t\t\t\t\tresetLayout?.verticalAlignment ??\n\t\t\t\t\t\t( isHorizontal && verticalAlignment === 'space-between'\n\t\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t\t: verticalAlignment ),\n\t\t\t\t\tjustifyContent:\n\t\t\t\t\t\tresetLayout?.justifyContent ??\n\t\t\t\t\t\t( isHorizontal && justifyContent === 'stretch'\n\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t: justifyContent ),\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\t\tconst resetWrap = () =>\n\t\t\tonChange(\n\t\t\t\tcleanEmptyObject( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: resetLayout?.flexWrap,\n\t\t\t\t} )\n\t\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ ( allowJustification || allowOrientation ) && (\n\t\t\t\t\t<Flex\n\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\tclassName=\"block-editor-hooks__flex-layout-controls\"\n\t\t\t\t\t\tgap={ 4 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ allowJustification && (\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\t\t\thasValue={ hasJustificationValue }\n\t\t\t\t\t\t\t\tonDeselect={ resetJustification }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ allowOrientation && (\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\t\t\t\t\t\thasValue={ hasOrientationValue }\n\t\t\t\t\t\t\t\tonDeselect={ resetOrientation }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OrientationControl\n\t\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t\t{ allowVerticalAlignment && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Alignment' ) }\n\t\t\t\t\t\thasValue={ hasVerticalAlignmentValue }\n\t\t\t\t\t\tonDeselect={ resetVerticalAlignment }\n\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexLayoutVerticalAlignmentControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ allowWrap && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Wrapping' ) }\n\t\t\t\t\t\thasValue={ hasWrapValue }\n\t\t\t\t\t\tonDeselect={ resetWrap }\n\t\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexWrapControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function FlexLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tconst { allowVerticalAlignment = true, allowJustification = true } =\n\t\t\tlayoutBlockSupport;\n\n\t\tif ( ! allowJustification && ! allowVerticalAlignment ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisToolbar\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ allowVerticalAlignment && (\n\t\t\t\t\t<FlexLayoutVerticalAlignmentControl\n\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisToolbar\n\t\t\t\t\t/>\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\tglobalBlockGapValue,\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 { orientation = 'horizontal' } = effectiveLayout;\n\n\t\t// Determine the fallback gap value using global styles (theme.json),\n\t\t// falling back to '0.5em' for backwards compatibility.\n\t\tlet fallbackGapValue = '0.5em';\n\t\tif ( globalBlockGapValue ) {\n\t\t\tconst gapBox =\n\t\t\t\tgetGapBoxControlValueFromStyle( globalBlockGapValue );\n\t\t\tfallbackGapValue =\n\t\t\t\tgetSpacingPresetCssVar( gapBox?.left ) ||\n\t\t\t\tgetSpacingPresetCssVar( gapBox?.top ) ||\n\t\t\t\t'0.5em';\n\t\t}\n\n\t\t// If a block's block.json skips serialization for spacing or spacing.blockGap,\n\t\t// don't apply the user-defined value to the styles.\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? getGapCSSValue( style?.spacing?.blockGap, fallbackGapValue )\n\t\t\t\t: undefined;\n\t\tconst hasBlockGapOverride =\n\t\t\t! hasViewportOverrides ||\n\t\t\tObject.hasOwn( style?.spacing || {}, 'blockGap' );\n\t\tconst justifyContent =\n\t\t\tjustifyContentMap[ effectiveLayout.justifyContent ];\n\t\tconst flexWrap = flexWrapOptions.includes( effectiveLayout.flexWrap )\n\t\t\t? effectiveLayout.flexWrap\n\t\t\t: 'wrap';\n\t\tconst verticalAlignment =\n\t\t\tverticalAlignmentMap[ effectiveLayout.verticalAlignment ];\n\t\tconst alignItems =\n\t\t\talignItemsMap[ effectiveLayout.justifyContent ] ||\n\t\t\talignItemsMap.left;\n\n\t\tlet output = '';\n\t\tconst rules = [];\n\n\t\tconst shouldOutputFlexWrap =\n\t\t\t! hasViewportOverrides || hasViewportOverride( 'flexWrap' );\n\t\tconst shouldOutputFlexOrientation =\n\t\t\t! hasViewportOverrides || hasViewportOverride( 'orientation' );\n\t\tconst shouldOutputFlexJustification =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasViewportOverride( 'justifyContent' ) ||\n\t\t\thasViewportOverride( 'orientation' );\n\t\tconst shouldOutputFlexAlignment =\n\t\t\t! hasViewportOverrides ||\n\t\t\thasViewportOverride( 'verticalAlignment' ) ||\n\t\t\thasViewportOverride( 'orientation' );\n\n\t\tif ( shouldOutputFlexWrap && flexWrap && flexWrap !== 'wrap' ) {\n\t\t\trules.push( `flex-wrap: ${ flexWrap }` );\n\t\t}\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tif ( shouldOutputFlexAlignment && verticalAlignment ) {\n\t\t\t\trules.push( `align-items: ${ verticalAlignment }` );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexJustification && justifyContent ) {\n\t\t\t\trules.push( `justify-content: ${ justifyContent }` );\n\t\t\t}\n\t\t} else {\n\t\t\tif ( shouldOutputFlexAlignment && verticalAlignment ) {\n\t\t\t\trules.push( `justify-content: ${ verticalAlignment }` );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexOrientation ) {\n\t\t\t\trules.push( 'flex-direction: column' );\n\t\t\t}\n\t\t\tif ( shouldOutputFlexJustification ) {\n\t\t\t\trules.push( `align-items: ${ alignItems }` );\n\t\t\t}\n\t\t}\n\n\t\tif ( rules.length ) {\n\t\t\toutput = `${ appendSelectors( selector ) } {\n\t\t\t\t${ rules.join( '; ' ) };\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'flex',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation( layout ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\treturn orientation;\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\nfunction getDefaultVerticalAlignment( { orientation = 'horizontal' } = {} ) {\n\treturn orientation === 'horizontal'\n\t\t? defaultAlignments.horizontal\n\t\t: defaultAlignments.vertical;\n}\n\nfunction getCompatibleVerticalAlignment( verticalAlignment, orientation ) {\n\tif (\n\t\t( orientation === 'horizontal' &&\n\t\t\tverticalAlignment === 'space-between' ) ||\n\t\t( orientation === 'vertical' && verticalAlignment === 'stretch' )\n\t) {\n\t\treturn undefined;\n\t}\n\n\treturn verticalAlignment;\n}\n\nfunction getVerticalAlignmentControls( orientation ) {\n\treturn orientation === 'horizontal'\n\t\t? [ 'top', 'center', 'bottom', 'stretch' ]\n\t\t: [ 'top', 'center', 'bottom', 'space-between' ];\n}\n\nfunction FlexLayoutVerticalAlignmentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { orientation = 'horizontal' } = layout;\n\n\tconst { verticalAlignment = getDefaultVerticalAlignment( layout ) } =\n\t\tlayout;\n\n\tconst onVerticalAlignmentChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tverticalAlignment: value,\n\t\t} );\n\t};\n\tconst controls = getVerticalAlignmentControls( orientation );\n\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<BlockVerticalAlignmentControl\n\t\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\t\tvalue={ verticalAlignment }\n\t\t\t\tcontrols={ controls }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tlabel={ __( 'Alignment' ) }\n\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\tvalue={ verticalAlignment }\n\t\t\tclassName=\"block-editor-hooks__flex-layout-alignment-controls\"\n\t\t>\n\t\t\t{ controls.map( ( control ) => {\n\t\t\t\tconst { icon, label } = verticalAlignmentOptions[ control ];\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ control }\n\t\t\t\t\t\tvalue={ control }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction FlexLayoutJustifyContentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { justifyContent = 'left', orientation = 'horizontal' } = 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\tif ( orientation === 'horizontal' ) {\n\t\tallowedControls.push( 'space-between' );\n\t} else {\n\t\tallowedControls.push( 'stretch' );\n\t}\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<JustifyContentControl\n\t\t\t\tallowedControls={ allowedControls }\n\t\t\t\tvalue={ justifyContent }\n\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst justificationOptions = [\n\t\t{\n\t\t\tvalue: 'left',\n\t\t\ticon: justifyLeft,\n\t\t\tlabel: __( 'Justify items left' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'center',\n\t\t\ticon: justifyCenter,\n\t\t\tlabel: __( 'Justify items center' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'right',\n\t\t\ticon: justifyRight,\n\t\t\tlabel: __( 'Justify items right' ),\n\t\t},\n\t];\n\tif ( orientation === 'horizontal' ) {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'space-between',\n\t\t\ticon: justifySpaceBetween,\n\t\t\tlabel: __( 'Space between items' ),\n\t\t} );\n\t} else {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'stretch',\n\t\t\ticon: justifyStretch,\n\t\t\tlabel: __( 'Stretch items' ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tlabel={ __( 'Justification' ) }\n\t\t\tvalue={ justifyContent }\n\t\t\tonChange={ onJustificationChange }\n\t\t\tclassName=\"block-editor-hooks__flex-layout-justification-controls\"\n\t\t>\n\t\t\t{ justificationOptions.map( ( { value, icon, label } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction FlexWrapControl( { layout, onChange } ) {\n\tconst { flexWrap = 'wrap' } = layout;\n\treturn (\n\t\t<ToggleControl\n\t\t\tlabel={ __( 'Allow to wrap to multiple lines' ) }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: value ? 'wrap' : 'nowrap',\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tchecked={ flexWrap === 'wrap' }\n\t\t/>\n\t);\n}\n\nfunction OrientationControl( { layout, onChange } ) {\n\tconst {\n\t\torientation = 'horizontal',\n\t\tverticalAlignment,\n\t\tjustifyContent,\n\t} = layout;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"block-editor-hooks__flex-layout-orientation-controls\"\n\t\t\tlabel={ __( 'Orientation' ) }\n\t\t\tvalue={ orientation }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\t// Make sure the vertical alignment and justification are compatible with the new orientation.\n\t\t\t\tlet newVerticalAlignment = verticalAlignment;\n\t\t\t\tlet newJustification = justifyContent;\n\t\t\t\tif ( value === 'horizontal' ) {\n\t\t\t\t\tif ( verticalAlignment === 'space-between' ) {\n\t\t\t\t\t\tnewVerticalAlignment = 'center';\n\t\t\t\t\t}\n\t\t\t\t\tif ( justifyContent === 'stretch' ) {\n\t\t\t\t\t\tnewJustification = 'left';\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif ( verticalAlignment === 'stretch' ) {\n\t\t\t\t\t\tnewVerticalAlignment = 'top';\n\t\t\t\t\t}\n\t\t\t\t\tif ( justifyContent === 'space-between' ) {\n\t\t\t\t\t\tnewJustification = 'left';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn onChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\torientation: value,\n\t\t\t\t\tverticalAlignment: newVerticalAlignment,\n\t\t\t\t\tjustifyContent: newJustification,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\ticon={ arrowRight }\n\t\t\t\tvalue=\"horizontal\"\n\t\t\t\tlabel={ __( 'Horizontal' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\ticon={ arrowDown }\n\t\t\t\tvalue=\"vertical\"\n\t\t\t\tlabel={ __( 'Vertical' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuB;AACvB,mBAaO;AACP,wBAMO;AAKP,mBAAgD;AAChD,iBAA+D;AAC/D,IAAAA,gBAAuC;AACvC,IAAAC,qBAIO;AACP,IAAAD,gBAA0D;AAC1D,yBAAmC;AAqIhC;AAlIH,IAAM,oBAAoB;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAClB;AAGA,IAAM,gBAAgB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACV;AAEA,IAAM,uBAAuB;AAAA,EAC5B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,iBAAiB;AAClB;AAEA,IAAM,oBAAoB;AAAA,EACzB,YAAY;AAAA,EACZ,UAAU;AACX;AAEA,IAAM,2BAA2B;AAAA,EAChC,KAAK;AAAA,IACJ,MAAM;AAAA,IACN,WAAO,gBAAI,aAAa,kCAAmC;AAAA,EAC5D;AAAA,EACA,QAAQ;AAAA,IACP,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAgB,kCAAmC;AAAA,EAC/D;AAAA,EACA,QAAQ;AAAA,IACP,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAgB,kCAAmC;AAAA,EAC/D;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAO,gBAAI,mBAAmB,kCAAmC;AAAA,EAClE;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,IACN,WAAO,gBAAI,iBAAiB,kCAAmC;AAAA,EAChE;AACD;AAEA,IAAM,kBAAkB,CAAE,QAAQ,QAAS;AAE3C,IAAO,eAAQ;AAAA,EACd,MAAM;AAAA,EACN,WAAO,gBAAI,MAAO;AAAA,EAClB,mBAAmB,SAAS,4BAA6B;AAAA,IACxD,SAAS,CAAC;AAAA,IACV;AAAA,IACA,qBAAqB,CAAC;AAAA,IACtB,cAAc,CAAC;AAAA,IACf;AAAA,EACD,GAAI;AACH,UAAM;AAAA,MACL,mBAAmB;AAAA,MACnB,qBAAqB;AAAA,MACrB,yBAAyB;AAAA,MACzB,YAAY;AAAA,IACb,IAAI;AACJ,UAAM,iBAAiB,CAAE,KAAK,kBAC3B,SAAU,GAAI,KAAK,mBACnB,cAAe,GAAI,KAAK;AAC3B,UAAM,wBAAwB,MAC7B,eAAgB,kBAAkB,MAAO;AAC1C,UAAM,4BAA4B,MACjC;AAAA,MACC;AAAA,MACA,4BAA6B,MAAO;AAAA,IACrC;AACD,UAAM,sBAAsB,MAC3B,eAAgB,eAAe,YAAa;AAC7C,UAAM,eAAe,MAAM,eAAgB,YAAY,MAAO;AAC9D,UAAM,qBAAqB,MAC1B;AAAA,UACC,gCAAkB;AAAA,QACjB,GAAG;AAAA,QACH,gBAAgB,aAAa;AAAA,MAC9B,CAAE;AAAA,IACH;AACD,UAAM,yBAAyB,MAC9B;AAAA,UACC,gCAAkB;AAAA,QACjB,GAAG;AAAA,QACH,mBAAmB;AAAA,UAClB,aAAa;AAAA,UACb,QAAQ;AAAA,QACT;AAAA,MACD,CAAE;AAAA,IACH;AACD,UAAM,mBAAmB,MAAM;AAC9B,YAAM,EAAE,mBAAmB,eAAe,IAAI;AAC9C,YAAM,kBAAkB,aAAa;AACrC,YAAM,eACL,CAAE,mBAAmB,oBAAoB;AAC1C;AAAA,YACC,gCAAkB;AAAA,UACjB,GAAG;AAAA,UACH,aAAa;AAAA,UACb,mBACC,aAAa,sBACX,gBAAgB,sBAAsB,kBACrC,WACA;AAAA,UACJ,gBACC,aAAa,mBACX,gBAAgB,mBAAmB,YAClC,SACA;AAAA,QACL,CAAE;AAAA,MACH;AAAA,IACD;AACA,UAAM,YAAY,MACjB;AAAA,UACC,gCAAkB;AAAA,QACjB,GAAG;AAAA,QACH,UAAU,aAAa;AAAA,MACxB,CAAE;AAAA,IACH;AAED,WACC,4EACK;AAAA,6BAAsB,qBACzB;AAAA,QAAC;AAAA;AAAA,UACA,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAM;AAAA,UACN,SAAQ;AAAA,UAEN;AAAA,kCACD;AAAA,cAAC,kBAAAE;AAAA,cAAA;AAAA,gBACA,WAAQ,gBAAI,eAAgB;AAAA,gBAC5B,UAAW;AAAA,gBACX,YAAa;AAAA,gBACb,kBAAgB;AAAA,gBAChB,SAAU;AAAA,gBAEV;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,gBACD;AAAA;AAAA,YACD;AAAA,YAEC,oBACD;AAAA,cAAC,kBAAAA;AAAA,cAAA;AAAA,gBACA,WAAQ,gBAAI,aAAc;AAAA,gBAC1B,UAAW;AAAA,gBACX,YAAa;AAAA,gBACb,kBAAgB;AAAA,gBAChB,SAAU;AAAA,gBAEV;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,gBACD;AAAA;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA,MAEC,0BACD;AAAA,QAAC,kBAAAA;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,WAAY;AAAA,UACxB,UAAW;AAAA,UACX,YAAa;AAAA,UACb,SAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA,MAEC,aACD;AAAA,QAAC,kBAAAA;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,UAAW;AAAA,UACvB,UAAW;AAAA,UACX,YAAa;AAAA,UACb,SAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,EAEF;AAAA,EACA,iBAAiB,SAAS,0BAA2B;AAAA,IACpD,SAAS,CAAC;AAAA,IACV;AAAA,IACA;AAAA,EACD,GAAI;AACH,UAAM,EAAE,yBAAyB,MAAM,qBAAqB,KAAK,IAChE;AAED,QAAK,CAAE,sBAAsB,CAAE,wBAAyB;AACvD,aAAO;AAAA,IACR;AAEA,WACC,6CAAC,oCAAc,OAAM,SAAQ,oCAAkC,MAC5D;AAAA,4BACD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAS;AAAA;AAAA,MACV;AAAA,MAEC,0BACD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAS;AAAA;AAAA,MACV;AAAA,OAEF;AAAA,EAEF;AAAA,EACA,gBAAgB,SAAS,eAAgB;AAAA,IACxC;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,EACrB,GAAI;AACH,UAAM,uBAAuB,sBAAsB;AACnD,UAAM,kBAAkB,uBACrB,EAAE,GAAG,QAAQ,GAAG,kBAAkB,IAClC;AACH,UAAM,sBAAsB,CAAE,QAC7B,OAAO,OAAQ,qBAAqB,CAAC,GAAG,GAAI;AAC7C,UAAM,EAAE,cAAc,aAAa,IAAI;AAIvC,QAAI,mBAAmB;AACvB,QAAK,qBAAsB;AAC1B,YAAM,aACL,2CAAgC,mBAAoB;AACrD,6BACC,sCAAwB,QAAQ,IAAK,SACrC,sCAAwB,QAAQ,GAAI,KACpC;AAAA,IACF;AAIA,UAAM,gBACL,OAAO,SAAS,YAChB,KAAE,uCAAyB,WAAW,WAAW,UAAW,QACzD,2BAAgB,OAAO,SAAS,UAAU,gBAAiB,IAC3D;AACJ,UAAM,sBACL,CAAE,wBACF,OAAO,OAAQ,OAAO,WAAW,CAAC,GAAG,UAAW;AACjD,UAAM,iBACL,kBAAmB,gBAAgB,cAAe;AACnD,UAAM,WAAW,gBAAgB,SAAU,gBAAgB,QAAS,IACjE,gBAAgB,WAChB;AACH,UAAM,oBACL,qBAAsB,gBAAgB,iBAAkB;AACzD,UAAM,aACL,cAAe,gBAAgB,cAAe,KAC9C,cAAc;AAEf,QAAI,SAAS;AACb,UAAM,QAAQ,CAAC;AAEf,UAAM,uBACL,CAAE,wBAAwB,oBAAqB,UAAW;AAC3D,UAAM,8BACL,CAAE,wBAAwB,oBAAqB,aAAc;AAC9D,UAAM,gCACL,CAAE,wBACF,oBAAqB,gBAAiB,KACtC,oBAAqB,aAAc;AACpC,UAAM,4BACL,CAAE,wBACF,oBAAqB,mBAAoB,KACzC,oBAAqB,aAAc;AAEpC,QAAK,wBAAwB,YAAY,aAAa,QAAS;AAC9D,YAAM,KAAM,cAAe,QAAS,EAAG;AAAA,IACxC;AAEA,QAAK,gBAAgB,cAAe;AACnC,UAAK,6BAA6B,mBAAoB;AACrD,cAAM,KAAM,gBAAiB,iBAAkB,EAAG;AAAA,MACnD;AACA,UAAK,iCAAiC,gBAAiB;AACtD,cAAM,KAAM,oBAAqB,cAAe,EAAG;AAAA,MACpD;AAAA,IACD,OAAO;AACN,UAAK,6BAA6B,mBAAoB;AACrD,cAAM,KAAM,oBAAqB,iBAAkB,EAAG;AAAA,MACvD;AACA,UAAK,6BAA8B;AAClC,cAAM,KAAM,wBAAyB;AAAA,MACtC;AACA,UAAK,+BAAgC;AACpC,cAAM,KAAM,gBAAiB,UAAW,EAAG;AAAA,MAC5C;AAAA,IACD;AAEA,QAAK,MAAM,QAAS;AACnB,eAAS,OAAI,8BAAiB,QAAS,CAAE;AAAA,MACrC,MAAM,KAAM,IAAK,CAAE;AAAA;AAAA,IAExB;AAGA,QAAK,sBAAsB,uBAAuB,eAAgB;AACjE,oBAAU;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,EACR;AAAA,EACA,eAAgB,QAAS;AACxB,UAAM,EAAE,cAAc,aAAa,IAAI;AACvC,WAAO;AAAA,EACR;AAAA,EACA,gBAAgB;AACf,WAAO,CAAC;AAAA,EACT;AACD;AAEA,SAAS,4BAA6B,EAAE,cAAc,aAAa,IAAI,CAAC,GAAI;AAC3E,SAAO,gBAAgB,eACpB,kBAAkB,aAClB,kBAAkB;AACtB;AAEA,SAAS,+BAAgC,mBAAmB,aAAc;AACzE,MACG,gBAAgB,gBACjB,sBAAsB,mBACrB,gBAAgB,cAAc,sBAAsB,WACrD;AACD,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AAEA,SAAS,6BAA8B,aAAc;AACpD,SAAO,gBAAgB,eACpB,CAAE,OAAO,UAAU,UAAU,SAAU,IACvC,CAAE,OAAO,UAAU,UAAU,eAAgB;AACjD;AAEA,SAAS,mCAAoC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,YAAY;AACb,GAAI;AACH,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,EAAE,oBAAoB,4BAA6B,MAAO,EAAE,IACjE;AAED,QAAM,4BAA4B,CAAE,UAAW;AAC9C,aAAU;AAAA,MACT,GAAG;AAAA,MACH,mBAAmB;AAAA,IACpB,CAAE;AAAA,EACH;AACA,QAAM,WAAW,6BAA8B,WAAY;AAE3D,MAAK,WAAY;AAChB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,UAAW;AAAA,QACX,OAAQ;AAAA,QACR;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,WAAY;AAAA,MACxB,UAAW;AAAA,MACX,OAAQ;AAAA,MACR,WAAU;AAAA,MAER,mBAAS,IAAK,CAAE,YAAa;AAC9B,cAAM,EAAE,MAAM,MAAM,IAAI,yBAA0B,OAAQ;AAC1D,eACC;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YAEA,OAAQ;AAAA,YACR;AAAA,YACA;AAAA;AAAA,UAHM;AAAA,QAIP;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;AAEA,IAAM,gBAAgB;AAAA,EACrB,WAAW;AACZ;AAEA,SAAS,gCAAiC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,YAAY;AACb,GAAI;AACH,QAAM,EAAE,iBAAiB,QAAQ,cAAc,aAAa,IAAI;AAChE,QAAM,wBAAwB,CAAE,UAAW;AAC1C,aAAU;AAAA,MACT,GAAG;AAAA,MACH,gBAAgB;AAAA,IACjB,CAAE;AAAA,EACH;AACA,QAAM,kBAAkB,CAAE,QAAQ,UAAU,OAAQ;AACpD,MAAK,gBAAgB,cAAe;AACnC,oBAAgB,KAAM,eAAgB;AAAA,EACvC,OAAO;AACN,oBAAgB,KAAM,SAAU;AAAA,EACjC;AACA,MAAK,WAAY;AAChB,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,OAAQ;AAAA,QACR,UAAW;AAAA,QACX,cAAe;AAAA;AAAA,IAChB;AAAA,EAEF;AAEA,QAAM,uBAAuB;AAAA,IAC5B;AAAA,MACC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAO,gBAAI,oBAAqB;AAAA,IACjC;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAO,gBAAI,sBAAuB;AAAA,IACnC;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAO,gBAAI,qBAAsB;AAAA,IAClC;AAAA,EACD;AACA,MAAK,gBAAgB,cAAe;AACnC,yBAAqB,KAAM;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAO,gBAAI,qBAAsB;AAAA,IAClC,CAAE;AAAA,EACH,OAAO;AACN,yBAAqB,KAAM;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,WAAO,gBAAI,eAAgB;AAAA,IAC5B,CAAE;AAAA,EACH;AAEA,SACC;AAAA,IAAC,kBAAAD;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,eAAgB;AAAA,MAC5B,OAAQ;AAAA,MACR,UAAW;AAAA,MACX,WAAU;AAAA,MAER,+BAAqB,IAAK,CAAE,EAAE,OAAO,MAAM,MAAM,MAAO;AACzD,eACC;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YAEA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHM;AAAA,QAIP;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;AAEA,SAAS,gBAAiB,EAAE,QAAQ,SAAS,GAAI;AAChD,QAAM,EAAE,WAAW,OAAO,IAAI;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAQ,gBAAI,iCAAkC;AAAA,MAC9C,UAAW,CAAE,UAAW;AACvB,iBAAU;AAAA,UACT,GAAG;AAAA,UACH,UAAU,QAAQ,SAAS;AAAA,QAC5B,CAAE;AAAA,MACH;AAAA,MACA,SAAU,aAAa;AAAA;AAAA,EACxB;AAEF;AAEA,SAAS,mBAAoB,EAAE,QAAQ,SAAS,GAAI;AACnD,QAAM;AAAA,IACL,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACD,IAAI;AACJ,SACC;AAAA,IAAC,kBAAAD;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,aAAc;AAAA,MAC1B,OAAQ;AAAA,MACR,UAAW,CAAE,UAAW;AAEvB,YAAI,uBAAuB;AAC3B,YAAI,mBAAmB;AACvB,YAAK,UAAU,cAAe;AAC7B,cAAK,sBAAsB,iBAAkB;AAC5C,mCAAuB;AAAA,UACxB;AACA,cAAK,mBAAmB,WAAY;AACnC,+BAAmB;AAAA,UACpB;AAAA,QACD,OAAO;AACN,cAAK,sBAAsB,WAAY;AACtC,mCAAuB;AAAA,UACxB;AACA,cAAK,mBAAmB,iBAAkB;AACzC,+BAAmB;AAAA,UACpB;AAAA,QACD;AACA,eAAO,SAAU;AAAA,UAChB,GAAG;AAAA,UACH,aAAa;AAAA,UACb,mBAAmB;AAAA,UACnB,gBAAgB;AAAA,QACjB,CAAE;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,MAAO;AAAA,YACP,OAAM;AAAA,YACN,WAAQ,gBAAI,YAAa;AAAA;AAAA,QAC1B;AAAA,QACA;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YACA,MAAO;AAAA,YACP,OAAM;AAAA,YACN,WAAQ,gBAAI,UAAW;AAAA;AAAA,QACxB;AAAA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": ["import_utils", "import_components", "ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOptionIcon"]
|
|
7
7
|
}
|
package/build/layouts/grid.cjs
CHANGED
|
@@ -80,11 +80,13 @@ var grid_default = {
|
|
|
80
80
|
const { allowSizingOnChildren = false } = layoutBlockSupport;
|
|
81
81
|
const showColumnsControl = true;
|
|
82
82
|
const showMinWidthControl = !layout?.isManualPlacement || window.__experimentalEnableGridInteractivity;
|
|
83
|
+
const showFillControl = !layout?.isManualPlacement;
|
|
83
84
|
const defaultColumnCount = layout.isManualPlacement ? 3 : void 0;
|
|
84
85
|
const hasLayoutValue = (key, defaultValue) => (layout?.[key] ?? defaultValue) !== (resetLayout?.[key] ?? defaultValue);
|
|
85
86
|
const hasGridTypeValue = () => hasLayoutValue("isManualPlacement", false);
|
|
86
87
|
const hasColumnsAndRowsValue = () => hasLayoutValue("columnCount", defaultColumnCount) || hasLayoutValue("rowCount");
|
|
87
88
|
const hasMinimumColumnWidthValue = () => hasLayoutValue("minimumColumnWidth");
|
|
89
|
+
const hasFillValue = () => hasLayoutValue("autoFit", false);
|
|
88
90
|
const resetGridType = () => onChange(
|
|
89
91
|
(0, import_utils3.cleanEmptyObject)({
|
|
90
92
|
...layout,
|
|
@@ -106,6 +108,12 @@ var grid_default = {
|
|
|
106
108
|
minimumColumnWidth: resetLayout?.minimumColumnWidth
|
|
107
109
|
})
|
|
108
110
|
);
|
|
111
|
+
const resetFill = () => onChange(
|
|
112
|
+
(0, import_utils3.cleanEmptyObject)({
|
|
113
|
+
...layout,
|
|
114
|
+
autoFit: resetLayout?.autoFit
|
|
115
|
+
})
|
|
116
|
+
);
|
|
109
117
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
110
118
|
window.__experimentalEnableGridInteractivity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
119
|
import_components.__experimentalToolsPanelItem,
|
|
@@ -158,6 +166,22 @@ var grid_default = {
|
|
|
158
166
|
}
|
|
159
167
|
)
|
|
160
168
|
}
|
|
169
|
+
),
|
|
170
|
+
showFillControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
|
+
import_components.__experimentalToolsPanelItem,
|
|
172
|
+
{
|
|
173
|
+
label: (0, import_i18n.__)("Fill available space"),
|
|
174
|
+
hasValue: hasFillValue,
|
|
175
|
+
onDeselect: resetFill,
|
|
176
|
+
panelId: clientId,
|
|
177
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
|
+
GridLayoutFillControl,
|
|
179
|
+
{
|
|
180
|
+
layout,
|
|
181
|
+
onChange
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
}
|
|
161
185
|
)
|
|
162
186
|
] });
|
|
163
187
|
},
|
|
@@ -180,8 +204,10 @@ var grid_default = {
|
|
|
180
204
|
const {
|
|
181
205
|
minimumColumnWidth = null,
|
|
182
206
|
columnCount = null,
|
|
183
|
-
rowCount = null
|
|
207
|
+
rowCount = null,
|
|
208
|
+
autoFit = false
|
|
184
209
|
} = effectiveLayout;
|
|
210
|
+
const autoPlacement = autoFit ? "auto-fit" : "auto-fill";
|
|
185
211
|
if (process.env.NODE_ENV === "development") {
|
|
186
212
|
if (minimumColumnWidth && typeof minimumColumnWidth !== "string") {
|
|
187
213
|
throw new Error("minimumColumnWidth must be a string");
|
|
@@ -192,6 +218,9 @@ var grid_default = {
|
|
|
192
218
|
if (rowCount && typeof rowCount !== "number") {
|
|
193
219
|
throw new Error("rowCount must be a number");
|
|
194
220
|
}
|
|
221
|
+
if (autoFit && typeof autoFit !== "boolean") {
|
|
222
|
+
throw new Error("autoFit must be a boolean");
|
|
223
|
+
}
|
|
195
224
|
}
|
|
196
225
|
let fallbackGapValue = "1.2rem";
|
|
197
226
|
if (globalBlockGapValue) {
|
|
@@ -202,7 +231,7 @@ var grid_default = {
|
|
|
202
231
|
const hasBlockGapOverride = !hasViewportOverrides || Object.hasOwn(style?.spacing || {}, "blockGap");
|
|
203
232
|
let output = "";
|
|
204
233
|
const rules = [];
|
|
205
|
-
const shouldOutputGridColumns = !hasViewportOverrides || hasViewportOverride("minimumColumnWidth") || hasViewportOverride("columnCount") || hasBlockGapOverride && minimumColumnWidth && columnCount > 0;
|
|
234
|
+
const shouldOutputGridColumns = !hasViewportOverrides || hasViewportOverride("minimumColumnWidth") || hasViewportOverride("columnCount") || hasViewportOverride("autoFit") || hasBlockGapOverride && minimumColumnWidth && columnCount > 0;
|
|
206
235
|
const shouldOutputGridRows = (!hasViewportOverrides || hasViewportOverride("rowCount")) && columnCount && rowCount;
|
|
207
236
|
if (shouldOutputGridColumns && minimumColumnWidth && columnCount > 0) {
|
|
208
237
|
let blockGapToUse = blockGapValue || fallbackGapValue;
|
|
@@ -211,7 +240,7 @@ var grid_default = {
|
|
|
211
240
|
}
|
|
212
241
|
const maxValue = `max(min( ${minimumColumnWidth}, 100%), ( 100% - (${blockGapToUse}*${columnCount - 1}) ) / ${columnCount})`;
|
|
213
242
|
rules.push(
|
|
214
|
-
`grid-template-columns: repeat(
|
|
243
|
+
`grid-template-columns: repeat(${autoPlacement}, minmax(${maxValue}, 1fr))`
|
|
215
244
|
);
|
|
216
245
|
} else if (shouldOutputGridColumns && columnCount) {
|
|
217
246
|
rules.push(
|
|
@@ -219,7 +248,7 @@ var grid_default = {
|
|
|
219
248
|
);
|
|
220
249
|
} else if (shouldOutputGridColumns) {
|
|
221
250
|
rules.push(
|
|
222
|
-
`grid-template-columns: repeat(
|
|
251
|
+
`grid-template-columns: repeat(${autoPlacement}, minmax(min(${minimumColumnWidth || "12rem"}, 100%), 1fr))`
|
|
223
252
|
);
|
|
224
253
|
}
|
|
225
254
|
if (shouldOutputGridColumns) {
|
|
@@ -285,7 +314,6 @@ function GridLayoutMinimumWidthControl({ layout, onChange }) {
|
|
|
285
314
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
286
315
|
import_components.__experimentalUnitControl,
|
|
287
316
|
{
|
|
288
|
-
size: "__unstable-large",
|
|
289
317
|
onChange: (newValue) => {
|
|
290
318
|
onChange({
|
|
291
319
|
...layout,
|
|
@@ -303,7 +331,6 @@ function GridLayoutMinimumWidthControl({ layout, onChange }) {
|
|
|
303
331
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
304
332
|
import_components.RangeControl,
|
|
305
333
|
{
|
|
306
|
-
__next40pxDefaultSize: true,
|
|
307
334
|
onChange: handleSliderChange,
|
|
308
335
|
value: quantity || 0,
|
|
309
336
|
min: 0,
|
|
@@ -345,7 +372,7 @@ function GridLayoutColumnsAndRowsControl({
|
|
|
345
372
|
columnCount: newColumnCount
|
|
346
373
|
});
|
|
347
374
|
},
|
|
348
|
-
value: columnCount,
|
|
375
|
+
value: columnCount ?? "",
|
|
349
376
|
min: 1,
|
|
350
377
|
label: (0, import_i18n.__)("Columns"),
|
|
351
378
|
hideLabelFromVision: !isManualPlacement
|
|
@@ -369,7 +396,6 @@ function GridLayoutColumnsAndRowsControl({
|
|
|
369
396
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
370
397
|
import_components.RangeControl,
|
|
371
398
|
{
|
|
372
|
-
__next40pxDefaultSize: true,
|
|
373
399
|
value: columnCount ?? 1,
|
|
374
400
|
onChange: (value) => onChange({
|
|
375
401
|
...layout,
|
|
@@ -385,6 +411,23 @@ function GridLayoutColumnsAndRowsControl({
|
|
|
385
411
|
] })
|
|
386
412
|
] }) });
|
|
387
413
|
}
|
|
414
|
+
function GridLayoutFillControl({ layout, onChange }) {
|
|
415
|
+
const { autoFit = false } = layout;
|
|
416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
417
|
+
import_components.ToggleControl,
|
|
418
|
+
{
|
|
419
|
+
label: (0, import_i18n.__)("Fill available space"),
|
|
420
|
+
help: (0, import_i18n.__)(
|
|
421
|
+
"Stretch columns to fill the available space, instead of leaving gaps when there are too few items to fill a row."
|
|
422
|
+
),
|
|
423
|
+
checked: autoFit,
|
|
424
|
+
onChange: (value) => onChange({
|
|
425
|
+
...layout,
|
|
426
|
+
autoFit: value
|
|
427
|
+
})
|
|
428
|
+
}
|
|
429
|
+
);
|
|
430
|
+
}
|
|
388
431
|
function GridLayoutTypeControl({ layout, onChange }) {
|
|
389
432
|
const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } = layout;
|
|
390
433
|
const [tempColumnCount, setTempColumnCount] = (0, import_element.useState)(
|
|
@@ -418,7 +461,6 @@ function GridLayoutTypeControl({ layout, onChange }) {
|
|
|
418
461
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
419
462
|
import_components.__experimentalToggleGroupControl,
|
|
420
463
|
{
|
|
421
|
-
__next40pxDefaultSize: true,
|
|
422
464
|
label: (0, import_i18n.__)("Grid item position"),
|
|
423
465
|
value: gridPlacement,
|
|
424
466
|
onChange: onChangeType,
|