@wordpress/block-editor 15.9.0 → 15.9.1-next.6deb34194.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/README.md +12 -0
- package/build/components/block-alignment-matrix-control/index.js +1 -8
- package/build/components/block-alignment-matrix-control/index.js.map +2 -2
- package/build/components/block-bindings/attribute-control.js +172 -0
- package/build/components/block-bindings/attribute-control.js.map +7 -0
- package/build/components/block-bindings/index.js +47 -0
- package/build/components/block-bindings/index.js.map +7 -0
- package/build/components/block-bindings/source-fields-list.js +135 -0
- package/build/components/block-bindings/source-fields-list.js.map +7 -0
- package/build/components/block-bindings/use-block-bindings-utils.js +66 -0
- package/build/components/block-bindings/use-block-bindings-utils.js.map +7 -0
- package/build/components/block-edit/edit.js +1 -3
- package/build/components/block-edit/edit.js.map +2 -2
- package/build/components/block-styles/preview-panel.js +3 -5
- package/build/components/block-styles/preview-panel.js.map +2 -2
- package/build/components/block-styles/use-styles-for-block.js +2 -2
- package/build/components/block-styles/use-styles-for-block.js.map +2 -2
- package/build/components/block-toolbar/index.js +1 -8
- package/build/components/block-toolbar/index.js.map +3 -3
- package/build/components/content-only-controls/index.js +2 -25
- package/build/components/content-only-controls/index.js.map +2 -2
- package/build/components/content-only-controls/link/index.js +3 -3
- package/build/components/content-only-controls/link/index.js.map +2 -2
- package/build/components/content-only-controls/media/index.js +3 -3
- package/build/components/content-only-controls/media/index.js.map +2 -2
- package/build/components/content-only-controls/rich-text/index.js +3 -2
- package/build/components/content-only-controls/rich-text/index.js.map +2 -2
- package/build/components/dimensions-tool/width-height-tool.js +4 -16
- package/build/components/dimensions-tool/width-height-tool.js.map +3 -3
- package/build/components/image-editor/cropper.js +3 -34
- package/build/components/image-editor/cropper.js.map +3 -3
- package/build/components/image-editor/index.js +9 -3
- package/build/components/image-editor/index.js.map +2 -2
- package/build/components/image-editor/use-transform-image.js +62 -32
- package/build/components/image-editor/use-transform-image.js.map +2 -2
- package/build/components/image-editor/zoom-dropdown.js +2 -2
- package/build/components/image-editor/zoom-dropdown.js.map +2 -2
- package/build/components/index.js +10 -3
- package/build/components/index.js.map +2 -2
- package/build/components/inserter-draggable-blocks/index.js +8 -4
- package/build/components/inserter-draggable-blocks/index.js.map +2 -2
- package/build/components/inspector-controls-tabs/content-tab.js +3 -2
- package/build/components/inspector-controls-tabs/content-tab.js.map +2 -2
- package/build/components/tool-selector/index.js +46 -0
- package/build/components/tool-selector/index.js.map +7 -0
- package/build/hooks/block-bindings.js +22 -260
- package/build/hooks/block-bindings.js.map +3 -3
- package/build/layouts/grid.js +23 -28
- package/build/layouts/grid.js.map +2 -2
- package/build/utils/block-bindings.js +2 -44
- package/build/utils/block-bindings.js.map +3 -3
- package/build/utils/index.js +2 -5
- package/build/utils/index.js.map +2 -2
- package/build-module/components/block-alignment-matrix-control/index.js +1 -8
- package/build-module/components/block-alignment-matrix-control/index.js.map +2 -2
- package/build-module/components/block-bindings/attribute-control.js +150 -0
- package/build-module/components/block-bindings/attribute-control.js.map +7 -0
- package/build-module/components/block-bindings/index.js +10 -0
- package/build-module/components/block-bindings/index.js.map +7 -0
- package/build-module/components/block-bindings/source-fields-list.js +104 -0
- package/build-module/components/block-bindings/source-fields-list.js.map +7 -0
- package/build-module/components/block-bindings/use-block-bindings-utils.js +45 -0
- package/build-module/components/block-bindings/use-block-bindings-utils.js.map +7 -0
- package/build-module/components/block-edit/edit.js +1 -3
- package/build-module/components/block-edit/edit.js.map +2 -2
- package/build-module/components/block-styles/preview-panel.js +3 -5
- package/build-module/components/block-styles/preview-panel.js.map +2 -2
- package/build-module/components/block-styles/use-styles-for-block.js +2 -2
- package/build-module/components/block-styles/use-styles-for-block.js.map +2 -2
- package/build-module/components/block-toolbar/index.js +1 -8
- package/build-module/components/block-toolbar/index.js.map +2 -2
- package/build-module/components/content-only-controls/index.js +2 -25
- package/build-module/components/content-only-controls/index.js.map +2 -2
- package/build-module/components/content-only-controls/link/index.js +3 -3
- package/build-module/components/content-only-controls/link/index.js.map +2 -2
- package/build-module/components/content-only-controls/media/index.js +3 -3
- package/build-module/components/content-only-controls/media/index.js.map +2 -2
- package/build-module/components/content-only-controls/rich-text/index.js +3 -2
- package/build-module/components/content-only-controls/rich-text/index.js.map +2 -2
- package/build-module/components/dimensions-tool/width-height-tool.js +4 -6
- package/build-module/components/dimensions-tool/width-height-tool.js.map +2 -2
- package/build-module/components/image-editor/cropper.js +3 -34
- package/build-module/components/image-editor/cropper.js.map +2 -2
- package/build-module/components/image-editor/index.js +9 -3
- package/build-module/components/image-editor/index.js.map +2 -2
- package/build-module/components/image-editor/use-transform-image.js +63 -33
- package/build-module/components/image-editor/use-transform-image.js.map +2 -2
- package/build-module/components/image-editor/zoom-dropdown.js +2 -2
- package/build-module/components/image-editor/zoom-dropdown.js.map +2 -2
- package/build-module/components/index.js +74 -66
- package/build-module/components/index.js.map +2 -2
- package/build-module/components/inserter-draggable-blocks/index.js +8 -4
- package/build-module/components/inserter-draggable-blocks/index.js.map +2 -2
- package/build-module/components/inspector-controls-tabs/content-tab.js +3 -2
- package/build-module/components/inspector-controls-tabs/content-tab.js.map +2 -2
- package/build-module/components/tool-selector/index.js +15 -0
- package/build-module/components/tool-selector/index.js.map +7 -0
- package/build-module/hooks/block-bindings.js +27 -270
- package/build-module/hooks/block-bindings.js.map +2 -2
- package/build-module/layouts/grid.js +23 -28
- package/build-module/layouts/grid.js.map +2 -2
- package/build-module/utils/block-bindings.js +1 -42
- package/build-module/utils/block-bindings.js.map +2 -2
- package/build-module/utils/index.js +1 -3
- package/build-module/utils/index.js.map +2 -2
- package/build-style/style-rtl.css +6 -6
- package/build-style/style.css +6 -6
- package/package.json +39 -40
- package/src/components/block-alignment-matrix-control/index.js +1 -5
- package/src/components/block-bindings/attribute-control.js +174 -0
- package/src/components/block-bindings/index.js +6 -0
- package/src/components/block-bindings/source-fields-list.js +130 -0
- package/src/components/block-bindings/use-block-bindings-utils.js +156 -0
- package/src/components/block-edit/edit.js +1 -3
- package/src/components/block-styles/preview-panel.js +3 -5
- package/src/components/block-styles/use-styles-for-block.js +2 -2
- package/src/components/block-toolbar/index.js +1 -6
- package/src/components/block-toolbar/style.scss +6 -6
- package/src/components/content-only-controls/index.js +2 -27
- package/src/components/content-only-controls/link/index.js +3 -3
- package/src/components/content-only-controls/media/index.js +3 -3
- package/src/components/content-only-controls/rich-text/index.js +3 -2
- package/src/components/dimensions-tool/width-height-tool.js +6 -13
- package/src/components/image-editor/cropper.js +3 -32
- package/src/components/image-editor/index.js +34 -29
- package/src/components/image-editor/use-transform-image.js +80 -34
- package/src/components/image-editor/zoom-dropdown.js +2 -2
- package/src/components/index.js +9 -1
- package/src/components/inserter/style.scss +1 -1
- package/src/components/inserter-draggable-blocks/index.js +19 -8
- package/src/components/inspector-controls-tabs/content-tab.js +6 -2
- package/src/components/tool-selector/index.js +19 -0
- package/src/hooks/block-bindings.js +27 -347
- package/src/layouts/grid.js +40 -72
- package/src/layouts/test/grid.js +14 -0
- package/src/utils/block-bindings.js +0 -157
- package/src/utils/index.js +0 -1
- package/tsconfig.json +1 -0
- package/build/components/block-toolbar/block-name-context.js +0 -30
- package/build/components/block-toolbar/block-name-context.js.map +0 -7
- package/build-module/components/block-toolbar/block-name-context.js +0 -9
- package/build-module/components/block-toolbar/block-name-context.js.map +0 -7
- package/src/components/block-toolbar/block-name-context.js +0 -9
- /package/src/{utils → components/block-bindings}/test/use-block-bindings-utils.js +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/block-bindings.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetBlockBindingsSource,\n\tgetBlockType,\n\tstore as blockStore,\n} from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockBindingsUtils } from '../utils/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { useBlockEditContext } from '../components/block-edit';\nimport { store as blockEditorStore } from '../store';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\n/**\n * Get the normalized attribute type for block bindings.\n * Converts 'rich-text' to 'string' since rich-text is stored as string.\n *\n * @param {string} blockName The block name.\n * @param {string} attribute The attribute name.\n * @return {string} The normalized attribute type.\n */\nconst getAttributeType = ( blockName, attribute ) => {\n\tconst _attributeType =\n\t\tgetBlockType( blockName ).attributes?.[ attribute ]?.type;\n\treturn _attributeType === 'rich-text' ? 'string' : _attributeType;\n};\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nfunction BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst blockContext = useContext( BlockContext );\n\tconst { attributeType, select } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst { name: blockName } =\n\t\t\t\t_select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn {\n\t\t\t\tattributeType: getAttributeType( blockName, attribute ),\n\t\t\t\tselect: _select,\n\t\t\t};\n\t\t},\n\t\t[ clientId, attribute ]\n\t);\n\treturn (\n\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t{ Object.entries( sources ).map( ( [ sourceKey, data ] ) => {\n\t\t\t\t// Only show sources that have compatible data for this specific attribute.\n\t\t\t\tconst sourceDataItems = data.filter(\n\t\t\t\t\t( item ) => item.type === attributeType\n\t\t\t\t);\n\n\t\t\t\tconst noItemsAvailable =\n\t\t\t\t\t! sourceDataItems || sourceDataItems.length === 0;\n\n\t\t\t\tif ( noItemsAvailable ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst source = getBlockBindingsSource( sourceKey );\n\n\t\t\t\treturn (\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tkey={ sourceKey }\n\t\t\t\t\t\tplacement={ isMobile ? 'bottom-start' : 'left-start' }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t<Menu.Popover gutter={ 8 }>\n\t\t\t\t\t\t\t<Menu.Group>\n\t\t\t\t\t\t\t\t{ sourceDataItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemBindings = {\n\t\t\t\t\t\t\t\t\t\tsource: sourceKey,\n\t\t\t\t\t\t\t\t\t\targs: item.args || {\n\t\t\t\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tlet values = {};\n\t\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\t\tvalues = source.getValues( {\n\t\t\t\t\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t\t\t\t\tcontext: blockContext,\n\t\t\t\t\t\t\t\t\t\t\tbindings: {\n\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]: itemBindings,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} catch ( e ) {}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Menu.CheckboxItem\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tsourceKey +\n\t\t\t\t\t\t\t\t\t\t\t\t\tJSON.stringify(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) || item.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst isCurrentlySelected =\n\t\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args?.key;\n\n\t\t\t\t\t\t\t\t\t\t\t\tif ( isCurrentlySelected ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Unset if the same item is selected again.\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titemBindings,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tname={ attribute + '-binding' }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\titem.key === binding?.args?.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t{ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t</Menu.CheckboxItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Menu.Group>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Menu>\n\t);\n}\n\nfunction BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {\n\tconst { source: sourceName, args } = binding || {};\n\tconst data = sources?.[ sourceName ];\n\tconst source = getBlockBindingsSource( sourceName );\n\n\tlet displayText;\n\tlet isValid = true;\n\tconst isNotBound = binding === undefined;\n\n\tif ( isNotBound ) {\n\t\t// Check if there are any compatible sources for this attribute type.\n\t\tconst attributeType = getAttributeType( blockName, attribute );\n\n\t\tconst hasCompatibleSources = Object.values( sources ).some( ( items ) =>\n\t\t\titems.some( ( item ) => item.type === attributeType )\n\t\t);\n\n\t\tif ( ! hasCompatibleSources ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t} else {\n\t\t\tdisplayText = __( 'Not connected' );\n\t\t}\n\t\tisValid = true;\n\t} else if ( ! source ) {\n\t\t// If there's a binding but the source is not found, it's invalid.\n\t\tisValid = false;\n\t\tdisplayText = __( 'Source not registered' );\n\t} else {\n\t\tdisplayText =\n\t\t\tdata?.find( ( item ) => fastDeepEqual( item.args, args ) )?.label ||\n\t\t\tsource?.label ||\n\t\t\tsourceName;\n\t}\n\n\treturn (\n\t\t<VStack className=\"block-editor-bindings__item\" spacing={ 0 }>\n\t\t\t<Text truncate>{ attribute }</Text>\n\t\t\t<Text\n\t\t\t\ttruncate\n\t\t\t\tvariant={ isValid ? 'muted' : undefined }\n\t\t\t\tisDestructive={ ! isValid }\n\t\t\t>\n\t\t\t\t{ displayText }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n\nfunction ReadOnlyBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> } disabled>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction EditableBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => !! binding }\n\t\t\tlabel={ attribute }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> }>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t\t<Menu.Popover gutter={ isMobile ? 8 : 36 }>\n\t\t\t\t\t<BlockBindingsPanelMenuContent\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use useSelect to ensure sources are updated whenever there are updates in block context\n\t// or when underlying data changes.\n\tconst { canUpdateBlockBindings, bindableAttributes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\n\t\t\treturn {\n\t\t\t\tcanUpdateBlockBindings:\n\t\t\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t\t\t.canUpdateBlockBindings,\n\t\t\t\tbindableAttributes:\n\t\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[\n\t\t\t\t\t\tblockName\n\t\t\t\t\t],\n\t\t\t};\n\t\t},\n\t\t[ blockName ]\n\t);\n\n\tconst sources = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getAllBlockBindingsSources } = unlock(\n\t\t\t\tselect( blockStore )\n\t\t\t);\n\t\t\tconst data = {};\n\t\t\tObject.entries( getAllBlockBindingsSources() ).forEach(\n\t\t\t\t( [ sourceName, source ] ) => {\n\t\t\t\t\tif ( ! source.getFieldsList ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst context = {};\n\t\t\t\t\tif ( source.usesContext?.length ) {\n\t\t\t\t\t\tfor ( const key of source.usesContext ) {\n\t\t\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tconst items = source.getFieldsList( {\n\t\t\t\t\t\tselect,\n\t\t\t\t\t\tcontext,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( items?.length ) {\n\t\t\t\t\t\tdata[ sourceName ] = items;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\treturn data;\n\t\t},\n\t\t[ blockContext ]\n\t);\n\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\tconst hasCompatibleData = Object.keys( sources ).length > 0;\n\n\t// Lock the UI when the user can't update bindings or there are no fields to connect to.\n\tconst readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;\n\n\tif ( bindings === undefined && ! hasCompatibleData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => {\n\t\t\t\t\t\tconst binding = bindings?.[ attribute ];\n\n\t\t\t\t\t\t// Check if this specific attribute has compatible data from any source.\n\t\t\t\t\t\tconst attributeType = getAttributeType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tattribute\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst hasCompatibleDataForAttribute = Object.values(\n\t\t\t\t\t\t\tsources\n\t\t\t\t\t\t).some( ( data ) =>\n\t\t\t\t\t\t\tdata.some( ( item ) => item.type === attributeType )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst isAttributeReadOnly =\n\t\t\t\t\t\t\treadOnly || ! hasCompatibleDataForAttribute;\n\n\t\t\t\t\t\treturn isAttributeReadOnly ? (\n\t\t\t\t\t\t\t<ReadOnlyBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditableBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\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</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockBindingsAttributeControl,\n\tuseBlockBindingsUtils,\n} from '../components/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { store as blockEditorStore } from '../store';\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst { bindableAttributes, hasCompatibleFields } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\t\t\tconst {\n\t\t\t\tgetAllBlockBindingsSources,\n\t\t\t\tgetBlockBindingsSourceFieldsList,\n\t\t\t} = unlock( select( blocksStore ) );\n\n\t\t\treturn {\n\t\t\t\tbindableAttributes:\n\t\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[\n\t\t\t\t\t\tblockName\n\t\t\t\t\t],\n\t\t\t\thasCompatibleFields: Object.values(\n\t\t\t\t\tgetAllBlockBindingsSources()\n\t\t\t\t).some(\n\t\t\t\t\t( source ) =>\n\t\t\t\t\t\tgetBlockBindingsSourceFieldsList( source, blockContext )\n\t\t\t\t\t\t\t?.length > 0\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ blockName, blockContext ]\n\t);\n\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\tif ( bindings === undefined && ! hasCompatibleFields ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => (\n\t\t\t\t\t\t<BlockBindingsAttributeControl\n\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\tbinding={ bindings?.[ attribute ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,oBAAqC;AACrC,wBAIO;AACP,kBAA0B;AAC1B,qBAA2B;AAC3B,qBAAiC;AAKjC,4BAGO;AACP,yBAAuB;AACvB,gCAA8B;AAC9B,2BAAyB;AACzB,mBAA0C;AA2DvC;AAzDH,IAAM,iCAAiC,MAAM;AAC5C,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAEO,IAAM,qBAAqB,CAAE,EAAE,MAAM,WAAW,SAAS,MAAO;AACtE,QAAM,mBAAe,2BAAY,qBAAAA,OAAa;AAC9C,QAAM,EAAE,uBAAuB,QAAI,6CAAsB;AACzD,QAAM,oBAAoB,+BAA+B;AAEzD,QAAM,EAAE,oBAAoB,oBAAoB,QAAI;AAAA,IACnD,CAAE,WAAY;AACb,YAAM,EAAE,+CAA+C,IACtD,OAAQ,aAAAC,KAAiB,EAAE,YAAY;AACxC,YAAM;AAAA,QACL;AAAA,QACA;AAAA,MACD,QAAI,2BAAQ,OAAQ,cAAAC,KAAY,CAAE;AAElC,aAAO;AAAA,QACN,oBACC,iDACC,SACD;AAAA,QACD,qBAAqB,OAAO;AAAA,UAC3B,2BAA2B;AAAA,QAC5B,EAAE;AAAA,UACD,CAAE,WACD,iCAAkC,QAAQ,YAAa,GACpD,SAAS;AAAA,QACd;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,YAAa;AAAA,EAC3B;AAGA,MAAK,CAAE,sBAAsB,mBAAmB,WAAW,GAAI;AAC9D,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,SAAS,IAAI,YAAY,CAAC;AAElC,MAAK,aAAa,UAAa,CAAE,qBAAsB;AACtD,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,0BAAAC,SAAA,EAAkB,OAAM,YACxB;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,YAAa;AAAA,MACzB,UAAW,MAAM;AAChB,+BAAuB;AAAA,MACxB;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,oDAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAC9B,6BAAmB,IAAK,CAAE,cAC3B;AAAA,UAAC;AAAA;AAAA,YAEA;AAAA,YACA;AAAA,YACA,SAAU,WAAY,SAAU;AAAA;AAAA,UAH1B;AAAA,QAIP,CACC,GACH;AAAA,QAKA,4CAAC,kBAAAC,oBAAA,EAAK,IAAG,OAAM,SAAQ,SACtB,sDAAC,OACE;AAAA,UACD;AAAA,QACD,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,yBAAQ;AAAA,EACd,MAAM;AAAA,EACN,eAAe,CAAE,UAAW;AAAA,EAC5B,WAAY,MAAO;AAClB,WAAO,CAAE;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IACD,EAAE,SAAU,IAAK;AAAA,EAClB;AACD;",
|
|
6
|
+
"names": ["BlockContext", "blockEditorStore", "blocksStore", "InspectorControls", "ToolsPanel", "ItemGroup", "Text"]
|
|
7
7
|
}
|
package/build/layouts/grid.js
CHANGED
|
@@ -75,10 +75,10 @@ var grid_default = {
|
|
|
75
75
|
layoutBlockSupport = {}
|
|
76
76
|
}) {
|
|
77
77
|
const { allowSizingOnChildren = false } = layoutBlockSupport;
|
|
78
|
-
const showColumnsControl =
|
|
79
|
-
const showMinWidthControl = window.__experimentalEnableGridInteractivity
|
|
78
|
+
const showColumnsControl = true;
|
|
79
|
+
const showMinWidthControl = !layout?.isManualPlacement || window.__experimentalEnableGridInteractivity;
|
|
80
80
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
81
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
window.__experimentalEnableGridInteractivity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
82
|
GridLayoutTypeControl,
|
|
83
83
|
{
|
|
84
84
|
layout,
|
|
@@ -206,7 +206,7 @@ function GridLayoutMinimumWidthControl({ layout, onChange }) {
|
|
|
206
206
|
});
|
|
207
207
|
};
|
|
208
208
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-minimum-width-control", children: [
|
|
209
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("
|
|
209
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Min. column width") }),
|
|
210
210
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
|
|
211
211
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
212
212
|
import_components.__experimentalUnitControl,
|
|
@@ -240,7 +240,10 @@ function GridLayoutMinimumWidthControl({ layout, onChange }) {
|
|
|
240
240
|
hideLabelFromVision: true
|
|
241
241
|
}
|
|
242
242
|
) })
|
|
243
|
-
] })
|
|
243
|
+
] }),
|
|
244
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "components-base-control__help", children: (0, import_i18n.__)(
|
|
245
|
+
"Columns will wrap to fewer per row when they can no longer maintain the minimum width."
|
|
246
|
+
) })
|
|
244
247
|
] });
|
|
245
248
|
}
|
|
246
249
|
function GridLayoutColumnsAndRowsControl({
|
|
@@ -248,42 +251,34 @@ function GridLayoutColumnsAndRowsControl({
|
|
|
248
251
|
onChange,
|
|
249
252
|
allowSizingOnChildren
|
|
250
253
|
}) {
|
|
251
|
-
const defaultColumnCount =
|
|
254
|
+
const defaultColumnCount = void 0;
|
|
252
255
|
const {
|
|
253
256
|
columnCount = defaultColumnCount,
|
|
254
257
|
rowCount,
|
|
255
258
|
isManualPlacement
|
|
256
259
|
} = layout;
|
|
257
260
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "block-editor-hooks__grid-layout-columns-and-rows-controls", children: [
|
|
258
|
-
|
|
261
|
+
!isManualPlacement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl.VisualLabel, { as: "legend", children: (0, import_i18n.__)("Max. columns") }),
|
|
259
262
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { gap: 4, children: [
|
|
260
263
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
261
264
|
import_components.__experimentalNumberControl,
|
|
262
265
|
{
|
|
263
266
|
size: "__unstable-large",
|
|
264
267
|
onChange: (value) => {
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
});
|
|
272
|
-
} else {
|
|
273
|
-
const newColumnCount = value === "" || value === "0" ? 1 : parseInt(value, 10);
|
|
274
|
-
onChange({
|
|
275
|
-
...layout,
|
|
276
|
-
columnCount: newColumnCount
|
|
277
|
-
});
|
|
278
|
-
}
|
|
268
|
+
const defaultNewColumnCount = isManualPlacement ? 1 : void 0;
|
|
269
|
+
const newColumnCount = value === "" || value === "0" ? defaultNewColumnCount : parseInt(value, 10);
|
|
270
|
+
onChange({
|
|
271
|
+
...layout,
|
|
272
|
+
columnCount: newColumnCount
|
|
273
|
+
});
|
|
279
274
|
},
|
|
280
275
|
value: columnCount,
|
|
281
276
|
min: 1,
|
|
282
277
|
label: (0, import_i18n.__)("Columns"),
|
|
283
|
-
hideLabelFromVision: !
|
|
278
|
+
hideLabelFromVision: !isManualPlacement
|
|
284
279
|
}
|
|
285
280
|
) }),
|
|
286
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children:
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: allowSizingOnChildren && isManualPlacement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
287
282
|
import_components.__experimentalNumberControl,
|
|
288
283
|
{
|
|
289
284
|
size: "__unstable-large",
|
|
@@ -327,7 +322,7 @@ function GridLayoutTypeControl({ layout, onChange }) {
|
|
|
327
322
|
const [tempMinimumColumnWidth, setTempMinimumColumnWidth] = (0, import_element.useState)(
|
|
328
323
|
minimumColumnWidth || "12rem"
|
|
329
324
|
);
|
|
330
|
-
const gridPlacement = isManualPlacement
|
|
325
|
+
const gridPlacement = isManualPlacement ? "manual" : "auto";
|
|
331
326
|
const onChangeType = (value) => {
|
|
332
327
|
if (value === "manual") {
|
|
333
328
|
setTempMinimumColumnWidth(minimumColumnWidth || "12rem");
|
|
@@ -337,9 +332,9 @@ function GridLayoutTypeControl({ layout, onChange }) {
|
|
|
337
332
|
}
|
|
338
333
|
onChange({
|
|
339
334
|
...layout,
|
|
340
|
-
columnCount: value === "manual" ? tempColumnCount :
|
|
341
|
-
rowCount: value === "manual"
|
|
342
|
-
isManualPlacement: value === "manual"
|
|
335
|
+
columnCount: value === "manual" ? tempColumnCount : tempColumnCount,
|
|
336
|
+
rowCount: value === "manual" ? tempRowCount : void 0,
|
|
337
|
+
isManualPlacement: value === "manual" ? true : void 0,
|
|
343
338
|
minimumColumnWidth: value === "auto" ? tempMinimumColumnWidth : null
|
|
344
339
|
});
|
|
345
340
|
};
|
|
@@ -357,7 +352,7 @@ function GridLayoutTypeControl({ layout, onChange }) {
|
|
|
357
352
|
value: gridPlacement,
|
|
358
353
|
onChange: onChangeType,
|
|
359
354
|
isBlock: true,
|
|
360
|
-
help:
|
|
355
|
+
help: helpText,
|
|
361
356
|
children: [
|
|
362
357
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
363
358
|
import_components.__experimentalToggleGroupControlOption,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/layouts/grid.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nimport {\n\tBaseControl,\n\tFlex,\n\tFlexItem,\n\tRangeControl,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nconst RANGE_CONTROL_MAX_VALUES = {\n\tpx: 600,\n\t'%': 100,\n\tvw: 100,\n\tvh: 100,\n\tem: 38,\n\trem: 38,\n\tsvw: 100,\n\tlvw: 100,\n\tdvw: 100,\n\tsvh: 100,\n\tlvh: 100,\n\tdvh: 100,\n\tvi: 100,\n\tsvi: 100,\n\tlvi: 100,\n\tdvi: 100,\n\tvb: 100,\n\tsvb: 100,\n\tlvb: 100,\n\tdvb: 100,\n\tvmin: 100,\n\tsvmin: 100,\n\tlvmin: 100,\n\tdvmin: 100,\n\tvmax: 100,\n\tsvmax: 100,\n\tlvmax: 100,\n\tdvmax: 100,\n};\n\nconst units = [\n\t{ value: 'px', label: 'px', default: 0 },\n\t{ value: 'rem', label: 'rem', default: 0 },\n\t{ value: 'em', label: 'em', default: 0 },\n];\n\nexport default {\n\tname: 'grid',\n\tlabel: __( 'Grid' ),\n\tinspectorControls: function GridLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { allowSizingOnChildren = false } = layoutBlockSupport;\n\n\t\t// In the experiment we want to also show column control in Auto mode, and\n\t\t// the minimum width control in Manual mode.\n\t\tconst showColumnsControl =\n\t\t\twindow.__experimentalEnableGridInteractivity ||\n\t\t\t!! layout?.columnCount;\n\t\tconst showMinWidthControl =\n\t\t\twindow.__experimentalEnableGridInteractivity ||\n\t\t\t! layout?.columnCount;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<GridLayoutTypeControl\n\t\t\t\t\tlayout={ layout }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t{ showColumnsControl && (\n\t\t\t\t\t\t<GridLayoutColumnsAndRowsControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tallowSizingOnChildren={ allowSizingOnChildren }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ showMinWidthControl && (\n\t\t\t\t\t\t<GridLayoutMinimumWidthControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function GridLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout,\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst {\n\t\t\tminimumColumnWidth = null,\n\t\t\tcolumnCount = null,\n\t\t\trowCount = null,\n\t\t} = layout;\n\n\t\t// Check that the grid layout attributes are of the correct type, so that we don't accidentally\n\t\t// write code that stores a string attribute instead of a number.\n\t\tif ( process.env.NODE_ENV === 'development' ) {\n\t\t\tif (\n\t\t\t\tminimumColumnWidth &&\n\t\t\t\ttypeof minimumColumnWidth !== 'string'\n\t\t\t) {\n\t\t\t\tthrow new Error( 'minimumColumnWidth must be a string' );\n\t\t\t}\n\t\t\tif ( columnCount && typeof columnCount !== 'number' ) {\n\t\t\t\tthrow new Error( 'columnCount must be a number' );\n\t\t\t}\n\t\t\tif ( rowCount && typeof rowCount !== 'number' ) {\n\t\t\t\tthrow new Error( 'rowCount must be a number' );\n\t\t\t}\n\t\t}\n\n\t\t// If a block's block.json skips serialization for spacing or spacing.blockGap,\n\t\t// don't apply the user-defined value to the styles.\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )\n\t\t\t\t: undefined;\n\n\t\tlet output = '';\n\t\tconst rules = [];\n\n\t\tif ( minimumColumnWidth && columnCount > 0 ) {\n\t\t\tconst maxValue = `max(${ minimumColumnWidth }, ( 100% - (${\n\t\t\t\tblockGapValue || '1.2rem'\n\t\t\t}*${ columnCount - 1 }) ) / ${ columnCount })`;\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,\n\t\t\t\t`container-type: inline-size`\n\t\t\t);\n\t\t\tif ( rowCount ) {\n\t\t\t\trules.push(\n\t\t\t\t\t`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`\n\t\t\t\t);\n\t\t\t}\n\t\t} else if ( columnCount ) {\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`\n\t\t\t);\n\t\t\tif ( rowCount ) {\n\t\t\t\trules.push(\n\t\t\t\t\t`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(auto-fill, minmax(min(${\n\t\t\t\t\tminimumColumnWidth || '12rem'\n\t\t\t\t}, 100%), 1fr))`,\n\t\t\t\t'container-type: inline-size'\n\t\t\t);\n\t\t}\n\n\t\tif ( rules.length ) {\n\t\t\toutput = `${ appendSelectors( selector ) } { ${ rules.join(\n\t\t\t\t'; '\n\t\t\t) }; }`;\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'grid',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'horizontal';\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\n// Enables setting minimum width of grid items.\nfunction GridLayoutMinimumWidthControl( { layout, onChange } ) {\n\tconst { minimumColumnWidth, columnCount, isManualPlacement } = layout;\n\tconst defaultValue = isManualPlacement || columnCount ? null : '12rem';\n\tconst value = minimumColumnWidth || defaultValue;\n\tconst [ quantity, unit = 'rem' ] =\n\t\tparseQuantityAndUnitFromRawValue( value );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tminimumColumnWidth: [ next, unit ].join( '' ),\n\t\t} );\n\t};\n\n\t// Mostly copied from HeightControl.\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tlet newValue;\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && unit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tnewValue = ( quantity / 16 ).toFixed( 2 ) + newUnit;\n\t\t} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tnewValue = Math.round( quantity * 16 ) + newUnit;\n\t\t}\n\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tminimumColumnWidth: newValue,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__grid-layout-minimum-width-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ __( 'Minimum column width' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Flex gap={ 4 }>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\tminimumColumnWidth:\n\t\t\t\t\t\t\t\t\tnewValue === '' ? undefined : newValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tlabel={ __( 'Minimum column width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tvalue={ quantity || 0 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tlabel={ __( 'Minimum column width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</fieldset>\n\t);\n}\n\n// Enables setting number of grid columns\nfunction GridLayoutColumnsAndRowsControl( {\n\tlayout,\n\tonChange,\n\tallowSizingOnChildren,\n} ) {\n\t// If the grid interactivity experiment is enabled, allow unsetting the column count.\n\tconst defaultColumnCount = window.__experimentalEnableGridInteractivity\n\t\t? undefined\n\t\t: 3;\n\tconst {\n\t\tcolumnCount = defaultColumnCount,\n\t\trowCount,\n\t\tisManualPlacement,\n\t} = layout;\n\n\treturn (\n\t\t<>\n\t\t\t<fieldset className=\"block-editor-hooks__grid-layout-columns-and-rows-controls\">\n\t\t\t\t{ ( ! window.__experimentalEnableGridInteractivity ||\n\t\t\t\t\t! isManualPlacement ) && (\n\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t{ __( 'Columns' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t) }\n\t\t\t\t<Flex gap={ 4 }>\n\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t// Allow unsetting the column count when in auto mode.\n\t\t\t\t\t\t\t\t\tconst defaultNewColumnCount =\n\t\t\t\t\t\t\t\t\t\tisManualPlacement ? 1 : undefined;\n\t\t\t\t\t\t\t\t\tconst newColumnCount =\n\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t? defaultNewColumnCount\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( value, 10 );\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\tcolumnCount: newColumnCount,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t// Don't allow unsetting the column count.\n\t\t\t\t\t\t\t\t\tconst newColumnCount =\n\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( value, 10 );\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\tcolumnCount: newColumnCount,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnCount }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t! window.__experimentalEnableGridInteractivity ||\n\t\t\t\t\t\t\t\t! isManualPlacement\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t{ window.__experimentalEnableGridInteractivity &&\n\t\t\t\t\t\tallowSizingOnChildren &&\n\t\t\t\t\t\tisManualPlacement ? (\n\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t// Don't allow unsetting the row count.\n\t\t\t\t\t\t\t\t\tconst newRowCount =\n\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( value, 10 );\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\trowCount: newRowCount,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tvalue={ rowCount }\n\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\tlabel={ __( 'Rows' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tvalue={ columnCount ?? 1 }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\tcolumnCount:\n\t\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t\t\t\t: value,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\tmax={ 16 }\n\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</fieldset>\n\t\t</>\n\t);\n}\n\n// Enables switching between grid types\nfunction GridLayoutTypeControl( { layout, onChange } ) {\n\tconst { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =\n\t\tlayout;\n\n\t/**\n\t * When switching, temporarily save any custom values set on the\n\t * previous type so we can switch back without loss.\n\t */\n\tconst [ tempColumnCount, setTempColumnCount ] = useState(\n\t\tcolumnCount || 3\n\t);\n\tconst [ tempRowCount, setTempRowCount ] = useState( rowCount );\n\tconst [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(\n\t\tminimumColumnWidth || '12rem'\n\t);\n\n\tconst gridPlacement =\n\t\tisManualPlacement ||\n\t\t( !! columnCount && ! window.__experimentalEnableGridInteractivity )\n\t\t\t? 'manual'\n\t\t\t: 'auto';\n\n\tconst onChangeType = ( value ) => {\n\t\tif ( value === 'manual' ) {\n\t\t\tsetTempMinimumColumnWidth( minimumColumnWidth || '12rem' );\n\t\t} else {\n\t\t\tsetTempColumnCount( columnCount || 3 );\n\t\t\tsetTempRowCount( rowCount );\n\t\t}\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tcolumnCount: value === 'manual' ? tempColumnCount : null,\n\t\t\trowCount:\n\t\t\t\tvalue === 'manual' &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t\t\t? tempRowCount\n\t\t\t\t\t: undefined,\n\t\t\tisManualPlacement:\n\t\t\t\tvalue === 'manual' &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t\t\t? true\n\t\t\t\t\t: undefined,\n\t\t\tminimumColumnWidth:\n\t\t\t\tvalue === 'auto' ? tempMinimumColumnWidth : null,\n\t\t} );\n\t};\n\n\tconst helpText =\n\t\tgridPlacement === 'manual'\n\t\t\t? __(\n\t\t\t\t\t'Grid items can be manually placed in any position on the grid.'\n\t\t\t )\n\t\t\t: __(\n\t\t\t\t\t'Grid items are placed automatically depending on their order.'\n\t\t\t );\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ __( 'Grid item position' ) }\n\t\t\tvalue={ gridPlacement }\n\t\t\tonChange={ onChangeType }\n\t\t\tisBlock\n\t\t\thelp={\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t\t\t? helpText\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"auto\"\n\t\t\t\tvalue=\"auto\"\n\t\t\t\tlabel={ __( 'Auto' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"manual\"\n\t\t\t\tvalue=\"manual\"\n\t\t\t\tlabel={ __( 'Manual' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAEnB,wBAWO;AACP,qBAAyB;AAKzB,mBAAgD;AAChD,iBAA+B;AAC/B,IAAAA,gBAAwC;AACxC,yBAAmC;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nimport {\n\tBaseControl,\n\tFlex,\n\tFlexItem,\n\tRangeControl,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nconst RANGE_CONTROL_MAX_VALUES = {\n\tpx: 600,\n\t'%': 100,\n\tvw: 100,\n\tvh: 100,\n\tem: 38,\n\trem: 38,\n\tsvw: 100,\n\tlvw: 100,\n\tdvw: 100,\n\tsvh: 100,\n\tlvh: 100,\n\tdvh: 100,\n\tvi: 100,\n\tsvi: 100,\n\tlvi: 100,\n\tdvi: 100,\n\tvb: 100,\n\tsvb: 100,\n\tlvb: 100,\n\tdvb: 100,\n\tvmin: 100,\n\tsvmin: 100,\n\tlvmin: 100,\n\tdvmin: 100,\n\tvmax: 100,\n\tsvmax: 100,\n\tlvmax: 100,\n\tdvmax: 100,\n};\n\nconst units = [\n\t{ value: 'px', label: 'px', default: 0 },\n\t{ value: 'rem', label: 'rem', default: 0 },\n\t{ value: 'em', label: 'em', default: 0 },\n];\n\nexport default {\n\tname: 'grid',\n\tlabel: __( 'Grid' ),\n\tinspectorControls: function GridLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { allowSizingOnChildren = false } = layoutBlockSupport;\n\n\t\t// Always show both column and minimum width controls in Auto mode.\n\t\t// Manual mode (with isManualPlacement) is only available behind the experiment flag.\n\t\tconst showColumnsControl = true;\n\t\tconst showMinWidthControl =\n\t\t\t! layout?.isManualPlacement ||\n\t\t\twindow.__experimentalEnableGridInteractivity;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t\t<GridLayoutTypeControl\n\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t{ showColumnsControl && (\n\t\t\t\t\t\t<GridLayoutColumnsAndRowsControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tallowSizingOnChildren={ allowSizingOnChildren }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ showMinWidthControl && (\n\t\t\t\t\t\t<GridLayoutMinimumWidthControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function GridLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout,\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst {\n\t\t\tminimumColumnWidth = null,\n\t\t\tcolumnCount = null,\n\t\t\trowCount = null,\n\t\t} = layout;\n\n\t\t// Check that the grid layout attributes are of the correct type, so that we don't accidentally\n\t\t// write code that stores a string attribute instead of a number.\n\t\tif ( process.env.NODE_ENV === 'development' ) {\n\t\t\tif (\n\t\t\t\tminimumColumnWidth &&\n\t\t\t\ttypeof minimumColumnWidth !== 'string'\n\t\t\t) {\n\t\t\t\tthrow new Error( 'minimumColumnWidth must be a string' );\n\t\t\t}\n\t\t\tif ( columnCount && typeof columnCount !== 'number' ) {\n\t\t\t\tthrow new Error( 'columnCount must be a number' );\n\t\t\t}\n\t\t\tif ( rowCount && typeof rowCount !== 'number' ) {\n\t\t\t\tthrow new Error( 'rowCount must be a number' );\n\t\t\t}\n\t\t}\n\n\t\t// If a block's block.json skips serialization for spacing or spacing.blockGap,\n\t\t// don't apply the user-defined value to the styles.\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )\n\t\t\t\t: undefined;\n\n\t\tlet output = '';\n\t\tconst rules = [];\n\n\t\tif ( minimumColumnWidth && columnCount > 0 ) {\n\t\t\tconst maxValue = `max(${ minimumColumnWidth }, ( 100% - (${\n\t\t\t\tblockGapValue || '1.2rem'\n\t\t\t}*${ columnCount - 1 }) ) / ${ columnCount })`;\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,\n\t\t\t\t`container-type: inline-size`\n\t\t\t);\n\t\t\tif ( rowCount ) {\n\t\t\t\trules.push(\n\t\t\t\t\t`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`\n\t\t\t\t);\n\t\t\t}\n\t\t} else if ( columnCount ) {\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`\n\t\t\t);\n\t\t\tif ( rowCount ) {\n\t\t\t\trules.push(\n\t\t\t\t\t`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\trules.push(\n\t\t\t\t`grid-template-columns: repeat(auto-fill, minmax(min(${\n\t\t\t\t\tminimumColumnWidth || '12rem'\n\t\t\t\t}, 100%), 1fr))`,\n\t\t\t\t'container-type: inline-size'\n\t\t\t);\n\t\t}\n\n\t\tif ( rules.length ) {\n\t\t\toutput = `${ appendSelectors( selector ) } { ${ rules.join(\n\t\t\t\t'; '\n\t\t\t) }; }`;\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'grid',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'horizontal';\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\n// Enables setting minimum width of grid items.\nfunction GridLayoutMinimumWidthControl( { layout, onChange } ) {\n\tconst { minimumColumnWidth, columnCount, isManualPlacement } = layout;\n\tconst defaultValue = isManualPlacement || columnCount ? null : '12rem';\n\tconst value = minimumColumnWidth || defaultValue;\n\tconst [ quantity, unit = 'rem' ] =\n\t\tparseQuantityAndUnitFromRawValue( value );\n\n\tconst handleSliderChange = ( next ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tminimumColumnWidth: [ next, unit ].join( '' ),\n\t\t} );\n\t};\n\n\t// Mostly copied from HeightControl.\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tlet newValue;\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && unit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tnewValue = ( quantity / 16 ).toFixed( 2 ) + newUnit;\n\t\t} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tnewValue = Math.round( quantity * 16 ) + newUnit;\n\t\t}\n\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tminimumColumnWidth: newValue,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__grid-layout-minimum-width-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ __( 'Min. column width' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Flex gap={ 4 }>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\tminimumColumnWidth:\n\t\t\t\t\t\t\t\t\tnewValue === '' ? undefined : newValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tlabel={ __( 'Minimum column width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tvalue={ quantity || 0 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tlabel={ __( 'Minimum column width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t\t<p className=\"components-base-control__help\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Columns will wrap to fewer per row when they can no longer maintain the minimum width.'\n\t\t\t\t) }\n\t\t\t</p>\n\t\t</fieldset>\n\t);\n}\n\n// Enables setting number of grid columns\nfunction GridLayoutColumnsAndRowsControl( {\n\tlayout,\n\tonChange,\n\tallowSizingOnChildren,\n} ) {\n\t// Allow unsetting the column count in Auto mode.\n\tconst defaultColumnCount = undefined;\n\tconst {\n\t\tcolumnCount = defaultColumnCount,\n\t\trowCount,\n\t\tisManualPlacement,\n\t} = layout;\n\n\treturn (\n\t\t<>\n\t\t\t<fieldset className=\"block-editor-hooks__grid-layout-columns-and-rows-controls\">\n\t\t\t\t{ ! isManualPlacement && (\n\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t{ __( 'Max. columns' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t) }\n\t\t\t\t<Flex gap={ 4 }>\n\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Allow unsetting the column count when in auto mode.\n\t\t\t\t\t\t\t\tconst defaultNewColumnCount = isManualPlacement\n\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\tconst newColumnCount =\n\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t? defaultNewColumnCount\n\t\t\t\t\t\t\t\t\t\t: parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\tcolumnCount: newColumnCount,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnCount }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\t\thideLabelFromVision={ ! isManualPlacement }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t{ allowSizingOnChildren && isManualPlacement ? (\n\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t// Don't allow unsetting the row count.\n\t\t\t\t\t\t\t\t\tconst newRowCount =\n\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( value, 10 );\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\trowCount: newRowCount,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tvalue={ rowCount }\n\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\tlabel={ __( 'Rows' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tvalue={ columnCount ?? 1 }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\tcolumnCount:\n\t\t\t\t\t\t\t\t\t\t\tvalue === '' || value === '0'\n\t\t\t\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t\t\t\t: value,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\tmax={ 16 }\n\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\tlabel={ __( 'Columns' ) }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</fieldset>\n\t\t</>\n\t);\n}\n\n// Enables switching between grid types\nfunction GridLayoutTypeControl( { layout, onChange } ) {\n\tconst { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =\n\t\tlayout;\n\n\t/**\n\t * When switching, temporarily save any custom values set on the\n\t * previous type so we can switch back without loss.\n\t */\n\tconst [ tempColumnCount, setTempColumnCount ] = useState(\n\t\tcolumnCount || 3\n\t);\n\tconst [ tempRowCount, setTempRowCount ] = useState( rowCount );\n\tconst [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(\n\t\tminimumColumnWidth || '12rem'\n\t);\n\n\tconst gridPlacement = isManualPlacement ? 'manual' : 'auto';\n\n\tconst onChangeType = ( value ) => {\n\t\tif ( value === 'manual' ) {\n\t\t\tsetTempMinimumColumnWidth( minimumColumnWidth || '12rem' );\n\t\t} else {\n\t\t\tsetTempColumnCount( columnCount || 3 );\n\t\t\tsetTempRowCount( rowCount );\n\t\t}\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tcolumnCount: value === 'manual' ? tempColumnCount : tempColumnCount,\n\t\t\trowCount: value === 'manual' ? tempRowCount : undefined,\n\t\t\tisManualPlacement: value === 'manual' ? true : undefined,\n\t\t\tminimumColumnWidth:\n\t\t\t\tvalue === 'auto' ? tempMinimumColumnWidth : null,\n\t\t} );\n\t};\n\n\tconst helpText =\n\t\tgridPlacement === 'manual'\n\t\t\t? __(\n\t\t\t\t\t'Grid items can be manually placed in any position on the grid.'\n\t\t\t )\n\t\t\t: __(\n\t\t\t\t\t'Grid items are placed automatically depending on their order.'\n\t\t\t );\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ __( 'Grid item position' ) }\n\t\t\tvalue={ gridPlacement }\n\t\t\tonChange={ onChangeType }\n\t\t\tisBlock\n\t\t\thelp={ helpText }\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"auto\"\n\t\t\t\tvalue=\"auto\"\n\t\t\t\tlabel={ __( 'Auto' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tkey=\"manual\"\n\t\t\t\tvalue=\"manual\"\n\t\t\t\tlabel={ __( 'Manual' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_utils", "VStack", "parseQuantityAndUnitFromRawValue", "UnitControl", "NumberControl", "ToggleGroupControl", "ToggleGroupControlOption"]
|
|
7
7
|
}
|
|
@@ -21,18 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var block_bindings_exports = {};
|
|
22
22
|
__export(block_bindings_exports, {
|
|
23
23
|
hasPatternOverridesDefaultBinding: () => hasPatternOverridesDefaultBinding,
|
|
24
|
-
replacePatternOverridesDefaultBinding: () => replacePatternOverridesDefaultBinding
|
|
25
|
-
useBlockBindingsUtils: () => useBlockBindingsUtils
|
|
24
|
+
replacePatternOverridesDefaultBinding: () => replacePatternOverridesDefaultBinding
|
|
26
25
|
});
|
|
27
26
|
module.exports = __toCommonJS(block_bindings_exports);
|
|
28
|
-
var import_data = require("@wordpress/data");
|
|
29
|
-
var import_store = require("../store");
|
|
30
|
-
var import_block_edit = require("../components/block-edit");
|
|
31
27
|
var DEFAULT_ATTRIBUTE = "__default";
|
|
32
28
|
var PATTERN_OVERRIDES_SOURCE = "core/pattern-overrides";
|
|
33
|
-
function isObjectEmpty(object) {
|
|
34
|
-
return !object || Object.keys(object).length === 0;
|
|
35
|
-
}
|
|
36
29
|
function hasPatternOverridesDefaultBinding(bindings) {
|
|
37
30
|
return bindings?.[DEFAULT_ATTRIBUTE]?.source === PATTERN_OVERRIDES_SOURCE;
|
|
38
31
|
}
|
|
@@ -47,44 +40,9 @@ function replacePatternOverridesDefaultBinding(bindings, supportedAttributes) {
|
|
|
47
40
|
}
|
|
48
41
|
return bindings;
|
|
49
42
|
}
|
|
50
|
-
function useBlockBindingsUtils(clientId) {
|
|
51
|
-
const { clientId: contextClientId } = (0, import_block_edit.useBlockEditContext)();
|
|
52
|
-
const blockClientId = clientId || contextClientId;
|
|
53
|
-
const { updateBlockAttributes } = (0, import_data.useDispatch)(import_store.store);
|
|
54
|
-
const { getBlockAttributes } = (0, import_data.useRegistry)().select(import_store.store);
|
|
55
|
-
const updateBlockBindings = (bindings) => {
|
|
56
|
-
const { metadata: { bindings: currentBindings, ...metadata } = {} } = getBlockAttributes(blockClientId);
|
|
57
|
-
const newBindings = { ...currentBindings };
|
|
58
|
-
Object.entries(bindings).forEach(([attribute, binding]) => {
|
|
59
|
-
if (!binding && newBindings[attribute]) {
|
|
60
|
-
delete newBindings[attribute];
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
newBindings[attribute] = binding;
|
|
64
|
-
});
|
|
65
|
-
const newMetadata = {
|
|
66
|
-
...metadata,
|
|
67
|
-
bindings: newBindings
|
|
68
|
-
};
|
|
69
|
-
if (isObjectEmpty(newMetadata.bindings)) {
|
|
70
|
-
delete newMetadata.bindings;
|
|
71
|
-
}
|
|
72
|
-
updateBlockAttributes(blockClientId, {
|
|
73
|
-
metadata: isObjectEmpty(newMetadata) ? void 0 : newMetadata
|
|
74
|
-
});
|
|
75
|
-
};
|
|
76
|
-
const removeAllBlockBindings = () => {
|
|
77
|
-
const { metadata: { bindings, ...metadata } = {} } = getBlockAttributes(blockClientId);
|
|
78
|
-
updateBlockAttributes(blockClientId, {
|
|
79
|
-
metadata: isObjectEmpty(metadata) ? void 0 : metadata
|
|
80
|
-
});
|
|
81
|
-
};
|
|
82
|
-
return { updateBlockBindings, removeAllBlockBindings };
|
|
83
|
-
}
|
|
84
43
|
// Annotate the CommonJS export names for ESM import in node:
|
|
85
44
|
0 && (module.exports = {
|
|
86
45
|
hasPatternOverridesDefaultBinding,
|
|
87
|
-
replacePatternOverridesDefaultBinding
|
|
88
|
-
useBlockBindingsUtils
|
|
46
|
+
replacePatternOverridesDefaultBinding
|
|
89
47
|
});
|
|
90
48
|
//# sourceMappingURL=block-bindings.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils/block-bindings.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["const DEFAULT_ATTRIBUTE = '__default';\nconst PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';\n\n/**\n * Checks if the block has the `__default` binding for pattern overrides.\n *\n * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.\n *\n * @return {boolean} Whether the block has the `__default` binding for pattern overrides.\n */\nexport function hasPatternOverridesDefaultBinding( bindings ) {\n\treturn bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;\n}\n\n/**\n * Returns the bindings with the `__default` binding for pattern overrides\n * replaced with the full-set of supported attributes. e.g.:\n *\n * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`\n * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`\n *\n * @param {?Record<string, object>} bindings A block's bindings from the metadata attribute.\n * @param {string[]} supportedAttributes The block's attributes which are supported by block bindings.\n *\n * @return {Object} The bindings with default replaced for pattern overrides.\n */\nexport function replacePatternOverridesDefaultBinding(\n\tbindings,\n\tsupportedAttributes\n) {\n\t// The `__default` binding currently only works for pattern overrides.\n\tif ( hasPatternOverridesDefaultBinding( bindings ) ) {\n\t\tconst bindingsWithDefaults = {};\n\t\tfor ( const attributeName of supportedAttributes ) {\n\t\t\t// If the block has mixed binding sources, retain any non pattern override bindings.\n\t\t\tconst bindingSource = bindings[ attributeName ]\n\t\t\t\t? bindings[ attributeName ]\n\t\t\t\t: { source: PATTERN_OVERRIDES_SOURCE };\n\t\t\tbindingsWithDefaults[ attributeName ] = bindingSource;\n\t\t}\n\n\t\treturn bindingsWithDefaults;\n\t}\n\n\treturn bindings;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAM,oBAAoB;AAC1B,IAAM,2BAA2B;AAS1B,SAAS,kCAAmC,UAAW;AAC7D,SAAO,WAAY,iBAAkB,GAAG,WAAW;AACpD;AAcO,SAAS,sCACf,UACA,qBACC;AAED,MAAK,kCAAmC,QAAS,GAAI;AACpD,UAAM,uBAAuB,CAAC;AAC9B,eAAY,iBAAiB,qBAAsB;AAElD,YAAM,gBAAgB,SAAU,aAAc,IAC3C,SAAU,aAAc,IACxB,EAAE,QAAQ,yBAAyB;AACtC,2BAAsB,aAAc,IAAI;AAAA,IACzC;AAEA,WAAO;AAAA,EACR;AAEA,SAAO;AACR;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/build/utils/index.js
CHANGED
|
@@ -31,17 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var utils_exports = {};
|
|
32
32
|
__export(utils_exports, {
|
|
33
33
|
getPxFromCssUnit: () => import_get_px_from_css_unit.default,
|
|
34
|
-
transformStyles: () => import_transform_styles.default
|
|
35
|
-
useBlockBindingsUtils: () => import_block_bindings.useBlockBindingsUtils
|
|
34
|
+
transformStyles: () => import_transform_styles.default
|
|
36
35
|
});
|
|
37
36
|
module.exports = __toCommonJS(utils_exports);
|
|
38
37
|
var import_transform_styles = __toESM(require("./transform-styles"));
|
|
39
38
|
var import_get_px_from_css_unit = __toESM(require("./get-px-from-css-unit"));
|
|
40
|
-
var import_block_bindings = require("./block-bindings");
|
|
41
39
|
// Annotate the CommonJS export names for ESM import in node:
|
|
42
40
|
0 && (module.exports = {
|
|
43
41
|
getPxFromCssUnit,
|
|
44
|
-
transformStyles
|
|
45
|
-
useBlockBindingsUtils
|
|
42
|
+
transformStyles
|
|
46
43
|
});
|
|
47
44
|
//# sourceMappingURL=index.js.map
|
package/build/utils/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils/index.js"],
|
|
4
|
-
"sourcesContent": ["export { default as transformStyles } from './transform-styles';\nexport { default as getPxFromCssUnit } from './get-px-from-css-unit';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["export { default as transformStyles } from './transform-styles';\nexport { default as getPxFromCssUnit } from './get-px-from-css-unit';\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA2C;AAC3C,kCAA4C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,14 +42,7 @@ function BlockAlignmentMatrixControl(props) {
|
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
},
|
|
45
|
-
renderContent: () => /* @__PURE__ */ jsx(
|
|
46
|
-
AlignmentMatrixControl,
|
|
47
|
-
{
|
|
48
|
-
hasFocusBorder: false,
|
|
49
|
-
onChange,
|
|
50
|
-
value
|
|
51
|
-
}
|
|
52
|
-
)
|
|
45
|
+
renderContent: () => /* @__PURE__ */ jsx(AlignmentMatrixControl, { onChange, value })
|
|
53
46
|
}
|
|
54
47
|
);
|
|
55
48
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/block-alignment-matrix-control/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tToolbarButton,\n\tDropdown,\n\tAlignmentMatrixControl,\n} from '@wordpress/components';\n\nconst noop = () => {};\n\n/**\n * The alignment matrix control allows users to quickly adjust inner block alignment.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md\n *\n * @example\n * ```jsx\n * function Example() {\n * return (\n * <BlockControls>\n * <BlockAlignmentMatrixControl\n * label={ __( 'Change content position' ) }\n * value=\"center\"\n * onChange={ ( nextPosition ) =>\n * setAttributes( { contentPosition: nextPosition } )\n * }\n * />\n * </BlockControls>\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.label Label for the control. Defaults to 'Change matrix alignment'.\n * @param {Function} props.onChange Function to execute upon change of matrix state.\n * @param {string} props.value Content alignment location. One of: 'center', 'center center',\n * 'center left', 'center right', 'top center', 'top left',\n * 'top right', 'bottom center', 'bottom left', 'bottom right'.\n * @param {boolean} props.isDisabled Whether the control should be disabled.\n * @return {Element} The BlockAlignmentMatrixControl component.\n */\nfunction BlockAlignmentMatrixControl( props ) {\n\tconst {\n\t\tlabel = __( 'Change matrix alignment' ),\n\t\tonChange = noop,\n\t\tvalue = 'center',\n\t\tisDisabled,\n\t} = props;\n\n\tconst icon = <AlignmentMatrixControl.Icon value={ value } />;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<AlignmentMatrixControl
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AA2CO;AAzCd,IAAM,OAAO,MAAM;AAAC;AAiCpB,SAAS,4BAA6B,OAAQ;AAC7C,QAAM;AAAA,IACL,QAAQ,GAAI,yBAA0B;AAAA,IACtC,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,EACD,IAAI;AAEJ,QAAM,OAAO,oBAAC,uBAAuB,MAAvB,EAA4B,OAAgB;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,EAAE,WAAW,eAAe;AAAA,MAC3C,cAAe,CAAE,EAAE,UAAU,OAAO,MAAO;AAC1C,cAAM,kBAAkB,CAAE,UAAW;AACpC,cAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,kBAAM,eAAe;AACrB,qBAAS;AAAA,UACV;AAAA,QACD;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YACA,SAAU;AAAA,YACV,iBAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,WAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,aAAW;AAAA,YACX,UAAW;AAAA;AAAA,QACZ;AAAA,MAEF;AAAA,MACA,eAAgB,MACf
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tToolbarButton,\n\tDropdown,\n\tAlignmentMatrixControl,\n} from '@wordpress/components';\n\nconst noop = () => {};\n\n/**\n * The alignment matrix control allows users to quickly adjust inner block alignment.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md\n *\n * @example\n * ```jsx\n * function Example() {\n * return (\n * <BlockControls>\n * <BlockAlignmentMatrixControl\n * label={ __( 'Change content position' ) }\n * value=\"center\"\n * onChange={ ( nextPosition ) =>\n * setAttributes( { contentPosition: nextPosition } )\n * }\n * />\n * </BlockControls>\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.label Label for the control. Defaults to 'Change matrix alignment'.\n * @param {Function} props.onChange Function to execute upon change of matrix state.\n * @param {string} props.value Content alignment location. One of: 'center', 'center center',\n * 'center left', 'center right', 'top center', 'top left',\n * 'top right', 'bottom center', 'bottom left', 'bottom right'.\n * @param {boolean} props.isDisabled Whether the control should be disabled.\n * @return {Element} The BlockAlignmentMatrixControl component.\n */\nfunction BlockAlignmentMatrixControl( props ) {\n\tconst {\n\t\tlabel = __( 'Change matrix alignment' ),\n\t\tonChange = noop,\n\t\tvalue = 'center',\n\t\tisDisabled,\n\t} = props;\n\n\tconst icon = <AlignmentMatrixControl.Icon value={ value } />;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<AlignmentMatrixControl onChange={ onChange } value={ value } />\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default BlockAlignmentMatrixControl;\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AA2CO;AAzCd,IAAM,OAAO,MAAM;AAAC;AAiCpB,SAAS,4BAA6B,OAAQ;AAC7C,QAAM;AAAA,IACL,QAAQ,GAAI,yBAA0B;AAAA,IACtC,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,EACD,IAAI;AAEJ,QAAM,OAAO,oBAAC,uBAAuB,MAAvB,EAA4B,OAAgB;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,EAAE,WAAW,eAAe;AAAA,MAC3C,cAAe,CAAE,EAAE,UAAU,OAAO,MAAO;AAC1C,cAAM,kBAAkB,CAAE,UAAW;AACpC,cAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,kBAAM,eAAe;AACrB,qBAAS;AAAA,UACV;AAAA,QACD;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YACA,SAAU;AAAA,YACV,iBAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,WAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,aAAW;AAAA,YACX,UAAW;AAAA;AAAA,QACZ;AAAA,MAEF;AAAA,MACA,eAAgB,MACf,oBAAC,0BAAuB,UAAsB,OAAgB;AAAA;AAAA,EAEhE;AAEF;AAEA,IAAO,yCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|