@wordpress/block-editor 12.21.0 → 12.23.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 +4 -0
- package/README.md +4 -0
- package/build/components/block-actions/index.js +2 -4
- package/build/components/block-actions/index.js.map +1 -1
- package/build/components/block-heading-level-dropdown/index.js +5 -5
- package/build/components/block-heading-level-dropdown/index.js.map +1 -1
- package/build/components/block-heading-level-dropdown/index.native.js +5 -4
- package/build/components/block-heading-level-dropdown/index.native.js.map +1 -1
- package/build/components/block-list/block-crash-boundary.native.js +49 -0
- package/build/components/block-list/block-crash-boundary.native.js.map +1 -0
- package/build/components/block-list/block-crash-warning.native.js +24 -0
- package/build/components/block-list/block-crash-warning.native.js.map +1 -0
- package/build/components/block-list/block.js +11 -3
- package/build/components/block-list/block.js.map +1 -1
- package/build/components/block-list/block.native.js +7 -2
- package/build/components/block-list/block.native.js.map +1 -1
- package/build/components/block-mover/button.js +4 -1
- package/build/components/block-mover/button.js.map +1 -1
- package/build/components/block-mover/index.js +5 -1
- package/build/components/block-mover/index.js.map +1 -1
- package/build/components/block-patterns-list/index.js +4 -1
- package/build/components/block-patterns-list/index.js.map +1 -1
- package/build/components/block-settings/container.native.js +2 -1
- package/build/components/block-settings/container.native.js.map +1 -1
- package/build/components/block-settings-menu/block-settings-dropdown.js +36 -32
- package/build/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
- package/build/components/block-settings-menu-controls/index.js +1 -3
- package/build/components/block-settings-menu-controls/index.js.map +1 -1
- package/build/components/block-switcher/index.js +4 -3
- package/build/components/block-switcher/index.js.map +1 -1
- package/build/components/block-toolbar/index.js +8 -5
- package/build/components/block-toolbar/index.js.map +1 -1
- package/build/components/block-toolbar/shuffle.js +19 -10
- package/build/components/block-toolbar/shuffle.js.map +1 -1
- package/build/components/block-tools/block-selection-button.js +48 -8
- package/build/components/block-tools/block-selection-button.js.map +1 -1
- package/build/components/block-tools/index.js +14 -2
- package/build/components/block-tools/index.js.map +1 -1
- package/build/components/child-layout-control/index.js +108 -11
- package/build/components/child-layout-control/index.js.map +1 -1
- package/build/components/convert-to-group-buttons/toolbar.js +11 -0
- package/build/components/convert-to-group-buttons/toolbar.js.map +1 -1
- package/build/components/global-styles/advanced-panel.js +9 -2
- package/build/components/global-styles/advanced-panel.js.map +1 -1
- package/build/components/global-styles/background-panel.js +444 -0
- package/build/components/global-styles/background-panel.js.map +1 -0
- package/build/components/global-styles/color-panel.js +2 -1
- package/build/components/global-styles/color-panel.js.map +1 -1
- package/build/components/global-styles/dimensions-panel.js +8 -33
- package/build/components/global-styles/dimensions-panel.js.map +1 -1
- package/build/components/global-styles/get-global-styles-changes.js +3 -0
- package/build/components/global-styles/get-global-styles-changes.js.map +1 -1
- package/build/components/global-styles/hooks.js +1 -1
- package/build/components/global-styles/hooks.js.map +1 -1
- package/build/components/global-styles/index.js +13 -0
- package/build/components/global-styles/index.js.map +1 -1
- package/build/components/global-styles/use-global-styles-output.js +16 -15
- package/build/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build/components/global-styles/utils.js +2 -3
- package/build/components/global-styles/utils.js.map +1 -1
- package/build/components/iframe/index.js +43 -34
- package/build/components/iframe/index.js.map +1 -1
- package/build/components/inserter/block-patterns-explorer/index.js +3 -6
- package/build/components/inserter/block-patterns-explorer/index.js.map +1 -1
- package/build/components/inserter/block-patterns-explorer/pattern-list.js +3 -1
- package/build/components/inserter/block-patterns-explorer/pattern-list.js.map +1 -1
- package/build/components/inserter/block-patterns-tab/index.js.map +1 -1
- package/build/components/inserter/block-patterns-tab/pattern-category-preview-panel.js +5 -0
- package/build/components/inserter/block-patterns-tab/pattern-category-preview-panel.js.map +1 -1
- package/build/components/inserter/library.js +2 -0
- package/build/components/inserter/library.js.map +1 -1
- package/build/components/inserter/menu.js +11 -11
- package/build/components/inserter/menu.js.map +1 -1
- package/build/components/inserter/mobile-tab-navigation.js +1 -1
- package/build/components/inserter/mobile-tab-navigation.js.map +1 -1
- package/build/components/inserter/search-items.js +36 -15
- package/build/components/inserter/search-items.js.map +1 -1
- package/build/components/inserter/search-results.js +2 -3
- package/build/components/inserter/search-results.js.map +1 -1
- package/build/components/inserter/tabs.js +1 -2
- package/build/components/inserter/tabs.js.map +1 -1
- package/build/components/inspector-controls-tabs/advanced-controls-panel.native.js +36 -0
- package/build/components/inspector-controls-tabs/advanced-controls-panel.native.js.map +1 -0
- package/build/components/keyboard-shortcuts/index.js +11 -0
- package/build/components/keyboard-shortcuts/index.js.map +1 -1
- package/build/components/list-view/block-select-button.js +18 -12
- package/build/components/list-view/block-select-button.js.map +1 -1
- package/build/components/list-view/block.js +4 -11
- package/build/components/list-view/block.js.map +1 -1
- package/build/components/list-view/index.js +17 -2
- package/build/components/list-view/index.js.map +1 -1
- package/build/components/list-view/use-list-view-collapse-items.js +47 -0
- package/build/components/list-view/use-list-view-collapse-items.js.map +1 -0
- package/build/components/list-view/utils.js +5 -3
- package/build/components/list-view/utils.js.map +1 -1
- package/build/components/rich-text/index.js +14 -11
- package/build/components/rich-text/index.js.map +1 -1
- package/build/components/rich-text/index.native.js +17 -11
- package/build/components/rich-text/index.native.js.map +1 -1
- package/build/components/rich-text/native/get-format-colors.native.js +1 -1
- package/build/components/rich-text/native/get-format-colors.native.js.map +1 -1
- package/build/components/rich-text/native/index.native.js +2 -2
- package/build/components/rich-text/native/index.native.js.map +1 -1
- package/build/components/rich-text/with-deprecations.js +0 -3
- package/build/components/rich-text/with-deprecations.js.map +1 -1
- package/build/components/spacing-sizes-control/sides-dropdown/index.js +1 -1
- package/build/components/spacing-sizes-control/sides-dropdown/index.js.map +1 -1
- package/build/components/url-popover/image-url-input-ui.js +50 -36
- package/build/components/url-popover/image-url-input-ui.js.map +1 -1
- package/build/components/use-block-display-information/index.js +4 -6
- package/build/components/use-block-display-information/index.js.map +1 -1
- package/build/components/use-moving-animation/index.js +4 -0
- package/build/components/use-moving-animation/index.js.map +1 -1
- package/build/components/warning/index.native.js +9 -4
- package/build/components/warning/index.native.js.map +1 -1
- package/build/hooks/anchor.js +9 -10
- package/build/hooks/anchor.js.map +1 -1
- package/build/hooks/background.js +85 -402
- package/build/hooks/background.js.map +1 -1
- package/build/hooks/index.js +9 -1
- package/build/hooks/index.js.map +1 -1
- package/build/hooks/layout-child.js +28 -6
- package/build/hooks/layout-child.js.map +1 -1
- package/build/hooks/layout.js +21 -10
- package/build/hooks/layout.js.map +1 -1
- package/build/hooks/position.js +1 -1
- package/build/hooks/position.js.map +1 -1
- package/build/hooks/use-zoom-out.js +47 -0
- package/build/hooks/use-zoom-out.js.map +1 -0
- package/build/index.js +7 -0
- package/build/index.js.map +1 -1
- package/build/private-apis.js +6 -1
- package/build/private-apis.js.map +1 -1
- package/build/private-apis.native.js +5 -1
- package/build/private-apis.native.js.map +1 -1
- package/build/store/private-actions.js +13 -0
- package/build/store/private-actions.js.map +1 -1
- package/build/store/private-keys.js +2 -1
- package/build/store/private-keys.js.map +1 -1
- package/build/store/private-selectors.js +24 -3
- package/build/store/private-selectors.js.map +1 -1
- package/build/store/reducer.js +53 -26
- package/build/store/reducer.js.map +1 -1
- package/build/store/selectors.js +34 -32
- package/build/store/selectors.js.map +1 -1
- package/build/store/utils.js +7 -1
- package/build/store/utils.js.map +1 -1
- package/build/utils/transform-styles/index.js +2 -1
- package/build/utils/transform-styles/index.js.map +1 -1
- package/build-module/components/block-actions/index.js +2 -4
- package/build-module/components/block-actions/index.js.map +1 -1
- package/build-module/components/block-heading-level-dropdown/index.js +5 -5
- package/build-module/components/block-heading-level-dropdown/index.js.map +1 -1
- package/build-module/components/block-heading-level-dropdown/index.native.js +5 -4
- package/build-module/components/block-heading-level-dropdown/index.native.js.map +1 -1
- package/build-module/components/block-list/block-crash-boundary.native.js +42 -0
- package/build-module/components/block-list/block-crash-boundary.native.js.map +1 -0
- package/build-module/components/block-list/block-crash-warning.native.js +15 -0
- package/build-module/components/block-list/block-crash-warning.native.js.map +1 -0
- package/build-module/components/block-list/block.js +11 -3
- package/build-module/components/block-list/block.js.map +1 -1
- package/build-module/components/block-list/block.native.js +7 -2
- package/build-module/components/block-list/block.native.js.map +1 -1
- package/build-module/components/block-mover/button.js +4 -1
- package/build-module/components/block-mover/button.js.map +1 -1
- package/build-module/components/block-mover/index.js +5 -1
- package/build-module/components/block-mover/index.js.map +1 -1
- package/build-module/components/block-patterns-list/index.js +4 -1
- package/build-module/components/block-patterns-list/index.js.map +1 -1
- package/build-module/components/block-settings/container.native.js +3 -2
- package/build-module/components/block-settings/container.native.js.map +1 -1
- package/build-module/components/block-settings-menu/block-settings-dropdown.js +37 -33
- package/build-module/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
- package/build-module/components/block-settings-menu-controls/index.js +1 -3
- package/build-module/components/block-settings-menu-controls/index.js.map +1 -1
- package/build-module/components/block-switcher/index.js +4 -3
- package/build-module/components/block-switcher/index.js.map +1 -1
- package/build-module/components/block-toolbar/index.js +8 -5
- package/build-module/components/block-toolbar/index.js.map +1 -1
- package/build-module/components/block-toolbar/shuffle.js +19 -10
- package/build-module/components/block-toolbar/shuffle.js.map +1 -1
- package/build-module/components/block-tools/block-selection-button.js +50 -10
- package/build-module/components/block-tools/block-selection-button.js.map +1 -1
- package/build-module/components/block-tools/index.js +14 -2
- package/build-module/components/block-tools/index.js.map +1 -1
- package/build-module/components/child-layout-control/index.js +109 -12
- package/build-module/components/child-layout-control/index.js.map +1 -1
- package/build-module/components/convert-to-group-buttons/toolbar.js +12 -1
- package/build-module/components/convert-to-group-buttons/toolbar.js.map +1 -1
- package/build-module/components/global-styles/advanced-panel.js +9 -2
- package/build-module/components/global-styles/advanced-panel.js.map +1 -1
- package/build-module/components/global-styles/background-panel.js +430 -0
- package/build-module/components/global-styles/background-panel.js.map +1 -0
- package/build-module/components/global-styles/color-panel.js +2 -1
- package/build-module/components/global-styles/color-panel.js.map +1 -1
- package/build-module/components/global-styles/dimensions-panel.js +9 -34
- package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
- package/build-module/components/global-styles/get-global-styles-changes.js +3 -0
- package/build-module/components/global-styles/get-global-styles-changes.js.map +1 -1
- package/build-module/components/global-styles/hooks.js +1 -1
- package/build-module/components/global-styles/hooks.js.map +1 -1
- package/build-module/components/global-styles/index.js +1 -0
- package/build-module/components/global-styles/index.js.map +1 -1
- package/build-module/components/global-styles/use-global-styles-output.js +17 -16
- package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build-module/components/global-styles/utils.js +1 -2
- package/build-module/components/global-styles/utils.js.map +1 -1
- package/build-module/components/iframe/index.js +43 -34
- package/build-module/components/iframe/index.js.map +1 -1
- package/build-module/components/inserter/block-patterns-explorer/index.js +3 -6
- package/build-module/components/inserter/block-patterns-explorer/index.js.map +1 -1
- package/build-module/components/inserter/block-patterns-explorer/pattern-list.js +3 -1
- package/build-module/components/inserter/block-patterns-explorer/pattern-list.js.map +1 -1
- package/build-module/components/inserter/block-patterns-tab/index.js.map +1 -1
- package/build-module/components/inserter/block-patterns-tab/pattern-category-preview-panel.js +5 -0
- package/build-module/components/inserter/block-patterns-tab/pattern-category-preview-panel.js.map +1 -1
- package/build-module/components/inserter/library.js +2 -0
- package/build-module/components/inserter/library.js.map +1 -1
- package/build-module/components/inserter/menu.js +11 -11
- package/build-module/components/inserter/menu.js.map +1 -1
- package/build-module/components/inserter/mobile-tab-navigation.js +1 -1
- package/build-module/components/inserter/mobile-tab-navigation.js.map +1 -1
- package/build-module/components/inserter/search-items.js +33 -15
- package/build-module/components/inserter/search-items.js.map +1 -1
- package/build-module/components/inserter/search-results.js +2 -3
- package/build-module/components/inserter/search-results.js.map +1 -1
- package/build-module/components/inserter/tabs.js +1 -2
- package/build-module/components/inserter/tabs.js.map +1 -1
- package/build-module/components/inspector-controls-tabs/advanced-controls-panel.native.js +28 -0
- package/build-module/components/inspector-controls-tabs/advanced-controls-panel.native.js.map +1 -0
- package/build-module/components/keyboard-shortcuts/index.js +11 -0
- package/build-module/components/keyboard-shortcuts/index.js.map +1 -1
- package/build-module/components/list-view/block-select-button.js +19 -13
- package/build-module/components/list-view/block-select-button.js.map +1 -1
- package/build-module/components/list-view/block.js +6 -13
- package/build-module/components/list-view/block.js.map +1 -1
- package/build-module/components/list-view/index.js +17 -2
- package/build-module/components/list-view/index.js.map +1 -1
- package/build-module/components/list-view/use-list-view-collapse-items.js +40 -0
- package/build-module/components/list-view/use-list-view-collapse-items.js.map +1 -0
- package/build-module/components/list-view/utils.js +2 -1
- package/build-module/components/list-view/utils.js.map +1 -1
- package/build-module/components/rich-text/index.js +15 -12
- package/build-module/components/rich-text/index.js.map +1 -1
- package/build-module/components/rich-text/index.native.js +16 -11
- package/build-module/components/rich-text/index.native.js.map +1 -1
- package/build-module/components/rich-text/native/get-format-colors.native.js +1 -1
- package/build-module/components/rich-text/native/get-format-colors.native.js.map +1 -1
- package/build-module/components/rich-text/native/index.native.js +2 -2
- package/build-module/components/rich-text/native/index.native.js.map +1 -1
- package/build-module/components/rich-text/with-deprecations.js +0 -3
- package/build-module/components/rich-text/with-deprecations.js.map +1 -1
- package/build-module/components/spacing-sizes-control/sides-dropdown/index.js +1 -1
- package/build-module/components/spacing-sizes-control/sides-dropdown/index.js.map +1 -1
- package/build-module/components/url-popover/image-url-input-ui.js +50 -36
- package/build-module/components/url-popover/image-url-input-ui.js.map +1 -1
- package/build-module/components/use-block-display-information/index.js +5 -7
- package/build-module/components/use-block-display-information/index.js.map +1 -1
- package/build-module/components/use-moving-animation/index.js +4 -0
- package/build-module/components/use-moving-animation/index.js.map +1 -1
- package/build-module/components/warning/index.native.js +9 -4
- package/build-module/components/warning/index.native.js.map +1 -1
- package/build-module/hooks/anchor.js +10 -11
- package/build-module/hooks/anchor.js.map +1 -1
- package/build-module/hooks/background.js +82 -397
- package/build-module/hooks/background.js.map +1 -1
- package/build-module/hooks/index.js +3 -1
- package/build-module/hooks/index.js.map +1 -1
- package/build-module/hooks/layout-child.js +28 -6
- package/build-module/hooks/layout-child.js.map +1 -1
- package/build-module/hooks/layout.js +21 -10
- package/build-module/hooks/layout.js.map +1 -1
- package/build-module/hooks/position.js +1 -1
- package/build-module/hooks/position.js.map +1 -1
- package/build-module/hooks/use-zoom-out.js +41 -0
- package/build-module/hooks/use-zoom-out.js.map +1 -0
- package/build-module/index.js +1 -1
- package/build-module/index.js.map +1 -1
- package/build-module/private-apis.js +7 -2
- package/build-module/private-apis.js.map +1 -1
- package/build-module/private-apis.native.js +5 -1
- package/build-module/private-apis.native.js.map +1 -1
- package/build-module/store/private-actions.js +12 -0
- package/build-module/store/private-actions.js.map +1 -1
- package/build-module/store/private-keys.js +1 -0
- package/build-module/store/private-keys.js.map +1 -1
- package/build-module/store/private-selectors.js +22 -4
- package/build-module/store/private-selectors.js.map +1 -1
- package/build-module/store/reducer.js +52 -26
- package/build-module/store/reducer.js.map +1 -1
- package/build-module/store/selectors.js +35 -33
- package/build-module/store/selectors.js.map +1 -1
- package/build-module/store/utils.js +6 -1
- package/build-module/store/utils.js.map +1 -1
- package/build-module/utils/transform-styles/index.js +2 -1
- package/build-module/utils/transform-styles/index.js.map +1 -1
- package/build-style/content-rtl.css +18 -1
- package/build-style/content.css +18 -1
- package/build-style/style-rtl.css +92 -99
- package/build-style/style.css +92 -99
- package/package.json +31 -31
- package/src/components/block-actions/index.js +2 -8
- package/src/components/block-bindings-toolbar-indicator/style.scss +10 -8
- package/src/components/block-heading-level-dropdown/README.md +5 -5
- package/src/components/block-heading-level-dropdown/index.js +5 -5
- package/src/components/block-heading-level-dropdown/index.native.js +5 -4
- package/src/components/block-list/block-crash-boundary.native.js +43 -0
- package/src/components/block-list/block-crash-warning.native.js +19 -0
- package/src/components/block-list/block.js +19 -3
- package/src/components/block-list/block.native.js +14 -7
- package/src/components/block-list/content.scss +16 -0
- package/src/components/block-mover/button.js +4 -1
- package/src/components/block-mover/index.js +8 -1
- package/src/components/block-patterns-list/index.js +22 -17
- package/src/components/block-preview/style.scss +28 -0
- package/src/components/block-settings/container.native.js +5 -1
- package/src/components/block-settings-menu/block-settings-dropdown.js +49 -58
- package/src/components/block-settings-menu-controls/README.md +0 -9
- package/src/components/block-settings-menu-controls/index.js +1 -6
- package/src/components/block-switcher/index.js +5 -3
- package/src/components/block-switcher/style.scss +1 -1
- package/src/components/block-toolbar/index.js +25 -20
- package/src/components/block-toolbar/shuffle.js +20 -14
- package/src/components/block-toolbar/style.scss +1 -1
- package/src/components/block-toolbar/test/index.native.js +1 -7
- package/src/components/block-tools/block-selection-button.js +66 -9
- package/src/components/block-tools/index.js +18 -1
- package/src/components/button-block-appender/content.scss +5 -1
- package/src/components/child-layout-control/index.js +147 -35
- package/src/components/convert-to-group-buttons/toolbar.js +13 -1
- package/src/components/default-block-appender/content.scss +2 -2
- package/src/components/global-styles/advanced-panel.js +8 -2
- package/src/components/global-styles/background-panel.js +591 -0
- package/src/components/global-styles/color-panel.js +2 -1
- package/src/components/global-styles/dimensions-panel.js +9 -34
- package/src/components/global-styles/get-global-styles-changes.js +3 -0
- package/src/components/global-styles/hooks.js +1 -0
- package/src/components/global-styles/index.js +4 -0
- package/src/components/global-styles/style.scss +78 -1
- package/src/{hooks/test/background.js → components/global-styles/test/background-panel.js} +36 -1
- package/src/components/global-styles/test/get-global-styles-changes.js +22 -3
- package/src/components/global-styles/test/use-global-styles-output.js +40 -9
- package/src/components/global-styles/use-global-styles-output.js +30 -17
- package/src/components/global-styles/utils.js +1 -18
- package/src/components/iframe/index.js +79 -53
- package/src/components/inserter/block-patterns-explorer/index.js +2 -9
- package/src/components/inserter/block-patterns-explorer/pattern-list.js +7 -1
- package/src/components/inserter/block-patterns-tab/index.js +1 -0
- package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js +5 -0
- package/src/components/inserter/library.js +4 -0
- package/src/components/inserter/menu.js +12 -11
- package/src/components/inserter/mobile-tab-navigation.js +1 -1
- package/src/components/inserter/search-items.js +37 -15
- package/src/components/inserter/search-results.js +1 -2
- package/src/components/inserter/style.scss +6 -12
- package/src/components/inserter/tabs.js +1 -2
- package/src/components/inspector-controls-tabs/advanced-controls-panel.native.js +31 -0
- package/src/components/keyboard-shortcuts/index.js +11 -0
- package/src/components/link-control/style.scss +0 -5
- package/src/components/list-view/block-select-button.js +15 -19
- package/src/components/list-view/block.js +12 -21
- package/src/components/list-view/index.js +18 -1
- package/src/components/list-view/style.scss +38 -28
- package/src/components/list-view/use-list-view-collapse-items.js +33 -0
- package/src/components/list-view/utils.js +4 -1
- package/src/components/rich-text/README.md +6 -0
- package/src/components/rich-text/index.js +30 -13
- package/src/components/rich-text/index.native.js +14 -11
- package/src/components/rich-text/native/get-format-colors.native.js +1 -1
- package/src/components/rich-text/native/index.native.js +2 -2
- package/src/components/rich-text/with-deprecations.js +0 -3
- package/src/components/spacing-sizes-control/sides-dropdown/index.js +1 -1
- package/src/components/url-popover/image-url-input-ui.js +68 -51
- package/src/components/use-block-display-information/index.js +8 -10
- package/src/components/use-moving-animation/index.js +1 -0
- package/src/components/warning/index.native.js +19 -15
- package/src/hooks/anchor.js +43 -61
- package/src/hooks/background.js +100 -516
- package/src/hooks/index.js +3 -0
- package/src/hooks/layout-child.js +44 -8
- package/src/hooks/layout.js +22 -18
- package/src/hooks/position.js +1 -1
- package/src/hooks/test/__snapshots__/anchor.native.js.snap +7 -0
- package/src/hooks/test/anchor.native.js +32 -0
- package/src/hooks/use-zoom-out.js +36 -0
- package/src/index.js +1 -0
- package/src/private-apis.js +13 -1
- package/src/private-apis.native.js +4 -0
- package/src/store/private-actions.js +12 -0
- package/src/store/private-keys.js +1 -0
- package/src/store/private-selectors.js +54 -27
- package/src/store/reducer.js +63 -41
- package/src/store/selectors.js +195 -180
- package/src/store/test/private-actions.js +10 -0
- package/src/store/test/private-selectors.js +13 -0
- package/src/store/test/reducer.js +26 -0
- package/src/store/test/selectors.js +90 -199
- package/src/store/utils.js +13 -0
- package/src/style.scss +0 -2
- package/src/utils/transform-styles/index.js +2 -1
- package/tsconfig.json +1 -0
- package/build/utils/calculate-scale.js +0 -17
- package/build/utils/calculate-scale.js.map +0 -1
- package/build-module/utils/calculate-scale.js +0 -11
- package/build-module/utils/calculate-scale.js.map +0 -1
- package/src/hooks/anchor.scss +0 -4
- package/src/hooks/background.scss +0 -75
- package/src/utils/calculate-scale.js +0 -20
|
@@ -1,56 +1,24 @@
|
|
|
1
1
|
import { createElement } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* External dependencies
|
|
4
|
-
*/
|
|
5
|
-
import classnames from 'classnames';
|
|
6
|
-
|
|
7
2
|
/**
|
|
8
3
|
* WordPress dependencies
|
|
9
4
|
*/
|
|
10
|
-
import { isBlobURL } from '@wordpress/blob';
|
|
11
5
|
import { getBlockSupport } from '@wordpress/blocks';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { useDispatch, useSelect } from '@wordpress/data';
|
|
15
|
-
import { Platform, useCallback, useRef } from '@wordpress/element';
|
|
16
|
-
import { __, sprintf } from '@wordpress/i18n';
|
|
17
|
-
import { store as noticesStore } from '@wordpress/notices';
|
|
18
|
-
import { getFilename } from '@wordpress/url';
|
|
6
|
+
import { useSelect } from '@wordpress/data';
|
|
7
|
+
import { useCallback } from '@wordpress/element';
|
|
19
8
|
|
|
20
9
|
/**
|
|
21
10
|
* Internal dependencies
|
|
22
11
|
*/
|
|
23
12
|
import InspectorControls from '../components/inspector-controls';
|
|
24
|
-
import MediaReplaceFlow from '../components/media-replace-flow';
|
|
25
|
-
import { useSettings } from '../components/use-settings';
|
|
26
13
|
import { cleanEmptyObject } from './utils';
|
|
27
14
|
import { store as blockEditorStore } from '../store';
|
|
15
|
+
import { default as StylesBackgroundPanel, useHasBackgroundPanel, hasBackgroundImageValue } from '../components/global-styles/background-panel';
|
|
28
16
|
export const BACKGROUND_SUPPORT_KEY = 'background';
|
|
29
|
-
export const IMAGE_BACKGROUND_TYPE = 'image';
|
|
30
17
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
* @param {Object} style Style attribute.
|
|
36
|
-
* @return {boolean} Whether or not the block has a background image value set.
|
|
37
|
-
*/
|
|
38
|
-
export function hasBackgroundImageValue(style) {
|
|
39
|
-
const hasValue = !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url;
|
|
40
|
-
return hasValue;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Checks if there is a current value in the background size block support
|
|
45
|
-
* attributes. Background size values include background size as well
|
|
46
|
-
* as background position.
|
|
47
|
-
*
|
|
48
|
-
* @param {Object} style Style attribute.
|
|
49
|
-
* @return {boolean} Whether or not the block has a background size value set.
|
|
50
|
-
*/
|
|
51
|
-
export function hasBackgroundSizeValue(style) {
|
|
52
|
-
return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
|
|
53
|
-
}
|
|
18
|
+
// Initial control values where no block style is set.
|
|
19
|
+
const BACKGROUND_BLOCK_DEFAULT_VALUES = {
|
|
20
|
+
backgroundSize: 'cover'
|
|
21
|
+
};
|
|
54
22
|
|
|
55
23
|
/**
|
|
56
24
|
* Determine whether there is block support for background.
|
|
@@ -61,9 +29,6 @@ export function hasBackgroundSizeValue(style) {
|
|
|
61
29
|
* @return {boolean} Whether there is support.
|
|
62
30
|
*/
|
|
63
31
|
export function hasBackgroundSupport(blockName, feature = 'any') {
|
|
64
|
-
if (Platform.OS !== 'web') {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
32
|
const support = getBlockSupport(blockName, BACKGROUND_SUPPORT_KEY);
|
|
68
33
|
if (support === true) {
|
|
69
34
|
return true;
|
|
@@ -73,45 +38,44 @@ export function hasBackgroundSupport(blockName, feature = 'any') {
|
|
|
73
38
|
}
|
|
74
39
|
return !!support?.[feature];
|
|
75
40
|
}
|
|
41
|
+
export function setBackgroundStyleDefaults(backgroundStyle) {
|
|
42
|
+
if (!backgroundStyle) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const backgroundImage = backgroundStyle?.backgroundImage;
|
|
46
|
+
let backgroundStylesWithDefaults;
|
|
76
47
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
})
|
|
93
|
-
});
|
|
48
|
+
// Set block background defaults.
|
|
49
|
+
if (backgroundImage?.source === 'file' && !!backgroundImage?.url) {
|
|
50
|
+
if (!backgroundStyle?.backgroundSize) {
|
|
51
|
+
backgroundStylesWithDefaults = {
|
|
52
|
+
backgroundSize: 'cover'
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
if ('contain' === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) {
|
|
56
|
+
backgroundStylesWithDefaults = {
|
|
57
|
+
backgroundPosition: 'center'
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return backgroundStylesWithDefaults;
|
|
94
62
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
backgroundSize: undefined
|
|
112
|
-
}
|
|
113
|
-
})
|
|
114
|
-
});
|
|
63
|
+
function useBlockProps({
|
|
64
|
+
name,
|
|
65
|
+
style
|
|
66
|
+
}) {
|
|
67
|
+
if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const backgroundStyles = setBackgroundStyleDefaults(style?.background);
|
|
71
|
+
if (!backgroundStyles) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
return {
|
|
75
|
+
style: {
|
|
76
|
+
...backgroundStyles
|
|
77
|
+
}
|
|
78
|
+
};
|
|
115
79
|
}
|
|
116
80
|
|
|
117
81
|
/**
|
|
@@ -124,338 +88,59 @@ function resetBackgroundSize(style = {}, setAttributes) {
|
|
|
124
88
|
export function getBackgroundImageClasses(style) {
|
|
125
89
|
return hasBackgroundImageValue(style) ? 'has-background' : '';
|
|
126
90
|
}
|
|
127
|
-
function
|
|
128
|
-
|
|
129
|
-
filename,
|
|
130
|
-
url: imgUrl
|
|
131
|
-
}) {
|
|
132
|
-
const imgLabel = label || getFilename(imgUrl);
|
|
133
|
-
return createElement(ItemGroup, {
|
|
134
|
-
as: "span"
|
|
135
|
-
}, createElement(HStack, {
|
|
136
|
-
justify: "flex-start",
|
|
137
|
-
as: "span"
|
|
138
|
-
}, createElement("span", {
|
|
139
|
-
className: classnames('block-editor-hooks__background__inspector-image-indicator-wrapper', {
|
|
140
|
-
'has-image': imgUrl
|
|
141
|
-
}),
|
|
142
|
-
"aria-hidden": true
|
|
143
|
-
}, imgUrl && createElement("span", {
|
|
144
|
-
className: "block-editor-hooks__background__inspector-image-indicator",
|
|
145
|
-
style: {
|
|
146
|
-
backgroundImage: `url(${imgUrl})`
|
|
147
|
-
}
|
|
148
|
-
})), createElement(FlexItem, {
|
|
149
|
-
as: "span"
|
|
150
|
-
}, createElement(Truncate, {
|
|
151
|
-
numberOfLines: 1,
|
|
152
|
-
className: "block-editor-hooks__background__inspector-media-replace-title"
|
|
153
|
-
}, imgLabel), createElement(VisuallyHidden, {
|
|
154
|
-
as: "span"
|
|
155
|
-
}, filename ? sprintf( /* translators: %s: file name */
|
|
156
|
-
__('Selected image: %s'), filename) : __('No image selected')))));
|
|
157
|
-
}
|
|
158
|
-
function BackgroundImagePanelItem({
|
|
159
|
-
clientId,
|
|
160
|
-
isShownByDefault,
|
|
161
|
-
setAttributes
|
|
91
|
+
function BackgroundInspectorControl({
|
|
92
|
+
children
|
|
162
93
|
}) {
|
|
163
|
-
const {
|
|
164
|
-
style,
|
|
165
|
-
mediaUpload
|
|
166
|
-
} = useSelect(select => {
|
|
167
|
-
const {
|
|
168
|
-
getBlockAttributes,
|
|
169
|
-
getSettings
|
|
170
|
-
} = select(blockEditorStore);
|
|
94
|
+
const resetAllFilter = useCallback(attributes => {
|
|
171
95
|
return {
|
|
172
|
-
|
|
173
|
-
mediaUpload: getSettings().mediaUpload
|
|
174
|
-
};
|
|
175
|
-
}, [clientId]);
|
|
176
|
-
const {
|
|
177
|
-
id,
|
|
178
|
-
title,
|
|
179
|
-
url
|
|
180
|
-
} = style?.background?.backgroundImage || {};
|
|
181
|
-
const replaceContainerRef = useRef();
|
|
182
|
-
const {
|
|
183
|
-
createErrorNotice
|
|
184
|
-
} = useDispatch(noticesStore);
|
|
185
|
-
const onUploadError = message => {
|
|
186
|
-
createErrorNotice(message, {
|
|
187
|
-
type: 'snackbar'
|
|
188
|
-
});
|
|
189
|
-
};
|
|
190
|
-
const onSelectMedia = media => {
|
|
191
|
-
if (!media || !media.url) {
|
|
192
|
-
const newStyle = {
|
|
193
|
-
...style,
|
|
194
|
-
background: {
|
|
195
|
-
...style?.background,
|
|
196
|
-
backgroundImage: undefined
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
const newAttributes = {
|
|
200
|
-
style: cleanEmptyObject(newStyle)
|
|
201
|
-
};
|
|
202
|
-
setAttributes(newAttributes);
|
|
203
|
-
return;
|
|
204
|
-
}
|
|
205
|
-
if (isBlobURL(media.url)) {
|
|
206
|
-
return;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
// For media selections originated from a file upload.
|
|
210
|
-
if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
|
|
211
|
-
onUploadError(__('Only images can be used as a background image.'));
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
|
-
const newStyle = {
|
|
215
|
-
...style,
|
|
216
|
-
background: {
|
|
217
|
-
...style?.background,
|
|
218
|
-
backgroundImage: {
|
|
219
|
-
url: media.url,
|
|
220
|
-
id: media.id,
|
|
221
|
-
source: 'file',
|
|
222
|
-
title: media.title || undefined
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
const newAttributes = {
|
|
227
|
-
style: cleanEmptyObject(newStyle)
|
|
228
|
-
};
|
|
229
|
-
setAttributes(newAttributes);
|
|
230
|
-
};
|
|
231
|
-
const onFilesDrop = filesList => {
|
|
232
|
-
mediaUpload({
|
|
233
|
-
allowedTypes: ['image'],
|
|
234
|
-
filesList,
|
|
235
|
-
onFileChange([image]) {
|
|
236
|
-
if (isBlobURL(image?.url)) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
onSelectMedia(image);
|
|
240
|
-
},
|
|
241
|
-
onError: onUploadError
|
|
242
|
-
});
|
|
243
|
-
};
|
|
244
|
-
const resetAllFilter = useCallback(previousValue => {
|
|
245
|
-
return {
|
|
246
|
-
...previousValue,
|
|
96
|
+
...attributes,
|
|
247
97
|
style: {
|
|
248
|
-
...
|
|
98
|
+
...attributes.style,
|
|
249
99
|
background: undefined
|
|
250
100
|
}
|
|
251
101
|
};
|
|
252
102
|
}, []);
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
label: __('Background image'),
|
|
258
|
-
onDeselect: () => resetBackgroundImage(style, setAttributes),
|
|
259
|
-
isShownByDefault: isShownByDefault,
|
|
260
|
-
resetAllFilter: resetAllFilter,
|
|
261
|
-
panelId: clientId
|
|
262
|
-
}, createElement("div", {
|
|
263
|
-
className: "block-editor-hooks__background__inspector-media-replace-container",
|
|
264
|
-
ref: replaceContainerRef
|
|
265
|
-
}, createElement(MediaReplaceFlow, {
|
|
266
|
-
mediaId: id,
|
|
267
|
-
mediaURL: url,
|
|
268
|
-
allowedTypes: [IMAGE_BACKGROUND_TYPE],
|
|
269
|
-
accept: "image/*",
|
|
270
|
-
onSelect: onSelectMedia,
|
|
271
|
-
name: createElement(InspectorImagePreview, {
|
|
272
|
-
label: __('Background image'),
|
|
273
|
-
filename: title,
|
|
274
|
-
url: url
|
|
275
|
-
}),
|
|
276
|
-
variant: "secondary"
|
|
277
|
-
}, hasValue && createElement(MenuItem, {
|
|
278
|
-
onClick: () => {
|
|
279
|
-
const [toggleButton] = focus.tabbable.find(replaceContainerRef.current);
|
|
280
|
-
// Focus the toggle button and close the dropdown menu.
|
|
281
|
-
// This ensures similar behaviour as to selecting an image, where the dropdown is
|
|
282
|
-
// closed and focus is redirected to the dropdown toggle button.
|
|
283
|
-
toggleButton?.focus();
|
|
284
|
-
toggleButton?.click();
|
|
285
|
-
resetBackgroundImage(style, setAttributes);
|
|
286
|
-
}
|
|
287
|
-
}, __('Reset '))), createElement(DropZone, {
|
|
288
|
-
onFilesDrop: onFilesDrop,
|
|
289
|
-
label: __('Drop to upload')
|
|
290
|
-
})));
|
|
291
|
-
}
|
|
292
|
-
function backgroundSizeHelpText(value) {
|
|
293
|
-
if (value === 'cover' || value === undefined) {
|
|
294
|
-
return __('Image covers the space evenly.');
|
|
295
|
-
}
|
|
296
|
-
if (value === 'contain') {
|
|
297
|
-
return __('Image is contained without distortion.');
|
|
298
|
-
}
|
|
299
|
-
return __('Specify a fixed width.');
|
|
103
|
+
return createElement(InspectorControls, {
|
|
104
|
+
group: "background",
|
|
105
|
+
resetAllFilter: resetAllFilter
|
|
106
|
+
}, children);
|
|
300
107
|
}
|
|
301
|
-
export
|
|
302
|
-
if (!value || isNaN(value.x) && isNaN(value.y)) {
|
|
303
|
-
return undefined;
|
|
304
|
-
}
|
|
305
|
-
const x = isNaN(value.x) ? 0.5 : value.x;
|
|
306
|
-
const y = isNaN(value.y) ? 0.5 : value.y;
|
|
307
|
-
return `${x * 100}% ${y * 100}%`;
|
|
308
|
-
};
|
|
309
|
-
export const backgroundPositionToCoords = value => {
|
|
310
|
-
if (!value) {
|
|
311
|
-
return {
|
|
312
|
-
x: undefined,
|
|
313
|
-
y: undefined
|
|
314
|
-
};
|
|
315
|
-
}
|
|
316
|
-
let [x, y] = value.split(' ').map(v => parseFloat(v) / 100);
|
|
317
|
-
x = isNaN(x) ? undefined : x;
|
|
318
|
-
y = isNaN(y) ? x : y;
|
|
319
|
-
return {
|
|
320
|
-
x,
|
|
321
|
-
y
|
|
322
|
-
};
|
|
323
|
-
};
|
|
324
|
-
function BackgroundSizePanelItem({
|
|
108
|
+
export function BackgroundImagePanel({
|
|
325
109
|
clientId,
|
|
326
|
-
|
|
327
|
-
setAttributes
|
|
110
|
+
name,
|
|
111
|
+
setAttributes,
|
|
112
|
+
settings
|
|
328
113
|
}) {
|
|
329
114
|
const style = useSelect(select => select(blockEditorStore).getBlockAttributes(clientId)?.style, [clientId]);
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
// allows a user to select "Size" and then enter a custom value, with an
|
|
336
|
-
// empty value being treated as `auto`.
|
|
337
|
-
const currentValueForToggle = sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' || sizeValue === '' ? 'auto' : sizeValue || 'cover';
|
|
338
|
-
|
|
339
|
-
// If the current value is `cover` and the repeat value is `undefined`, then
|
|
340
|
-
// the toggle should be unchecked as the default state. Otherwise, the toggle
|
|
341
|
-
// should reflect the current repeat value.
|
|
342
|
-
const repeatCheckedValue = repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined ? false : true;
|
|
343
|
-
const hasValue = hasBackgroundSizeValue(style);
|
|
344
|
-
const resetAllFilter = useCallback(previousValue => {
|
|
345
|
-
return {
|
|
346
|
-
...previousValue,
|
|
347
|
-
style: {
|
|
348
|
-
...previousValue.style,
|
|
349
|
-
background: {
|
|
350
|
-
...previousValue.style?.background,
|
|
351
|
-
backgroundRepeat: undefined,
|
|
352
|
-
backgroundSize: undefined
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
};
|
|
356
|
-
}, []);
|
|
357
|
-
const updateBackgroundSize = next => {
|
|
358
|
-
// When switching to 'contain' toggle the repeat off.
|
|
359
|
-
let nextRepeat = repeatValue;
|
|
360
|
-
if (next === 'contain') {
|
|
361
|
-
nextRepeat = 'no-repeat';
|
|
362
|
-
}
|
|
363
|
-
if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
|
|
364
|
-
nextRepeat = undefined;
|
|
365
|
-
}
|
|
366
|
-
setAttributes({
|
|
367
|
-
style: cleanEmptyObject({
|
|
368
|
-
...style,
|
|
369
|
-
background: {
|
|
370
|
-
...style?.background,
|
|
371
|
-
backgroundRepeat: nextRepeat,
|
|
372
|
-
backgroundSize: next
|
|
373
|
-
}
|
|
374
|
-
})
|
|
375
|
-
});
|
|
376
|
-
};
|
|
377
|
-
const updateBackgroundPosition = next => {
|
|
115
|
+
if (!useHasBackgroundPanel(settings) || !hasBackgroundSupport(name, 'backgroundImage')) {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
const defaultControls = getBlockSupport(name, [BACKGROUND_SUPPORT_KEY, '__experimentalDefaultControls']);
|
|
119
|
+
const onChange = newStyle => {
|
|
378
120
|
setAttributes({
|
|
379
|
-
style: cleanEmptyObject(
|
|
380
|
-
...style,
|
|
381
|
-
background: {
|
|
382
|
-
...style?.background,
|
|
383
|
-
backgroundPosition: coordsToBackgroundPosition(next)
|
|
384
|
-
}
|
|
385
|
-
})
|
|
121
|
+
style: cleanEmptyObject(newStyle)
|
|
386
122
|
});
|
|
387
123
|
};
|
|
388
|
-
const
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
backgroundRepeat: repeatCheckedValue === true ? 'no-repeat' : undefined
|
|
395
|
-
}
|
|
396
|
-
})
|
|
397
|
-
});
|
|
124
|
+
const updatedSettings = {
|
|
125
|
+
...settings,
|
|
126
|
+
background: {
|
|
127
|
+
...settings.background,
|
|
128
|
+
backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, 'backgroundSize')
|
|
129
|
+
}
|
|
398
130
|
};
|
|
399
|
-
return createElement(
|
|
400
|
-
as:
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
panelId: clientId
|
|
409
|
-
}, createElement(FocalPointPicker, {
|
|
410
|
-
__next40pxDefaultSize: true,
|
|
411
|
-
label: __('Position'),
|
|
412
|
-
url: style?.background?.backgroundImage?.url,
|
|
413
|
-
value: backgroundPositionToCoords(style?.background?.backgroundPosition),
|
|
414
|
-
onChange: updateBackgroundPosition
|
|
415
|
-
}), createElement(ToggleGroupControl, {
|
|
416
|
-
size: '__unstable-large',
|
|
417
|
-
label: __('Size'),
|
|
418
|
-
value: currentValueForToggle,
|
|
419
|
-
onChange: updateBackgroundSize,
|
|
420
|
-
isBlock: true,
|
|
421
|
-
help: backgroundSizeHelpText(sizeValue)
|
|
422
|
-
}, createElement(ToggleGroupControlOption, {
|
|
423
|
-
key: 'cover',
|
|
424
|
-
value: 'cover',
|
|
425
|
-
label: __('Cover')
|
|
426
|
-
}), createElement(ToggleGroupControlOption, {
|
|
427
|
-
key: 'contain',
|
|
428
|
-
value: 'contain',
|
|
429
|
-
label: __('Contain')
|
|
430
|
-
}), createElement(ToggleGroupControlOption, {
|
|
431
|
-
key: 'fixed',
|
|
432
|
-
value: 'auto',
|
|
433
|
-
label: __('Fixed')
|
|
434
|
-
})), sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' ? createElement(UnitControl, {
|
|
435
|
-
size: '__unstable-large',
|
|
436
|
-
onChange: updateBackgroundSize,
|
|
437
|
-
value: sizeValue
|
|
438
|
-
}) : null, currentValueForToggle !== 'cover' && createElement(ToggleControl, {
|
|
439
|
-
label: __('Repeat'),
|
|
440
|
-
checked: repeatCheckedValue,
|
|
441
|
-
onChange: toggleIsRepeated
|
|
442
|
-
}));
|
|
443
|
-
}
|
|
444
|
-
export function BackgroundImagePanel(props) {
|
|
445
|
-
const [backgroundImage, backgroundSize] = useSettings('background.backgroundImage', 'background.backgroundSize');
|
|
446
|
-
if (!backgroundImage || !hasBackgroundSupport(props.name, 'backgroundImage')) {
|
|
447
|
-
return null;
|
|
448
|
-
}
|
|
449
|
-
const showBackgroundSize = !!(backgroundSize && hasBackgroundSupport(props.name, 'backgroundSize'));
|
|
450
|
-
const defaultControls = getBlockSupport(props.name, [BACKGROUND_SUPPORT_KEY, '__experimentalDefaultControls']);
|
|
451
|
-
return createElement(InspectorControls, {
|
|
452
|
-
group: "background"
|
|
453
|
-
}, createElement(BackgroundImagePanelItem, {
|
|
454
|
-
isShownByDefault: defaultControls?.backgroundImage,
|
|
455
|
-
...props
|
|
456
|
-
}), showBackgroundSize && createElement(BackgroundSizePanelItem, {
|
|
457
|
-
isShownByDefault: defaultControls?.backgroundSize,
|
|
458
|
-
...props
|
|
459
|
-
}));
|
|
131
|
+
return createElement(StylesBackgroundPanel, {
|
|
132
|
+
as: BackgroundInspectorControl,
|
|
133
|
+
panelId: clientId,
|
|
134
|
+
defaultControls: defaultControls,
|
|
135
|
+
defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
|
|
136
|
+
settings: updatedSettings,
|
|
137
|
+
onChange: onChange,
|
|
138
|
+
value: style
|
|
139
|
+
});
|
|
460
140
|
}
|
|
141
|
+
export default {
|
|
142
|
+
useBlockProps,
|
|
143
|
+
attributeKeys: ['style'],
|
|
144
|
+
hasSupport: hasBackgroundSupport
|
|
145
|
+
};
|
|
461
146
|
//# sourceMappingURL=background.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","isBlobURL","getBlockSupport","focus","ToggleControl","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalToolsPanelItem","ToolsPanelItem","__experimentalUnitControl","UnitControl","__experimentalVStack","VStack","DropZone","FlexItem","FocalPointPicker","MenuItem","VisuallyHidden","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalTruncate","Truncate","useDispatch","useSelect","Platform","useCallback","useRef","__","sprintf","store","noticesStore","getFilename","InspectorControls","MediaReplaceFlow","useSettings","cleanEmptyObject","blockEditorStore","BACKGROUND_SUPPORT_KEY","IMAGE_BACKGROUND_TYPE","hasBackgroundImageValue","style","hasValue","background","backgroundImage","id","url","hasBackgroundSizeValue","backgroundPosition","undefined","backgroundSize","hasBackgroundSupport","blockName","feature","OS","support","backgroundRepeat","resetBackgroundImage","setAttributes","resetBackgroundSize","getBackgroundImageClasses","InspectorImagePreview","label","filename","imgUrl","imgLabel","createElement","as","justify","className","numberOfLines","BackgroundImagePanelItem","clientId","isShownByDefault","mediaUpload","select","getBlockAttributes","getSettings","title","replaceContainerRef","createErrorNotice","onUploadError","message","type","onSelectMedia","media","newStyle","newAttributes","media_type","source","onFilesDrop","filesList","allowedTypes","onFileChange","image","onError","resetAllFilter","previousValue","onDeselect","panelId","ref","mediaId","mediaURL","accept","onSelect","name","variant","onClick","toggleButton","tabbable","find","current","click","backgroundSizeHelpText","value","coordsToBackgroundPosition","isNaN","x","y","backgroundPositionToCoords","split","map","v","parseFloat","BackgroundSizePanelItem","sizeValue","repeatValue","currentValueForToggle","repeatCheckedValue","updateBackgroundSize","next","nextRepeat","updateBackgroundPosition","toggleIsRepeated","spacing","__next40pxDefaultSize","onChange","size","isBlock","help","key","checked","BackgroundImagePanel","props","showBackgroundSize","defaultControls","group"],"sources":["@wordpress/block-editor/src/hooks/background.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { focus } from '@wordpress/dom';\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexItem,\n\tFocalPointPicker,\n\tMenuItem,\n\tVisuallyHidden,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { Platform, useCallback, useRef } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport MediaReplaceFlow from '../components/media-replace-flow';\nimport { useSettings } from '../components/use-settings';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\nexport const IMAGE_BACKGROUND_TYPE = 'image';\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean} Whether or not the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\tconst hasValue =\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url;\n\n\treturn hasValue;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean} Whether or not the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn (\n\t\t\t!! support?.backgroundImage ||\n\t\t\t!! support?.backgroundSize ||\n\t\t\t!! support?.backgroundRepeat\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Resets the background image block support attributes. This can be used when disabling\n * the background image controls for a block via a `ToolsPanel`.\n *\n * @param {Object} style Style attribute.\n * @param {Function} setAttributes Function to set block's attributes.\n */\nexport function resetBackgroundImage( style = {}, setAttributes ) {\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Resets the background size block support attributes. This can be used when disabling\n * the background size controls for a block via a `ToolsPanel`.\n *\n * @param {Object} style Style attribute.\n * @param {Function} setAttributes Function to set block's attributes.\n */\nfunction resetBackgroundSize( style = {}, setAttributes ) {\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: undefined,\n\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\tbackgroundSize: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\n/**\n * Generates a CSS class name if an background image is set.\n *\n * @param {Object} style A block's style attribute.\n *\n * @return {string} CSS class name.\n */\nexport function getBackgroundImageClasses( style ) {\n\treturn hasBackgroundImageValue( style ) ? 'has-background' : '';\n}\n\nfunction InspectorImagePreview( { label, filename, url: imgUrl } ) {\n\tconst imgLabel = label || getFilename( imgUrl );\n\treturn (\n\t\t<ItemGroup as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<span\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'block-editor-hooks__background__inspector-image-indicator-wrapper',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-image': imgUrl,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\taria-hidden\n\t\t\t\t>\n\t\t\t\t\t{ imgUrl && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-image-indicator\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${ imgUrl })`,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<FlexItem as=\"span\">\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ imgLabel }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ filename\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Selected image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: __( 'No image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\nfunction BackgroundImagePanelItem( {\n\tclientId,\n\tisShownByDefault,\n\tsetAttributes,\n} ) {\n\tconst { style, mediaUpload } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\treturn {\n\t\t\t\tstyle: getBlockAttributes( clientId )?.style,\n\t\t\t\tmediaUpload: getSettings().mediaUpload,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { id, title, url } = style?.background?.backgroundImage || {};\n\n\tconst replaceContainerRef = useRef();\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t};\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tconst newStyle = {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundImage: undefined,\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst newAttributes = {\n\t\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\t};\n\n\t\t\tsetAttributes( newAttributes );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst newStyle = {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t};\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Background image' ) }\n\t\t\tonDeselect={ () => resetBackgroundImage( style, setAttributes ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-container\"\n\t\t\t\tref={ replaceContainerRef }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ url }\n\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\taccept=\"image/*\"\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\tname={\n\t\t\t\t\t\t<InspectorImagePreview\n\t\t\t\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t{ hasValue && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst [ toggleButton ] = focus.tabbable.find(\n\t\t\t\t\t\t\t\t\treplaceContainerRef.current\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t// Focus the toggle button and close the dropdown menu.\n\t\t\t\t\t\t\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t\t\t\t\t\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\t\t\t\t\t\t\ttoggleButton?.focus();\n\t\t\t\t\t\t\t\ttoggleButton?.click();\n\t\t\t\t\t\t\t\tresetBackgroundImage( style, setAttributes );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset ' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MediaReplaceFlow>\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Image covers the space evenly.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Image is contained without distortion.' );\n\t}\n\treturn __( 'Specify a fixed width.' );\n}\n\nexport const coordsToBackgroundPosition = ( value ) => {\n\tif ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst x = isNaN( value.x ) ? 0.5 : value.x;\n\tconst y = isNaN( value.y ) ? 0.5 : value.y;\n\n\treturn `${ x * 100 }% ${ y * 100 }%`;\n};\n\nexport const backgroundPositionToCoords = ( value ) => {\n\tif ( ! value ) {\n\t\treturn { x: undefined, y: undefined };\n\t}\n\n\tlet [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );\n\tx = isNaN( x ) ? undefined : x;\n\ty = isNaN( y ) ? x : y;\n\n\treturn { x, y };\n};\n\nfunction BackgroundSizePanelItem( {\n\tclientId,\n\tisShownByDefault,\n\tsetAttributes,\n} ) {\n\tconst style = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId )?.style,\n\t\t[ clientId ]\n\t);\n\n\tconst sizeValue = style?.background?.backgroundSize;\n\tconst repeatValue = style?.background?.backgroundRepeat;\n\n\t// An `undefined` value is treated as `cover` by the toggle group control.\n\t// An empty string is treated as `auto` by the toggle group control. This\n\t// allows a user to select \"Size\" and then enter a custom value, with an\n\t// empty value being treated as `auto`.\n\tconst currentValueForToggle =\n\t\t( sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ) ||\n\t\tsizeValue === ''\n\t\t\t? 'auto'\n\t\t\t: sizeValue || 'cover';\n\n\t// If the current value is `cover` and the repeat value is `undefined`, then\n\t// the toggle should be unchecked as the default state. Otherwise, the toggle\n\t// should reflect the current repeat value.\n\tconst repeatCheckedValue =\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t\t\t? false\n\t\t\t: true;\n\n\tconst hasValue = hasBackgroundSizeValue( style );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...previousValue.style?.background,\n\t\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\t\tbackgroundSize: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\t\tbackgroundSize: next,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\tconst updateBackgroundPosition = ( next ) => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundPosition: coordsToBackgroundPosition( next ),\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\tconst toggleIsRepeated = () => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t...style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...style?.background,\n\t\t\t\t\tbackgroundRepeat:\n\t\t\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : undefined,\n\t\t\t\t},\n\t\t\t} ),\n\t\t} );\n\t};\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Size' ) }\n\t\t\tonDeselect={ () => resetBackgroundSize( style, setAttributes ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<FocalPointPicker\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Position' ) }\n\t\t\t\turl={ style?.background?.backgroundImage?.url }\n\t\t\t\tvalue={ backgroundPositionToCoords(\n\t\t\t\t\tstyle?.background?.backgroundPosition\n\t\t\t\t) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock\n\t\t\t\thelp={ backgroundSizeHelpText( sizeValue ) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'cover' }\n\t\t\t\t\tvalue={ 'cover' }\n\t\t\t\t\tlabel={ __( 'Cover' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'contain' }\n\t\t\t\t\tvalue={ 'contain' }\n\t\t\t\t\tlabel={ __( 'Contain' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'auto' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ? (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t\t{ currentValueForToggle !== 'cover' && (\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Repeat' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function BackgroundImagePanel( props ) {\n\tconst [ backgroundImage, backgroundSize ] = useSettings(\n\t\t'background.backgroundImage',\n\t\t'background.backgroundSize'\n\t);\n\n\tif (\n\t\t! backgroundImage ||\n\t\t! hasBackgroundSupport( props.name, 'backgroundImage' )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst showBackgroundSize = !! (\n\t\tbackgroundSize && hasBackgroundSupport( props.name, 'backgroundSize' )\n\t);\n\n\tconst defaultControls = getBlockSupport( props.name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<InspectorControls group=\"background\">\n\t\t\t<BackgroundImagePanelItem\n\t\t\t\tisShownByDefault={ defaultControls?.backgroundImage }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t\t{ showBackgroundSize && (\n\t\t\t\t<BackgroundSizePanelItem\n\t\t\t\t\tisShownByDefault={ defaultControls?.backgroundSize }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["getBlockSupport","useSelect","useCallback","InspectorControls","cleanEmptyObject","store","blockEditorStore","default","StylesBackgroundPanel","useHasBackgroundPanel","hasBackgroundImageValue","BACKGROUND_SUPPORT_KEY","BACKGROUND_BLOCK_DEFAULT_VALUES","backgroundSize","hasBackgroundSupport","blockName","feature","support","backgroundImage","backgroundRepeat","setBackgroundStyleDefaults","backgroundStyle","backgroundStylesWithDefaults","source","url","backgroundPosition","useBlockProps","name","style","background","backgroundStyles","getBackgroundImageClasses","BackgroundInspectorControl","children","resetAllFilter","attributes","undefined","createElement","group","BackgroundImagePanel","clientId","setAttributes","settings","select","getBlockAttributes","defaultControls","onChange","newStyle","updatedSettings","as","panelId","defaultValues","value","attributeKeys","hasSupport"],"sources":["@wordpress/block-editor/src/hooks/background.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tdefault as StylesBackgroundPanel,\n\tuseHasBackgroundPanel,\n\thasBackgroundImageValue,\n} from '../components/global-styles/background-panel';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\n\n// Initial control values where no block style is set.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n};\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn (\n\t\t\t!! support?.backgroundImage ||\n\t\t\t!! support?.backgroundSize ||\n\t\t\t!! support?.backgroundRepeat\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport function setBackgroundStyleDefaults( backgroundStyle ) {\n\tif ( ! backgroundStyle ) {\n\t\treturn;\n\t}\n\n\tconst backgroundImage = backgroundStyle?.backgroundImage;\n\tlet backgroundStylesWithDefaults;\n\n\t// Set block background defaults.\n\tif ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {\n\t\tif ( ! backgroundStyle?.backgroundSize ) {\n\t\t\tbackgroundStylesWithDefaults = {\n\t\t\t\tbackgroundSize: 'cover',\n\t\t\t};\n\t\t}\n\n\t\tif (\n\t\t\t'contain' === backgroundStyle?.backgroundSize &&\n\t\t\t! backgroundStyle?.backgroundPosition\n\t\t) {\n\t\t\tbackgroundStylesWithDefaults = {\n\t\t\t\tbackgroundPosition: 'center',\n\t\t\t};\n\t\t}\n\t}\n\n\treturn backgroundStylesWithDefaults;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tif (\n\t\t! hasBackgroundSupport( name ) ||\n\t\t! style?.background?.backgroundImage\n\t) {\n\t\treturn;\n\t}\n\n\tconst backgroundStyles = setBackgroundStyleDefaults( style?.background );\n\n\tif ( ! backgroundStyles ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tstyle: {\n\t\t\t...backgroundStyles,\n\t\t},\n\t};\n}\n\n/**\n * Generates a CSS class name if an background image is set.\n *\n * @param {Object} style A block's style attribute.\n *\n * @return {string} CSS class name.\n */\nexport function getBackgroundImageClasses( style ) {\n\treturn hasBackgroundImageValue( style ) ? 'has-background' : '';\n}\n\nfunction BackgroundInspectorControl( { children } ) {\n\tconst resetAllFilter = useCallback( ( attributes ) => {\n\t\treturn {\n\t\t\t...attributes,\n\t\t\tstyle: {\n\t\t\t\t...attributes.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<InspectorControls group=\"background\" resetAllFilter={ resetAllFilter }>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BackgroundImagePanel( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n} ) {\n\tconst style = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId )?.style,\n\t\t[ clientId ]\n\t);\n\n\tif (\n\t\t! useHasBackgroundPanel( settings ) ||\n\t\t! hasBackgroundSupport( name, 'backgroundImage' )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst defaultControls = getBlockSupport( name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\tconst updatedSettings = {\n\t\t...settings,\n\t\tbackground: {\n\t\t\t...settings.background,\n\t\t\tbackgroundSize:\n\t\t\t\tsettings?.background?.backgroundSize &&\n\t\t\t\thasBackgroundSupport( name, 'backgroundSize' ),\n\t\t},\n\t};\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tas={ BackgroundInspectorControl }\n\t\t\tpanelId={ clientId }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\tsettings={ updatedSettings }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ style }\n\t\t/>\n\t);\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport: hasBackgroundSupport,\n};\n"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import { createBlockEditFilter, createBlockListBlockFilter, createBlockSaveFilter } from './utils';
|
|
5
5
|
import './compat';
|
|
6
6
|
import align from './align';
|
|
7
|
+
import background from './background';
|
|
7
8
|
import './lock';
|
|
8
9
|
import anchor from './anchor';
|
|
9
10
|
import ariaLabel from './aria-label';
|
|
@@ -26,7 +27,7 @@ import blockHooks from './block-hooks';
|
|
|
26
27
|
import blockRenaming from './block-renaming';
|
|
27
28
|
import './use-bindings-attributes';
|
|
28
29
|
createBlockEditFilter([align, anchor, customClassName, style, duotone, position, layout, contentLockUI, blockHooks, blockRenaming, childLayout].filter(Boolean));
|
|
29
|
-
createBlockListBlockFilter([align, style, color, dimensions, duotone, fontFamily, fontSize, border, position, childLayout]);
|
|
30
|
+
createBlockListBlockFilter([align, background, style, color, dimensions, duotone, fontFamily, fontSize, border, position, childLayout]);
|
|
30
31
|
createBlockSaveFilter([align, anchor, ariaLabel, customClassName, border, color, style, fontFamily, fontSize]);
|
|
31
32
|
export { useCustomSides } from './dimensions';
|
|
32
33
|
export { useLayoutClasses, useLayoutStyles } from './layout';
|
|
@@ -37,4 +38,5 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
|
|
|
37
38
|
export { getTypographyClassesAndStyles } from './use-typography-props';
|
|
38
39
|
export { getGapCSSValue } from './gap';
|
|
39
40
|
export { useCachedTruthy } from './use-cached-truthy';
|
|
41
|
+
export { useZoomOut } from './use-zoom-out';
|
|
40
42
|
//# sourceMappingURL=index.js.map
|