@wordpress/block-editor 9.7.0 → 9.7.1-next.d6164808d3.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/build/components/block-alignment-control/use-available-alignments.js +1 -1
- package/build/components/block-alignment-control/use-available-alignments.js.map +1 -1
- package/build/components/block-edit-visually-button/index.js +46 -0
- package/build/components/block-edit-visually-button/index.js.map +1 -0
- package/build/components/block-popover/inbetween.js +4 -2
- package/build/components/block-popover/inbetween.js.map +1 -1
- package/build/components/block-settings-menu/index.js +2 -6
- package/build/components/block-settings-menu/index.js.map +1 -1
- package/build/components/block-switcher/index.js +10 -16
- package/build/components/block-switcher/index.js.map +1 -1
- package/build/components/block-toolbar/index.js +5 -1
- package/build/components/block-toolbar/index.js.map +1 -1
- package/build/components/border-radius-control/all-input-control.js +31 -3
- package/build/components/border-radius-control/all-input-control.js.map +1 -1
- package/build/components/border-radius-control/index.js +20 -6
- package/build/components/border-radius-control/index.js.map +1 -1
- package/build/components/border-radius-control/input-controls.js +21 -6
- package/build/components/border-radius-control/input-controls.js.map +1 -1
- package/build/components/border-radius-control/utils.js +13 -16
- package/build/components/border-radius-control/utils.js.map +1 -1
- package/build/components/colors/with-colors.js +17 -4
- package/build/components/colors/with-colors.js.map +1 -1
- package/build/components/copy-handler/index.js +6 -0
- package/build/components/copy-handler/index.js.map +1 -1
- package/build/components/date-format-picker/index.js +2 -7
- package/build/components/date-format-picker/index.js.map +1 -1
- package/build/components/duotone/components.js +5 -5
- package/build/components/duotone/components.js.map +1 -1
- package/build/components/font-family/index.js +1 -1
- package/build/components/font-family/index.js.map +1 -1
- package/build/components/font-sizes/with-font-sizes.js +17 -4
- package/build/components/font-sizes/with-font-sizes.js.map +1 -1
- package/build/components/index.js +9 -0
- package/build/components/index.js.map +1 -1
- package/build/components/inserter/search-items.js +22 -4
- package/build/components/inserter/search-items.js.map +1 -1
- package/build/components/link-control/link-preview.js +0 -1
- package/build/components/link-control/link-preview.js.map +1 -1
- package/build/components/list-view/block-select-button.js +5 -2
- package/build/components/list-view/block-select-button.js.map +1 -1
- package/build/components/list-view/use-block-selection.js +1 -7
- package/build/components/list-view/use-block-selection.js.map +1 -1
- package/build/components/rich-text/use-enter.js +0 -4
- package/build/components/rich-text/use-enter.js.map +1 -1
- package/build/components/rich-text/use-format-types.js +8 -11
- package/build/components/rich-text/use-format-types.js.map +1 -1
- package/build/components/spacing-sizes-control/all-input-control.js +53 -0
- package/build/components/spacing-sizes-control/all-input-control.js.map +1 -0
- package/build/components/spacing-sizes-control/axial-input-controls.js +69 -0
- package/build/components/spacing-sizes-control/axial-input-controls.js.map +1 -0
- package/build/components/spacing-sizes-control/index.js +100 -0
- package/build/components/spacing-sizes-control/index.js.map +1 -0
- package/build/components/spacing-sizes-control/input-controls.js +52 -0
- package/build/components/spacing-sizes-control/input-controls.js.map +1 -0
- package/build/components/spacing-sizes-control/linked-button.js +38 -0
- package/build/components/spacing-sizes-control/linked-button.js.map +1 -0
- package/build/components/spacing-sizes-control/spacing-input-control.js +208 -0
- package/build/components/spacing-sizes-control/spacing-input-control.js.map +1 -0
- package/build/components/spacing-sizes-control/utils.js +202 -0
- package/build/components/spacing-sizes-control/utils.js.map +1 -0
- package/build/components/url-input/index.js +1 -1
- package/build/components/url-input/index.js.map +1 -1
- package/build/components/writing-flow/use-multi-selection.js +4 -2
- package/build/components/writing-flow/use-multi-selection.js.map +1 -1
- package/build/components/writing-flow/use-selection-observer.js +10 -2
- package/build/components/writing-flow/use-selection-observer.js.map +1 -1
- package/build/hooks/border-radius.js +2 -7
- package/build/hooks/border-radius.js.map +1 -1
- package/build/hooks/border.js +2 -2
- package/build/hooks/border.js.map +1 -1
- package/build/hooks/color.js +4 -1
- package/build/hooks/color.js.map +1 -1
- package/build/hooks/dimensions.js +15 -0
- package/build/hooks/dimensions.js.map +1 -1
- package/build/hooks/duotone.js +4 -4
- package/build/hooks/duotone.js.map +1 -1
- package/build/hooks/gap.js +6 -4
- package/build/hooks/gap.js.map +1 -1
- package/build/hooks/generated-class-name.js +1 -7
- package/build/hooks/generated-class-name.js.map +1 -1
- package/build/hooks/layout.js +20 -12
- package/build/hooks/layout.js.map +1 -1
- package/build/hooks/margin.js +28 -12
- package/build/hooks/margin.js.map +1 -1
- package/build/hooks/padding.js +19 -8
- package/build/hooks/padding.js.map +1 -1
- package/build/hooks/style.js +4 -50
- package/build/hooks/style.js.map +1 -1
- package/build/layouts/constrained.js +215 -0
- package/build/layouts/constrained.js.map +1 -0
- package/build/layouts/flex.js +1 -1
- package/build/layouts/flex.js.map +1 -1
- package/build/layouts/flow.js +7 -169
- package/build/layouts/flow.js.map +1 -1
- package/build/layouts/index.js +3 -1
- package/build/layouts/index.js.map +1 -1
- package/build/layouts/utils.js +43 -0
- package/build/layouts/utils.js.map +1 -1
- package/build/store/actions.js +25 -3
- package/build/store/actions.js.map +1 -1
- package/build/store/selectors.js +4 -6
- package/build/store/selectors.js.map +1 -1
- package/build-module/components/block-alignment-control/use-available-alignments.js +1 -1
- package/build-module/components/block-alignment-control/use-available-alignments.js.map +1 -1
- package/build-module/components/block-edit-visually-button/index.js +35 -0
- package/build-module/components/block-edit-visually-button/index.js.map +1 -0
- package/build-module/components/block-popover/inbetween.js +4 -2
- package/build-module/components/block-popover/inbetween.js.map +1 -1
- package/build-module/components/block-settings-menu/index.js +3 -6
- package/build-module/components/block-settings-menu/index.js.map +1 -1
- package/build-module/components/block-switcher/index.js +10 -16
- package/build-module/components/block-switcher/index.js.map +1 -1
- package/build-module/components/block-toolbar/index.js +4 -1
- package/build-module/components/block-toolbar/index.js.map +1 -1
- package/build-module/components/border-radius-control/all-input-control.js +32 -4
- package/build-module/components/border-radius-control/all-input-control.js.map +1 -1
- package/build-module/components/border-radius-control/index.js +20 -6
- package/build-module/components/border-radius-control/index.js.map +1 -1
- package/build-module/components/border-radius-control/input-controls.js +22 -7
- package/build-module/components/border-radius-control/input-controls.js.map +1 -1
- package/build-module/components/border-radius-control/utils.js +13 -16
- package/build-module/components/border-radius-control/utils.js.map +1 -1
- package/build-module/components/colors/with-colors.js +16 -3
- package/build-module/components/colors/with-colors.js.map +1 -1
- package/build-module/components/copy-handler/index.js +7 -1
- package/build-module/components/copy-handler/index.js.map +1 -1
- package/build-module/components/date-format-picker/index.js +2 -6
- package/build-module/components/date-format-picker/index.js.map +1 -1
- package/build-module/components/duotone/components.js +5 -5
- package/build-module/components/duotone/components.js.map +1 -1
- package/build-module/components/font-family/index.js +1 -1
- package/build-module/components/font-family/index.js.map +1 -1
- package/build-module/components/font-sizes/with-font-sizes.js +16 -3
- package/build-module/components/font-sizes/with-font-sizes.js.map +1 -1
- package/build-module/components/index.js +1 -0
- package/build-module/components/index.js.map +1 -1
- package/build-module/components/inserter/search-items.js +19 -5
- package/build-module/components/inserter/search-items.js.map +1 -1
- package/build-module/components/link-control/link-preview.js +0 -1
- package/build-module/components/link-control/link-preview.js.map +1 -1
- package/build-module/components/list-view/block-select-button.js +5 -2
- package/build-module/components/list-view/block-select-button.js.map +1 -1
- package/build-module/components/list-view/use-block-selection.js +1 -6
- package/build-module/components/list-view/use-block-selection.js.map +1 -1
- package/build-module/components/rich-text/use-enter.js +0 -4
- package/build-module/components/rich-text/use-enter.js.map +1 -1
- package/build-module/components/rich-text/use-format-types.js +8 -10
- package/build-module/components/rich-text/use-format-types.js.map +1 -1
- package/build-module/components/spacing-sizes-control/all-input-control.js +41 -0
- package/build-module/components/spacing-sizes-control/all-input-control.js.map +1 -0
- package/build-module/components/spacing-sizes-control/axial-input-controls.js +57 -0
- package/build-module/components/spacing-sizes-control/axial-input-controls.js.map +1 -0
- package/build-module/components/spacing-sizes-control/index.js +83 -0
- package/build-module/components/spacing-sizes-control/index.js.map +1 -0
- package/build-module/components/spacing-sizes-control/input-controls.js +41 -0
- package/build-module/components/spacing-sizes-control/input-controls.js.map +1 -0
- package/build-module/components/spacing-sizes-control/linked-button.js +28 -0
- package/build-module/components/spacing-sizes-control/linked-button.js.map +1 -0
- package/build-module/components/spacing-sizes-control/spacing-input-control.js +192 -0
- package/build-module/components/spacing-sizes-control/spacing-input-control.js.map +1 -0
- package/build-module/components/spacing-sizes-control/utils.js +174 -0
- package/build-module/components/spacing-sizes-control/utils.js.map +1 -0
- package/build-module/components/url-input/index.js +1 -1
- package/build-module/components/url-input/index.js.map +1 -1
- package/build-module/components/writing-flow/use-multi-selection.js +4 -2
- package/build-module/components/writing-flow/use-multi-selection.js.map +1 -1
- package/build-module/components/writing-flow/use-selection-observer.js +10 -2
- package/build-module/components/writing-flow/use-selection-observer.js.map +1 -1
- package/build-module/hooks/border-radius.js +2 -7
- package/build-module/hooks/border-radius.js.map +1 -1
- package/build-module/hooks/border.js +2 -2
- package/build-module/hooks/border.js.map +1 -1
- package/build-module/hooks/color.js +4 -1
- package/build-module/hooks/color.js.map +1 -1
- package/build-module/hooks/dimensions.js +13 -0
- package/build-module/hooks/dimensions.js.map +1 -1
- package/build-module/hooks/duotone.js +4 -4
- package/build-module/hooks/duotone.js.map +1 -1
- package/build-module/hooks/gap.js +3 -2
- package/build-module/hooks/gap.js.map +1 -1
- package/build-module/hooks/generated-class-name.js +1 -6
- package/build-module/hooks/generated-class-name.js.map +1 -1
- package/build-module/hooks/layout.js +20 -12
- package/build-module/hooks/layout.js.map +1 -1
- package/build-module/hooks/margin.js +26 -12
- package/build-module/hooks/margin.js.map +1 -1
- package/build-module/hooks/padding.js +17 -8
- package/build-module/hooks/padding.js.map +1 -1
- package/build-module/hooks/style.js +7 -53
- package/build-module/hooks/style.js.map +1 -1
- package/build-module/layouts/constrained.js +197 -0
- package/build-module/layouts/constrained.js.map +1 -0
- package/build-module/layouts/flex.js +1 -1
- package/build-module/layouts/flex.js.map +1 -1
- package/build-module/layouts/flow.js +8 -163
- package/build-module/layouts/flow.js.map +1 -1
- package/build-module/layouts/index.js +2 -1
- package/build-module/layouts/index.js.map +1 -1
- package/build-module/layouts/utils.js +40 -0
- package/build-module/layouts/utils.js.map +1 -1
- package/build-module/store/actions.js +25 -3
- package/build-module/store/actions.js.map +1 -1
- package/build-module/store/selectors.js +5 -7
- package/build-module/store/selectors.js.map +1 -1
- package/build-style/style-rtl.css +115 -20
- package/build-style/style.css +115 -20
- package/package.json +30 -28
- package/src/components/block-alignment-control/use-available-alignments.js +1 -1
- package/src/components/block-edit-visually-button/index.js +39 -0
- package/src/components/block-popover/inbetween.js +4 -1
- package/src/components/block-settings-menu/index.js +11 -15
- package/src/components/block-switcher/index.js +9 -13
- package/src/components/block-switcher/test/index.js +1 -0
- package/src/components/block-toolbar/index.js +2 -0
- package/src/components/border-radius-control/all-input-control.js +41 -4
- package/src/components/border-radius-control/index.js +25 -5
- package/src/components/border-radius-control/input-controls.js +40 -13
- package/src/components/border-radius-control/test/utils.js +22 -60
- package/src/components/border-radius-control/utils.js +12 -16
- package/src/components/colors/with-colors.js +11 -1
- package/src/components/copy-handler/index.js +18 -0
- package/src/components/date-format-picker/index.js +12 -14
- package/src/components/date-format-picker/style.scss +0 -4
- package/src/components/duotone/components.js +5 -5
- package/src/components/duotone-control/style.scss +0 -4
- package/src/components/font-appearance-control/style.scss +0 -2
- package/src/components/font-family/index.js +1 -1
- package/src/components/font-sizes/with-font-sizes.js +11 -1
- package/src/components/index.js +1 -0
- package/src/components/inserter/search-items.js +17 -5
- package/src/components/link-control/link-preview.js +0 -1
- package/src/components/link-control/test/index.js +540 -893
- package/src/components/list-view/block-select-button.js +7 -2
- package/src/components/list-view/style.scss +11 -4
- package/src/components/list-view/use-block-selection.js +2 -8
- package/src/components/media-replace-flow/style.scss +1 -0
- package/src/components/rich-text/use-enter.js +0 -3
- package/src/components/rich-text/use-format-types.js +6 -6
- package/src/components/spacing-sizes-control/all-input-control.js +40 -0
- package/src/components/spacing-sizes-control/axial-input-controls.js +62 -0
- package/src/components/spacing-sizes-control/index.js +91 -0
- package/src/components/spacing-sizes-control/input-controls.js +46 -0
- package/src/components/spacing-sizes-control/linked-button.js +25 -0
- package/src/components/spacing-sizes-control/spacing-input-control.js +280 -0
- package/src/components/spacing-sizes-control/style.scss +122 -0
- package/src/components/spacing-sizes-control/test/utils.js +156 -0
- package/src/components/spacing-sizes-control/utils.js +195 -0
- package/src/components/url-input/index.js +1 -1
- package/src/components/url-input/style.scss +2 -2
- package/src/components/url-popover/style.scss +0 -3
- package/src/components/writing-flow/use-multi-selection.js +4 -1
- package/src/components/writing-flow/use-selection-observer.js +10 -2
- package/src/hooks/border-radius.js +2 -6
- package/src/hooks/border.js +2 -2
- package/src/hooks/color.js +13 -3
- package/src/hooks/dimensions.js +15 -0
- package/src/hooks/duotone.js +4 -4
- package/src/hooks/gap.js +7 -2
- package/src/hooks/generated-class-name.js +6 -9
- package/src/hooks/layout.js +45 -14
- package/src/hooks/margin.js +49 -17
- package/src/hooks/padding.js +41 -14
- package/src/hooks/style.js +5 -56
- package/src/hooks/test/gap.js +22 -0
- package/src/hooks/typography.scss +0 -1
- package/src/layouts/constrained.js +217 -0
- package/src/layouts/flex.js +1 -1
- package/src/layouts/flow.js +6 -173
- package/src/layouts/index.js +2 -1
- package/src/layouts/test/constrained.js +21 -0
- package/src/layouts/utils.js +34 -0
- package/src/store/actions.js +32 -4
- package/src/store/selectors.js +5 -4
- package/src/style.scss +1 -0
- package/build/components/block-settings-menu/block-edit-visually-button.js +0 -70
- package/build/components/block-settings-menu/block-edit-visually-button.js.map +0 -1
- package/build-module/components/block-settings-menu/block-edit-visually-button.js +0 -56
- package/build-module/components/block-settings-menu/block-edit-visually-button.js.map +0 -1
- package/src/components/block-settings-menu/block-edit-visually-button.js +0 -52
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-format-types.js"],"names":["
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/rich-text/use-format-types.js"],"names":["useMemo","useSelect","useDispatch","store","richTextStore","formatTypesSelector","select","getFormatTypes","interactiveContentTags","Set","prefixSelectKeys","selected","prefix","Object","fromEntries","entries","map","key","value","getPrefixedSelectKeys","keys","filter","startsWith","reduce","accumulator","slice","length","useFormatTypes","clientId","identifier","withoutInteractiveFormatting","allowedFormats","allFormatTypes","formatTypes","name","tagName","includes","has","keyedSelected","type","__experimentalGetPropsForEditableTreePreparation","richTextIdentifier","blockClientId","dispatch","prepareHandlers","valueHandlers","changeHandlers","dependencies","push","forEach","__experimentalCreatePrepareEditableTree","handler","__experimentalCreateOnChangeEditableValue","dispatchers","__experimentalGetPropsForEditableTreeChangeHandler"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as richTextStore } from '@wordpress/rich-text';\n\nfunction formatTypesSelector( select ) {\n\treturn select( richTextStore ).getFormatTypes();\n}\n\n/**\n * Set of all interactive content tags.\n *\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n */\nconst interactiveContentTags = new Set( [\n\t'a',\n\t'audio',\n\t'button',\n\t'details',\n\t'embed',\n\t'iframe',\n\t'input',\n\t'label',\n\t'select',\n\t'textarea',\n\t'video',\n] );\n\nfunction prefixSelectKeys( selected, prefix ) {\n\tif ( typeof selected !== 'object' ) return { [ prefix ]: selected };\n\treturn Object.fromEntries(\n\t\tObject.entries( selected ).map( ( [ key, value ] ) => [\n\t\t\t`${ prefix }.${ key }`,\n\t\t\tvalue,\n\t\t] )\n\t);\n}\n\nfunction getPrefixedSelectKeys( selected, prefix ) {\n\tif ( selected[ prefix ] ) return selected[ prefix ];\n\treturn Object.keys( selected )\n\t\t.filter( ( key ) => key.startsWith( prefix + '.' ) )\n\t\t.reduce( ( accumulator, key ) => {\n\t\t\taccumulator[ key.slice( prefix.length + 1 ) ] = selected[ key ];\n\t\t\treturn accumulator;\n\t\t}, {} );\n}\n\n/**\n * This hook provides RichText with the `formatTypes` and its derived props from\n * experimental format type settings.\n *\n * @param {Object} $0 Options\n * @param {string} $0.clientId Block client ID.\n * @param {string} $0.identifier Block attribute.\n * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formattings or not.\n * @param {Array} $0.allowedFormats Allowed formats\n */\nexport function useFormatTypes( {\n\tclientId,\n\tidentifier,\n\twithoutInteractiveFormatting,\n\tallowedFormats,\n} ) {\n\tconst allFormatTypes = useSelect( formatTypesSelector, [] );\n\tconst formatTypes = useMemo( () => {\n\t\treturn allFormatTypes.filter( ( { name, tagName } ) => {\n\t\t\tif ( allowedFormats && ! allowedFormats.includes( name ) ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\twithoutInteractiveFormatting &&\n\t\t\t\tinteractiveContentTags.has( tagName )\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn true;\n\t\t} );\n\t}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );\n\tconst keyedSelected = useSelect(\n\t\t( select ) =>\n\t\t\tformatTypes.reduce( ( accumulator, type ) => {\n\t\t\t\tif ( ! type.__experimentalGetPropsForEditableTreePreparation ) {\n\t\t\t\t\treturn accumulator;\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\t...accumulator,\n\t\t\t\t\t...prefixSelectKeys(\n\t\t\t\t\t\ttype.__experimentalGetPropsForEditableTreePreparation(\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t\ttype.name\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}, {} ),\n\t\t[ formatTypes, clientId, identifier ]\n\t);\n\tconst dispatch = useDispatch();\n\tconst prepareHandlers = [];\n\tconst valueHandlers = [];\n\tconst changeHandlers = [];\n\tconst dependencies = [];\n\n\tfor ( const key in keyedSelected ) {\n\t\tdependencies.push( keyedSelected[ key ] );\n\t}\n\n\tformatTypes.forEach( ( type ) => {\n\t\tif ( type.__experimentalCreatePrepareEditableTree ) {\n\t\t\tconst handler = type.__experimentalCreatePrepareEditableTree(\n\t\t\t\tgetPrefixedSelectKeys( keyedSelected, type.name ),\n\t\t\t\t{\n\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t}\n\t\t\t);\n\n\t\t\tif ( type.__experimentalCreateOnChangeEditableValue ) {\n\t\t\t\tvalueHandlers.push( handler );\n\t\t\t} else {\n\t\t\t\tprepareHandlers.push( handler );\n\t\t\t}\n\t\t}\n\n\t\tif ( type.__experimentalCreateOnChangeEditableValue ) {\n\t\t\tlet dispatchers = {};\n\n\t\t\tif ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {\n\t\t\t\tdispatchers =\n\t\t\t\t\ttype.__experimentalGetPropsForEditableTreeChangeHandler(\n\t\t\t\t\t\tdispatch,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst selected = getPrefixedSelectKeys( keyedSelected, type.name );\n\t\t\tchangeHandlers.push(\n\t\t\t\ttype.__experimentalCreateOnChangeEditableValue(\n\t\t\t\t\t{\n\t\t\t\t\t\t...( typeof selected === 'object' ? selected : {} ),\n\t\t\t\t\t\t...dispatchers,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\trichTextIdentifier: identifier,\n\t\t\t\t\t\tblockClientId: clientId,\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t};\n}\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { createElement } from "@wordpress/element";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* WordPress dependencies
|
|
5
|
+
*/
|
|
6
|
+
import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
|
|
7
|
+
/**
|
|
8
|
+
* Internal dependencies
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import SpacingInputControl from './spacing-input-control';
|
|
12
|
+
import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
|
|
13
|
+
export default function AllInputControl(_ref) {
|
|
14
|
+
let {
|
|
15
|
+
onChange,
|
|
16
|
+
values,
|
|
17
|
+
sides,
|
|
18
|
+
spacingSizes,
|
|
19
|
+
type,
|
|
20
|
+
minimumCustomValue
|
|
21
|
+
} = _ref;
|
|
22
|
+
const allValue = getAllRawValue(values);
|
|
23
|
+
const hasValues = isValuesDefined(values);
|
|
24
|
+
const isMixed = hasValues && isValuesMixed(values, sides);
|
|
25
|
+
|
|
26
|
+
const handleOnChange = next => {
|
|
27
|
+
const nextValues = applyValueToSides(values, next, sides);
|
|
28
|
+
onChange(nextValues);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
return createElement(SpacingInputControl, {
|
|
32
|
+
value: allValue,
|
|
33
|
+
onChange: handleOnChange,
|
|
34
|
+
side: 'all',
|
|
35
|
+
spacingSizes: spacingSizes,
|
|
36
|
+
isMixed: isMixed,
|
|
37
|
+
type: type,
|
|
38
|
+
minimumCustomValue: minimumCustomValue
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=all-input-control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/all-input-control.js"],"names":["__experimentalApplyValueToSides","applyValueToSides","SpacingInputControl","getAllRawValue","isValuesMixed","isValuesDefined","AllInputControl","onChange","values","sides","spacingSizes","type","minimumCustomValue","allValue","hasValues","isMixed","handleOnChange","next","nextValues"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,+BAA+B,IAAIC,iBAA5C,QAAqE,uBAArE;AAEA;AACA;AACA;;AACA,OAAOC,mBAAP,MAAgC,yBAAhC;AACA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,eAAxC,QAA+D,SAA/D;AAEA,eAAe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,MAFwC;AAGxCC,IAAAA,KAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA;AANwC,GAOrC;AACH,QAAMC,QAAQ,GAAGV,cAAc,CAAEK,MAAF,CAA/B;AACA,QAAMM,SAAS,GAAGT,eAAe,CAAEG,MAAF,CAAjC;AACA,QAAMO,OAAO,GAAGD,SAAS,IAAIV,aAAa,CAAEI,MAAF,EAAUC,KAAV,CAA1C;;AAEA,QAAMO,cAAc,GAAKC,IAAF,IAAY;AAClC,UAAMC,UAAU,GAAGjB,iBAAiB,CAAEO,MAAF,EAAUS,IAAV,EAAgBR,KAAhB,CAApC;AACAF,IAAAA,QAAQ,CAAEW,UAAF,CAAR;AACA,GAHD;;AAKA,SACC,cAAC,mBAAD;AACC,IAAA,KAAK,EAAGL,QADT;AAEC,IAAA,QAAQ,EAAGG,cAFZ;AAGC,IAAA,IAAI,EAAG,KAHR;AAIC,IAAA,YAAY,EAAGN,YAJhB;AAKC,IAAA,OAAO,EAAGK,OALX;AAMC,IAAA,IAAI,EAAGJ,IANR;AAOC,IAAA,kBAAkB,EAAGC;AAPtB,IADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';\n\nexport default function AllInputControl( {\n\tonChange,\n\tvalues,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tminimumCustomValue,\n} ) {\n\tconst allValue = getAllRawValue( values );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, sides );\n\n\tconst handleOnChange = ( next ) => {\n\t\tconst nextValues = applyValueToSides( values, next, sides );\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<SpacingInputControl\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tside={ 'all' }\n\t\t\tspacingSizes={ spacingSizes }\n\t\t\tisMixed={ isMixed }\n\t\t\ttype={ type }\n\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t/>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { createElement, Fragment } from "@wordpress/element";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Internal dependencies
|
|
5
|
+
*/
|
|
6
|
+
import SpacingInputControl from './spacing-input-control';
|
|
7
|
+
import { LABELS } from './utils';
|
|
8
|
+
const groupedSides = ['vertical', 'horizontal'];
|
|
9
|
+
export default function AxialInputControls(_ref) {
|
|
10
|
+
let {
|
|
11
|
+
onChange,
|
|
12
|
+
values,
|
|
13
|
+
sides,
|
|
14
|
+
spacingSizes,
|
|
15
|
+
type,
|
|
16
|
+
minimumCustomValue
|
|
17
|
+
} = _ref;
|
|
18
|
+
|
|
19
|
+
const createHandleOnChange = side => next => {
|
|
20
|
+
if (!onChange) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const nextValues = { ...values
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
if (side === 'vertical') {
|
|
28
|
+
nextValues.top = next;
|
|
29
|
+
nextValues.bottom = next;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (side === 'horizontal') {
|
|
33
|
+
nextValues.left = next;
|
|
34
|
+
nextValues.right = next;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
onChange(nextValues);
|
|
38
|
+
}; // Filter sides if custom configuration provided, maintaining default order.
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
|
|
42
|
+
return createElement(Fragment, null, filteredSides.map(side => {
|
|
43
|
+
const axisValue = side === 'vertical' ? values.top : values.left;
|
|
44
|
+
return createElement(SpacingInputControl, {
|
|
45
|
+
value: axisValue,
|
|
46
|
+
onChange: createHandleOnChange(side),
|
|
47
|
+
label: LABELS[side],
|
|
48
|
+
key: `spacing-sizes-control-${side}`,
|
|
49
|
+
withInputField: false,
|
|
50
|
+
side: side,
|
|
51
|
+
spacingSizes: spacingSizes,
|
|
52
|
+
type: type,
|
|
53
|
+
minimumCustomValue: minimumCustomValue
|
|
54
|
+
});
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=axial-input-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/axial-input-controls.js"],"names":["SpacingInputControl","LABELS","groupedSides","AxialInputControls","onChange","values","sides","spacingSizes","type","minimumCustomValue","createHandleOnChange","side","next","nextValues","top","bottom","left","right","filteredSides","length","filter","includes","map","axisValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,mBAAP,MAAgC,yBAAhC;AACA,SAASC,MAAT,QAAuB,SAAvB;AAEA,MAAMC,YAAY,GAAG,CAAE,UAAF,EAAc,YAAd,CAArB;AAEA,eAAe,SAASC,kBAAT,OAOX;AAAA,MAPwC;AAC3CC,IAAAA,QAD2C;AAE3CC,IAAAA,MAF2C;AAG3CC,IAAAA,KAH2C;AAI3CC,IAAAA,YAJ2C;AAK3CC,IAAAA,IAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,QAAMC,oBAAoB,GAAKC,IAAF,IAAcC,IAAF,IAAY;AACpD,QAAK,CAAER,QAAP,EAAkB;AACjB;AACA;;AACD,UAAMS,UAAU,GAAG,EAAE,GAAGR;AAAL,KAAnB;;AAEA,QAAKM,IAAI,KAAK,UAAd,EAA2B;AAC1BE,MAAAA,UAAU,CAACC,GAAX,GAAiBF,IAAjB;AACAC,MAAAA,UAAU,CAACE,MAAX,GAAoBH,IAApB;AACA;;AAED,QAAKD,IAAI,KAAK,YAAd,EAA6B;AAC5BE,MAAAA,UAAU,CAACG,IAAX,GAAkBJ,IAAlB;AACAC,MAAAA,UAAU,CAACI,KAAX,GAAmBL,IAAnB;AACA;;AAEDR,IAAAA,QAAQ,CAAES,UAAF,CAAR;AACA,GAjBD,CADG,CAoBH;;;AACA,QAAMK,aAAa,GAAGZ,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEa,MAAP,GACnBjB,YAAY,CAACkB,MAAb,CAAuBT,IAAF,IAAYL,KAAK,CAACe,QAAN,CAAgBV,IAAhB,CAAjC,CADmB,GAEnBT,YAFH;AAIA,SACC,8BACGgB,aAAa,CAACI,GAAd,CAAqBX,IAAF,IAAY;AAChC,UAAMY,SAAS,GACdZ,IAAI,KAAK,UAAT,GAAsBN,MAAM,CAACS,GAA7B,GAAmCT,MAAM,CAACW,IAD3C;AAEA,WACC,cAAC,mBAAD;AACC,MAAA,KAAK,EAAGO,SADT;AAEC,MAAA,QAAQ,EAAGb,oBAAoB,CAAEC,IAAF,CAFhC;AAGC,MAAA,KAAK,EAAGV,MAAM,CAAEU,IAAF,CAHf;AAIC,MAAA,GAAG,EAAI,yBAAyBA,IAAM,EAJvC;AAKC,MAAA,cAAc,EAAG,KALlB;AAMC,MAAA,IAAI,EAAGA,IANR;AAOC,MAAA,YAAY,EAAGJ,YAPhB;AAQC,MAAA,IAAI,EAAGC,IARR;AASC,MAAA,kBAAkB,EAAGC;AATtB,MADD;AAaA,GAhBC,CADH,CADD;AAqBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { LABELS } from './utils';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tvalues,\n\tsides,\n\tspacingSizes,\n\ttype,\n\tminimumCustomValue,\n} ) {\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = next;\n\t\t\tnextValues.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = next;\n\t\t\tnextValues.right = next;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst axisValue =\n\t\t\t\t\tside === 'vertical' ? values.top : values.left;\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tvalue={ axisValue }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import { createElement } from "@wordpress/element";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* WordPress dependencies
|
|
6
|
+
*/
|
|
7
|
+
import { useState } from '@wordpress/element';
|
|
8
|
+
import { __ } from '@wordpress/i18n';
|
|
9
|
+
import { __experimentalText as Text } from '@wordpress/components';
|
|
10
|
+
/**
|
|
11
|
+
* Internal dependencies
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import AllInputControl from './all-input-control';
|
|
15
|
+
import InputControls from './input-controls';
|
|
16
|
+
import AxialInputControls from './axial-input-controls';
|
|
17
|
+
import LinkedButton from './linked-button';
|
|
18
|
+
import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
|
|
19
|
+
import useSetting from '../use-setting';
|
|
20
|
+
export default function SpacingSizesControl(_ref) {
|
|
21
|
+
let {
|
|
22
|
+
inputProps,
|
|
23
|
+
onChange,
|
|
24
|
+
label = __('Spacing Control'),
|
|
25
|
+
values,
|
|
26
|
+
sides,
|
|
27
|
+
splitOnAxis = false,
|
|
28
|
+
useSelect,
|
|
29
|
+
minimumCustomValue = 0
|
|
30
|
+
} = _ref;
|
|
31
|
+
const spacingSizes = [{
|
|
32
|
+
name: 0,
|
|
33
|
+
slug: '0',
|
|
34
|
+
size: 0
|
|
35
|
+
}, ...(useSetting('spacing.spacingSizes') || [])];
|
|
36
|
+
|
|
37
|
+
if (spacingSizes.length > 8) {
|
|
38
|
+
spacingSizes.unshift({
|
|
39
|
+
name: __('Default'),
|
|
40
|
+
slug: 'default',
|
|
41
|
+
size: undefined
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const inputValues = values || DEFAULT_VALUES;
|
|
46
|
+
const hasInitialValue = isValuesDefined(values);
|
|
47
|
+
const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
|
|
48
|
+
const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValuesMixed(inputValues, sides) || hasOneSide);
|
|
49
|
+
|
|
50
|
+
const toggleLinked = () => {
|
|
51
|
+
setIsLinked(!isLinked);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const handleOnChange = nextValue => {
|
|
55
|
+
const newValues = { ...values,
|
|
56
|
+
...nextValue
|
|
57
|
+
};
|
|
58
|
+
onChange(newValues);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const inputControlProps = { ...inputProps,
|
|
62
|
+
onChange: handleOnChange,
|
|
63
|
+
isLinked,
|
|
64
|
+
sides,
|
|
65
|
+
values: inputValues,
|
|
66
|
+
spacingSizes,
|
|
67
|
+
useSelect,
|
|
68
|
+
type: label,
|
|
69
|
+
minimumCustomValue
|
|
70
|
+
};
|
|
71
|
+
return createElement("fieldset", {
|
|
72
|
+
role: "region",
|
|
73
|
+
className: "component-spacing-sizes-control"
|
|
74
|
+
}, createElement(Text, {
|
|
75
|
+
as: "legend"
|
|
76
|
+
}, label), !hasOneSide && createElement(LinkedButton, {
|
|
77
|
+
onClick: toggleLinked,
|
|
78
|
+
isLinked: isLinked
|
|
79
|
+
}), isLinked && createElement(AllInputControl, _extends({
|
|
80
|
+
"aria-label": label
|
|
81
|
+
}, inputControlProps)), !isLinked && splitOnAxis && createElement(AxialInputControls, inputControlProps), !isLinked && !splitOnAxis && createElement(InputControls, inputControlProps));
|
|
82
|
+
}
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/index.js"],"names":["useState","__","__experimentalText","Text","AllInputControl","InputControls","AxialInputControls","LinkedButton","DEFAULT_VALUES","isValuesMixed","isValuesDefined","useSetting","SpacingSizesControl","inputProps","onChange","label","values","sides","splitOnAxis","useSelect","minimumCustomValue","spacingSizes","name","slug","size","length","unshift","undefined","inputValues","hasInitialValue","hasOneSide","isLinked","setIsLinked","toggleLinked","handleOnChange","nextValue","newValues","inputControlProps","type"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport LinkedButton from './linked-button';\nimport { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';\nimport useSetting from '../use-setting';\n\nexport default function SpacingSizesControl( {\n\tinputProps,\n\tonChange,\n\tlabel = __( 'Spacing Control' ),\n\tvalues,\n\tsides,\n\tsplitOnAxis = false,\n\tuseSelect,\n\tminimumCustomValue = 0,\n} ) {\n\tconst spacingSizes = [\n\t\t{ name: 0, slug: '0', size: 0 },\n\t\t...( useSetting( 'spacing.spacingSizes' ) || [] ),\n\t];\n\n\tif ( spacingSizes.length > 8 ) {\n\t\tspacingSizes.unshift( {\n\t\t\tname: __( 'Default' ),\n\t\t\tslug: 'default',\n\t\t\tsize: undefined,\n\t\t} );\n\t}\n\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( values );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide\n\t);\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t};\n\n\tconst handleOnChange = ( nextValue ) => {\n\t\tconst newValues = { ...values, ...nextValue };\n\t\tonChange( newValues );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tisLinked,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tspacingSizes,\n\t\tuseSelect,\n\t\ttype: label,\n\t\tminimumCustomValue,\n\t};\n\n\treturn (\n\t\t<fieldset role=\"region\" className=\"component-spacing-sizes-control\">\n\t\t\t<Text as=\"legend\">{ label }</Text>\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t) }\n\t\t\t{ isLinked && (\n\t\t\t\t<AllInputControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { createElement, Fragment } from "@wordpress/element";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Internal dependencies
|
|
5
|
+
*/
|
|
6
|
+
import SpacingInputControl from './spacing-input-control';
|
|
7
|
+
import { ALL_SIDES, LABELS } from './utils';
|
|
8
|
+
export default function BoxInputControls(_ref) {
|
|
9
|
+
let {
|
|
10
|
+
values,
|
|
11
|
+
sides,
|
|
12
|
+
onChange,
|
|
13
|
+
spacingSizes,
|
|
14
|
+
type,
|
|
15
|
+
minimumCustomValue
|
|
16
|
+
} = _ref;
|
|
17
|
+
// Filter sides if custom configuration provided, maintaining default order.
|
|
18
|
+
const filteredSides = sides !== null && sides !== void 0 && sides.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
|
|
19
|
+
|
|
20
|
+
const createHandleOnChange = side => next => {
|
|
21
|
+
const nextValues = { ...values
|
|
22
|
+
};
|
|
23
|
+
nextValues[side] = next;
|
|
24
|
+
onChange(nextValues);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return createElement(Fragment, null, filteredSides.map(side => {
|
|
28
|
+
return createElement(SpacingInputControl, {
|
|
29
|
+
value: values[side],
|
|
30
|
+
label: LABELS[side],
|
|
31
|
+
key: `spacing-sizes-control-${side}`,
|
|
32
|
+
withInputField: false,
|
|
33
|
+
side: side,
|
|
34
|
+
onChange: createHandleOnChange(side),
|
|
35
|
+
spacingSizes: spacingSizes,
|
|
36
|
+
type: type,
|
|
37
|
+
minimumCustomValue: minimumCustomValue
|
|
38
|
+
});
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=input-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/input-controls.js"],"names":["SpacingInputControl","ALL_SIDES","LABELS","BoxInputControls","values","sides","onChange","spacingSizes","type","minimumCustomValue","filteredSides","length","filter","side","includes","createHandleOnChange","next","nextValues","map"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,mBAAP,MAAgC,yBAAhC;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,SAAlC;AAEA,eAAe,SAASC,gBAAT,OAOX;AAAA,MAPsC;AACzCC,IAAAA,MADyC;AAEzCC,IAAAA,KAFyC;AAGzCC,IAAAA,QAHyC;AAIzCC,IAAAA,YAJyC;AAKzCC,IAAAA,IALyC;AAMzCC,IAAAA;AANyC,GAOtC;AACH;AACA,QAAMC,aAAa,GAAGL,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEM,MAAP,GACnBV,SAAS,CAACW,MAAV,CAAoBC,IAAF,IAAYR,KAAK,CAACS,QAAN,CAAgBD,IAAhB,CAA9B,CADmB,GAEnBZ,SAFH;;AAIA,QAAMc,oBAAoB,GAAKF,IAAF,IAAcG,IAAF,IAAY;AACpD,UAAMC,UAAU,GAAG,EAAE,GAAGb;AAAL,KAAnB;AACAa,IAAAA,UAAU,CAAEJ,IAAF,CAAV,GAAqBG,IAArB;AAEAV,IAAAA,QAAQ,CAAEW,UAAF,CAAR;AACA,GALD;;AAOA,SACC,8BACGP,aAAa,CAACQ,GAAd,CAAqBL,IAAF,IAAY;AAChC,WACC,cAAC,mBAAD;AACC,MAAA,KAAK,EAAGT,MAAM,CAAES,IAAF,CADf;AAEC,MAAA,KAAK,EAAGX,MAAM,CAAEW,IAAF,CAFf;AAGC,MAAA,GAAG,EAAI,yBAAyBA,IAAM,EAHvC;AAIC,MAAA,cAAc,EAAG,KAJlB;AAKC,MAAA,IAAI,EAAGA,IALR;AAMC,MAAA,QAAQ,EAAGE,oBAAoB,CAAEF,IAAF,CANhC;AAOC,MAAA,YAAY,EAAGN,YAPhB;AAQC,MAAA,IAAI,EAAGC,IARR;AASC,MAAA,kBAAkB,EAAGC;AATtB,MADD;AAaA,GAdC,CADH,CADD;AAmBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport SpacingInputControl from './spacing-input-control';\nimport { ALL_SIDES, LABELS } from './utils';\n\nexport default function BoxInputControls( {\n\tvalues,\n\tsides,\n\tonChange,\n\tspacingSizes,\n\ttype,\n\tminimumCustomValue,\n} ) {\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tconst nextValues = { ...values };\n\t\tnextValues[ side ] = next;\n\n\t\tonChange( nextValues );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<SpacingInputControl\n\t\t\t\t\t\tvalue={ values[ side ] }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ `spacing-sizes-control-${ side }` }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tside={ side }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tspacingSizes={ spacingSizes }\n\t\t\t\t\t\ttype={ type }\n\t\t\t\t\t\tminimumCustomValue={ minimumCustomValue }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { createElement } from "@wordpress/element";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* WordPress dependencies
|
|
5
|
+
*/
|
|
6
|
+
import { link, linkOff } from '@wordpress/icons';
|
|
7
|
+
import { __ } from '@wordpress/i18n';
|
|
8
|
+
import { Button, Tooltip } from '@wordpress/components';
|
|
9
|
+
export default function LinkedButton(_ref) {
|
|
10
|
+
let {
|
|
11
|
+
isLinked,
|
|
12
|
+
onClick
|
|
13
|
+
} = _ref;
|
|
14
|
+
const label = isLinked ? __('Unlink Sides') : __('Link Sides');
|
|
15
|
+
return createElement(Tooltip, {
|
|
16
|
+
text: label
|
|
17
|
+
}, createElement("span", {
|
|
18
|
+
className: "component-spacing-sizes-control__linked-button"
|
|
19
|
+
}, createElement(Button, {
|
|
20
|
+
variant: isLinked ? 'primary' : 'secondary',
|
|
21
|
+
isSmall: true,
|
|
22
|
+
icon: isLinked ? link : linkOff,
|
|
23
|
+
iconSize: 16,
|
|
24
|
+
"aria-label": label,
|
|
25
|
+
onClick: onClick
|
|
26
|
+
})));
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=linked-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/linked-button.js"],"names":["link","linkOff","__","Button","Tooltip","LinkedButton","isLinked","onClick","label"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,EAAiBC,OAAjB,QAAgC,uBAAhC;AAEA,eAAe,SAASC,YAAT,OAA+C;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAC7D,QAAMC,KAAK,GAAGF,QAAQ,GAAGJ,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGM;AAAhB,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC,cAAC,MAAD;AACC,IAAA,OAAO,EAAGF,QAAQ,GAAG,SAAH,GAAe,WADlC;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,IAAI,EAAGA,QAAQ,GAAGN,IAAH,GAAUC,OAH1B;AAIC,IAAA,QAAQ,EAAG,EAJZ;AAKC,kBAAaO,KALd;AAMC,IAAA,OAAO,EAAGD;AANX,IADD,CADD,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { Button, Tooltip } from '@wordpress/components';\n\nexport default function LinkedButton( { isLinked, onClick } ) {\n\tconst label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<span className=\"component-spacing-sizes-control__linked-button\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Tooltip>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { createElement, Fragment } from "@wordpress/element";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* External dependencies
|
|
5
|
+
*/
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
/**
|
|
8
|
+
* WordPress dependencies
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { useState, useMemo } from '@wordpress/element';
|
|
12
|
+
import { useSelect } from '@wordpress/data';
|
|
13
|
+
import { Button, RangeControl, CustomSelectControl, __experimentalUnitControl as UnitControl, __experimentalHStack as HStack, __experimentalText as Text, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
|
|
14
|
+
import { __, sprintf } from '@wordpress/i18n';
|
|
15
|
+
import { settings } from '@wordpress/icons';
|
|
16
|
+
/**
|
|
17
|
+
* Internal dependencies
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
import useSetting from '../use-setting';
|
|
21
|
+
import { store as blockEditorStore } from '../../store';
|
|
22
|
+
import { LABELS, getSliderValueFromPreset, getCustomValueFromPreset, isValueSpacingPreset } from './utils';
|
|
23
|
+
export default function SpacingInputControl(_ref) {
|
|
24
|
+
var _spacingSizes$current;
|
|
25
|
+
|
|
26
|
+
let {
|
|
27
|
+
spacingSizes,
|
|
28
|
+
value,
|
|
29
|
+
side,
|
|
30
|
+
onChange,
|
|
31
|
+
isMixed = false,
|
|
32
|
+
type,
|
|
33
|
+
minimumCustomValue
|
|
34
|
+
} = _ref;
|
|
35
|
+
let selectListSizes = spacingSizes;
|
|
36
|
+
const showRangeControl = spacingSizes.length <= 8;
|
|
37
|
+
const disableCustomSpacingSizes = useSelect(select => {
|
|
38
|
+
const editorSettings = select(blockEditorStore).getSettings();
|
|
39
|
+
return editorSettings === null || editorSettings === void 0 ? void 0 : editorSettings.disableCustomSpacingSizes;
|
|
40
|
+
});
|
|
41
|
+
const [showCustomValueControl, setShowCustomValueControl] = useState(!disableCustomSpacingSizes && value !== undefined && !isValueSpacingPreset(value));
|
|
42
|
+
const units = useCustomUnits({
|
|
43
|
+
availableUnits: useSetting('spacing.units') || ['px', 'em', 'rem']
|
|
44
|
+
});
|
|
45
|
+
let currentValue = null;
|
|
46
|
+
const showCustomValueInSelectList = !showRangeControl && !showCustomValueControl && value !== undefined && (!isValueSpacingPreset(value) || isValueSpacingPreset(value) && isMixed);
|
|
47
|
+
|
|
48
|
+
if (showCustomValueInSelectList) {
|
|
49
|
+
selectListSizes = [...spacingSizes, {
|
|
50
|
+
name: !isMixed ? // translators: A custom measurement, eg. a number followed by a unit like 12px.
|
|
51
|
+
sprintf(__('Custom (%s)'), value) : __('Mixed'),
|
|
52
|
+
slug: 'custom',
|
|
53
|
+
size: value
|
|
54
|
+
}];
|
|
55
|
+
currentValue = selectListSizes.length - 1;
|
|
56
|
+
} else if (!isMixed) {
|
|
57
|
+
currentValue = !showCustomValueControl ? getSliderValueFromPreset(value, spacingSizes) : getCustomValueFromPreset(value, spacingSizes);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const selectedUnit = useMemo(() => parseQuantityAndUnitFromRawValue(currentValue), [currentValue])[1] || units[0].value;
|
|
61
|
+
|
|
62
|
+
const setInitialValue = () => {
|
|
63
|
+
if (value === undefined) {
|
|
64
|
+
onChange('0');
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const customTooltipContent = newValue => {
|
|
69
|
+
var _spacingSizes$newValu;
|
|
70
|
+
|
|
71
|
+
return value === undefined ? undefined : (_spacingSizes$newValu = spacingSizes[newValue]) === null || _spacingSizes$newValu === void 0 ? void 0 : _spacingSizes$newValu.name;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
const customRangeValue = parseInt(currentValue, 10);
|
|
75
|
+
|
|
76
|
+
const getNewCustomValue = newSize => {
|
|
77
|
+
const isNumeric = !isNaN(parseFloat(newSize));
|
|
78
|
+
const nextValue = isNumeric ? newSize : undefined;
|
|
79
|
+
return nextValue;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const getNewPresetValue = (newSize, controlType) => {
|
|
83
|
+
var _spacingSizes$newSize;
|
|
84
|
+
|
|
85
|
+
const size = parseInt(newSize, 10);
|
|
86
|
+
|
|
87
|
+
if (controlType === 'selectList') {
|
|
88
|
+
if (size === 0) {
|
|
89
|
+
return undefined;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (size === 1) {
|
|
93
|
+
return '0';
|
|
94
|
+
}
|
|
95
|
+
} else if (size === 0) {
|
|
96
|
+
return '0';
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
return `var:preset|spacing|${(_spacingSizes$newSize = spacingSizes[newSize]) === null || _spacingSizes$newSize === void 0 ? void 0 : _spacingSizes$newSize.slug}`;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const handleCustomValueSliderChange = next => {
|
|
103
|
+
onChange([next, selectedUnit].join(''));
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
const allPlaceholder = isMixed ? __('Mixed') : null;
|
|
107
|
+
const currentValueHint = !isMixed ? customTooltipContent(currentValue) : __('Mixed');
|
|
108
|
+
const options = selectListSizes.map((size, index) => ({
|
|
109
|
+
key: index,
|
|
110
|
+
name: size.name
|
|
111
|
+
}));
|
|
112
|
+
const marks = spacingSizes.map((newValue, index) => ({
|
|
113
|
+
value: index,
|
|
114
|
+
label: undefined
|
|
115
|
+
}));
|
|
116
|
+
const ariaLabel = sprintf( // translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
|
|
117
|
+
__('%1$s %2$s'), LABELS[side], type === null || type === void 0 ? void 0 : type.toLowerCase());
|
|
118
|
+
const showHint = showRangeControl && !showCustomValueControl && currentValueHint !== undefined;
|
|
119
|
+
return createElement(Fragment, null, side !== 'all' && createElement(HStack, {
|
|
120
|
+
className: "components-spacing-sizes-control__side-labels"
|
|
121
|
+
}, createElement(Text, {
|
|
122
|
+
className: "components-spacing-sizes-control__side-label"
|
|
123
|
+
}, LABELS[side]), showHint && createElement(Text, {
|
|
124
|
+
className: "components-spacing-sizes-control__hint-single"
|
|
125
|
+
}, currentValueHint)), side === 'all' && showHint && createElement(Text, {
|
|
126
|
+
className: "components-spacing-sizes-control__hint-all"
|
|
127
|
+
}, currentValueHint), !disableCustomSpacingSizes && createElement(Button, {
|
|
128
|
+
label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
|
|
129
|
+
icon: settings,
|
|
130
|
+
onClick: () => {
|
|
131
|
+
setShowCustomValueControl(!showCustomValueControl);
|
|
132
|
+
},
|
|
133
|
+
isPressed: showCustomValueControl,
|
|
134
|
+
isSmall: true,
|
|
135
|
+
className: classnames({
|
|
136
|
+
'components-spacing-sizes-control__custom-toggle-all': side === 'all',
|
|
137
|
+
'components-spacing-sizes-control__custom-toggle-single': side !== 'all'
|
|
138
|
+
}),
|
|
139
|
+
iconSize: 24
|
|
140
|
+
}), showCustomValueControl && createElement(Fragment, null, createElement(UnitControl, {
|
|
141
|
+
onChange: newSize => onChange(getNewCustomValue(newSize)),
|
|
142
|
+
value: currentValue,
|
|
143
|
+
units: units,
|
|
144
|
+
min: minimumCustomValue,
|
|
145
|
+
placeholder: allPlaceholder,
|
|
146
|
+
disableUnits: isMixed,
|
|
147
|
+
label: ariaLabel,
|
|
148
|
+
hideLabelFromVision: true,
|
|
149
|
+
className: "components-spacing-sizes-control__custom-value-input"
|
|
150
|
+
}), createElement(RangeControl, {
|
|
151
|
+
value: customRangeValue,
|
|
152
|
+
min: 0,
|
|
153
|
+
max: 100,
|
|
154
|
+
withInputField: false,
|
|
155
|
+
onChange: handleCustomValueSliderChange,
|
|
156
|
+
className: "components-spacing-sizes-control__custom-value-range"
|
|
157
|
+
})), showRangeControl && !showCustomValueControl && createElement(RangeControl, {
|
|
158
|
+
className: "components-spacing-sizes-control__range-control",
|
|
159
|
+
value: currentValue,
|
|
160
|
+
onChange: newSize => onChange(getNewPresetValue(newSize)),
|
|
161
|
+
onMouseDown: event => {
|
|
162
|
+
var _event$nativeEvent;
|
|
163
|
+
|
|
164
|
+
// If mouse down is near start of range set initial value to 0, which
|
|
165
|
+
// prevents the user have to drag right then left to get 0 setting.
|
|
166
|
+
if ((event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.offsetX) < 35) {
|
|
167
|
+
setInitialValue();
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
withInputField: false,
|
|
171
|
+
"aria-valuenow": currentValue,
|
|
172
|
+
"aria-valuetext": (_spacingSizes$current = spacingSizes[currentValue]) === null || _spacingSizes$current === void 0 ? void 0 : _spacingSizes$current.name,
|
|
173
|
+
renderTooltipContent: customTooltipContent,
|
|
174
|
+
min: 0,
|
|
175
|
+
max: spacingSizes.length - 1,
|
|
176
|
+
marks: marks,
|
|
177
|
+
label: ariaLabel,
|
|
178
|
+
hideLabelFromVision: true
|
|
179
|
+
}), !showRangeControl && !showCustomValueControl && createElement(CustomSelectControl, {
|
|
180
|
+
className: "components-spacing-sizes-control__custom-select-control",
|
|
181
|
+
value: options.find(option => option.key === currentValue) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
|
|
182
|
+
,
|
|
183
|
+
onChange: selection => {
|
|
184
|
+
onChange(getNewPresetValue(selection.selectedItem.key, 'selectList'));
|
|
185
|
+
},
|
|
186
|
+
options: options,
|
|
187
|
+
label: ariaLabel,
|
|
188
|
+
hideLabelFromVision: true,
|
|
189
|
+
__nextUnconstrainedWidth: true
|
|
190
|
+
}));
|
|
191
|
+
}
|
|
192
|
+
//# sourceMappingURL=spacing-input-control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/block-editor/src/components/spacing-sizes-control/spacing-input-control.js"],"names":["classnames","useState","useMemo","useSelect","Button","RangeControl","CustomSelectControl","__experimentalUnitControl","UnitControl","__experimentalHStack","HStack","__experimentalText","Text","__experimentalUseCustomUnits","useCustomUnits","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__","sprintf","settings","useSetting","store","blockEditorStore","LABELS","getSliderValueFromPreset","getCustomValueFromPreset","isValueSpacingPreset","SpacingInputControl","spacingSizes","value","side","onChange","isMixed","type","minimumCustomValue","selectListSizes","showRangeControl","length","disableCustomSpacingSizes","select","editorSettings","getSettings","showCustomValueControl","setShowCustomValueControl","undefined","units","availableUnits","currentValue","showCustomValueInSelectList","name","slug","size","selectedUnit","setInitialValue","customTooltipContent","newValue","customRangeValue","parseInt","getNewCustomValue","newSize","isNumeric","isNaN","parseFloat","nextValue","getNewPresetValue","controlType","handleCustomValueSliderChange","next","join","allPlaceholder","currentValueHint","options","map","index","key","marks","label","ariaLabel","toLowerCase","showHint","event","nativeEvent","offsetX","find","option","selection","selectedItem"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tButton,\n\tRangeControl,\n\tCustomSelectControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\nimport { store as blockEditorStore } from '../../store';\nimport {\n\tLABELS,\n\tgetSliderValueFromPreset,\n\tgetCustomValueFromPreset,\n\tisValueSpacingPreset,\n} from './utils';\n\nexport default function SpacingInputControl( {\n\tspacingSizes,\n\tvalue,\n\tside,\n\tonChange,\n\tisMixed = false,\n\ttype,\n\tminimumCustomValue,\n} ) {\n\tlet selectListSizes = spacingSizes;\n\tconst showRangeControl = spacingSizes.length <= 8;\n\n\tconst disableCustomSpacingSizes = useSelect( ( select ) => {\n\t\tconst editorSettings = select( blockEditorStore ).getSettings();\n\t\treturn editorSettings?.disableCustomSpacingSizes;\n\t} );\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomSpacingSizes &&\n\t\t\tvalue !== undefined &&\n\t\t\t! isValueSpacingPreset( value )\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tlet currentValue = null;\n\n\tconst showCustomValueInSelectList =\n\t\t! showRangeControl &&\n\t\t! showCustomValueControl &&\n\t\tvalue !== undefined &&\n\t\t( ! isValueSpacingPreset( value ) ||\n\t\t\t( isValueSpacingPreset( value ) && isMixed ) );\n\n\tif ( showCustomValueInSelectList ) {\n\t\tselectListSizes = [\n\t\t\t...spacingSizes,\n\t\t\t{\n\t\t\t\tname: ! isMixed\n\t\t\t\t\t? // translators: A custom measurement, eg. a number followed by a unit like 12px.\n\t\t\t\t\t sprintf( __( 'Custom (%s)' ), value )\n\t\t\t\t\t: __( 'Mixed' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: value,\n\t\t\t},\n\t\t];\n\t\tcurrentValue = selectListSizes.length - 1;\n\t} else if ( ! isMixed ) {\n\t\tcurrentValue = ! showCustomValueControl\n\t\t\t? getSliderValueFromPreset( value, spacingSizes )\n\t\t\t: getCustomValueFromPreset( value, spacingSizes );\n\t}\n\n\tconst selectedUnit =\n\t\tuseMemo(\n\t\t\t() => parseQuantityAndUnitFromRawValue( currentValue ),\n\t\t\t[ currentValue ]\n\t\t)[ 1 ] || units[ 0 ].value;\n\n\tconst setInitialValue = () => {\n\t\tif ( value === undefined ) {\n\t\t\tonChange( '0' );\n\t\t}\n\t};\n\n\tconst customTooltipContent = ( newValue ) =>\n\t\tvalue === undefined ? undefined : spacingSizes[ newValue ]?.name;\n\n\tconst customRangeValue = parseInt( currentValue, 10 );\n\n\tconst getNewCustomValue = ( newSize ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( newSize ) );\n\t\tconst nextValue = isNumeric ? newSize : undefined;\n\t\treturn nextValue;\n\t};\n\n\tconst getNewPresetValue = ( newSize, controlType ) => {\n\t\tconst size = parseInt( newSize, 10 );\n\n\t\tif ( controlType === 'selectList' ) {\n\t\t\tif ( size === 0 ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( size === 1 ) {\n\t\t\t\treturn '0';\n\t\t\t}\n\t\t} else if ( size === 0 ) {\n\t\t\treturn '0';\n\t\t}\n\t\treturn `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;\n\t};\n\n\tconst handleCustomValueSliderChange = ( next ) => {\n\t\tonChange( [ next, selectedUnit ].join( '' ) );\n\t};\n\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\tconst currentValueHint = ! isMixed\n\t\t? customTooltipContent( currentValue )\n\t\t: __( 'Mixed' );\n\n\tconst options = selectListSizes.map( ( size, index ) => ( {\n\t\tkey: index,\n\t\tname: size.name,\n\t} ) );\n\n\tconst marks = spacingSizes.map( ( newValue, index ) => ( {\n\t\tvalue: index,\n\t\tlabel: undefined,\n\t} ) );\n\n\tconst ariaLabel = sprintf(\n\t\t// translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)\n\t\t__( '%1$s %2$s' ),\n\t\tLABELS[ side ],\n\t\ttype?.toLowerCase()\n\t);\n\n\tconst showHint =\n\t\tshowRangeControl &&\n\t\t! showCustomValueControl &&\n\t\tcurrentValueHint !== undefined;\n\n\treturn (\n\t\t<>\n\t\t\t{ side !== 'all' && (\n\t\t\t\t<HStack className=\"components-spacing-sizes-control__side-labels\">\n\t\t\t\t\t<Text className=\"components-spacing-sizes-control__side-label\">\n\t\t\t\t\t\t{ LABELS[ side ] }\n\t\t\t\t\t</Text>\n\n\t\t\t\t\t{ showHint && (\n\t\t\t\t\t\t<Text className=\"components-spacing-sizes-control__hint-single\">\n\t\t\t\t\t\t\t{ currentValueHint }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ side === 'all' && showHint && (\n\t\t\t\t<Text className=\"components-spacing-sizes-control__hint-all\">\n\t\t\t\t\t{ currentValueHint }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t{ ! disableCustomSpacingSizes && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tisSmall\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'components-spacing-sizes-control__custom-toggle-all':\n\t\t\t\t\t\t\tside === 'all',\n\t\t\t\t\t\t'components-spacing-sizes-control__custom-toggle-single':\n\t\t\t\t\t\t\tside !== 'all',\n\t\t\t\t\t} ) }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showCustomValueControl && (\n\t\t\t\t<>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tonChange={ ( newSize ) =>\n\t\t\t\t\t\t\tonChange( getNewCustomValue( newSize ) )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ currentValue }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ minimumCustomValue }\n\t\t\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t\tclassName=\"components-spacing-sizes-control__custom-value-input\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tvalue={ customRangeValue }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleCustomValueSliderChange }\n\t\t\t\t\t\tclassName=\"components-spacing-sizes-control__custom-value-range\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tclassName=\"components-spacing-sizes-control__range-control\"\n\t\t\t\t\tvalue={ currentValue }\n\t\t\t\t\tonChange={ ( newSize ) =>\n\t\t\t\t\t\tonChange( getNewPresetValue( newSize ) )\n\t\t\t\t\t}\n\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t// If mouse down is near start of range set initial value to 0, which\n\t\t\t\t\t\t// prevents the user have to drag right then left to get 0 setting.\n\t\t\t\t\t\tif ( event?.nativeEvent?.offsetX < 35 ) {\n\t\t\t\t\t\t\tsetInitialValue();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ currentValue }\n\t\t\t\t\taria-valuetext={ spacingSizes[ currentValue ]?.name }\n\t\t\t\t\trenderTooltipContent={ customTooltipContent }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ spacingSizes.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-spacing-sizes-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === currentValue\n\t\t\t\t\t\t) || '' // passing undefined here causes a downshift controlled/uncontrolled warning\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tgetNewPresetValue(\n\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t'selectList'\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\toptions={ options }\n\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\t__nextUnconstrainedWidth={ true }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
|