@wordpress/block-library 9.43.1-next.v.202604091042.0 → 9.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/cover/edit/index.cjs +8 -1
- package/build/cover/edit/index.cjs.map +2 -2
- package/build/embed/embed-preview.cjs +2 -1
- package/build/embed/embed-preview.cjs.map +2 -2
- package/build/image/image.cjs +28 -6
- package/build/image/image.cjs.map +2 -2
- package/build/navigation-link/link-ui/index.cjs +12 -1
- package/build/navigation-link/link-ui/index.cjs.map +2 -2
- package/build/paragraph/use-enter.cjs +4 -5
- package/build/paragraph/use-enter.cjs.map +2 -2
- package/build/search/block.json +5 -1
- package/build/search/edit.cjs +2 -0
- package/build/search/edit.cjs.map +2 -2
- package/build/separator/transforms.cjs +12 -4
- package/build/separator/transforms.cjs.map +2 -2
- package/build/tab/add-tab-toolbar-control.cjs +5 -17
- package/build/tab/add-tab-toolbar-control.cjs.map +2 -2
- package/build/tab/block.json +2 -1
- package/build/tab/remove-tab-toolbar-control.cjs +1 -4
- package/build/tab/remove-tab-toolbar-control.cjs.map +2 -2
- package/build/tabs/edit.cjs +45 -45
- package/build/tabs/edit.cjs.map +2 -2
- package/build/tabs-menu/block.json +1 -2
- package/build/tabs-menu-item/block.json +0 -6
- package/build/tabs-menu-item/edit.cjs +2 -8
- package/build/tabs-menu-item/edit.cjs.map +2 -2
- package/build-module/cover/edit/index.mjs +8 -1
- package/build-module/cover/edit/index.mjs.map +2 -2
- package/build-module/embed/embed-preview.mjs +2 -1
- package/build-module/embed/embed-preview.mjs.map +2 -2
- package/build-module/image/image.mjs +28 -6
- package/build-module/image/image.mjs.map +2 -2
- package/build-module/navigation-link/link-ui/index.mjs +12 -1
- package/build-module/navigation-link/link-ui/index.mjs.map +2 -2
- package/build-module/paragraph/use-enter.mjs +4 -5
- package/build-module/paragraph/use-enter.mjs.map +2 -2
- package/build-module/search/block.json +5 -1
- package/build-module/search/edit.mjs +2 -0
- package/build-module/search/edit.mjs.map +2 -2
- package/build-module/separator/transforms.mjs +17 -5
- package/build-module/separator/transforms.mjs.map +2 -2
- package/build-module/tab/add-tab-toolbar-control.mjs +6 -18
- package/build-module/tab/add-tab-toolbar-control.mjs.map +2 -2
- package/build-module/tab/block.json +2 -1
- package/build-module/tab/remove-tab-toolbar-control.mjs +1 -4
- package/build-module/tab/remove-tab-toolbar-control.mjs.map +2 -2
- package/build-module/tabs/edit.mjs +45 -45
- package/build-module/tabs/edit.mjs.map +2 -2
- package/build-module/tabs-menu/block.json +1 -2
- package/build-module/tabs-menu-item/block.json +0 -6
- package/build-module/tabs-menu-item/edit.mjs +3 -9
- package/build-module/tabs-menu-item/edit.mjs.map +2 -2
- package/build-style/post-author-biography/style-rtl.css +1 -0
- package/build-style/post-author-biography/style.css +1 -0
- package/build-style/style-rtl.css +10 -15
- package/build-style/style.css +10 -15
- package/build-style/tabs-menu-item/style-rtl.css +9 -6
- package/build-style/tabs-menu-item/style.css +9 -6
- package/package.json +38 -38
- package/src/cover/edit/index.js +9 -1
- package/src/embed/embed-preview.js +6 -5
- package/src/image/image.js +50 -5
- package/src/navigation-link/link-ui/index.js +12 -1
- package/src/paragraph/use-enter.js +5 -5
- package/src/post-author-biography/style.scss +1 -0
- package/src/search/block.json +5 -1
- package/src/search/edit.js +2 -0
- package/src/search/index.php +23 -3
- package/src/separator/transforms.js +19 -5
- package/src/style.scss +0 -1
- package/src/tab/add-tab-toolbar-control.js +24 -42
- package/src/tab/block.json +2 -1
- package/src/tab/index.php +21 -4
- package/src/tab/remove-tab-toolbar-control.js +1 -9
- package/src/tabs/edit.js +59 -66
- package/src/tabs/index.php +14 -15
- package/src/tabs-menu/block.json +1 -2
- package/src/tabs-menu/index.php +6 -17
- package/src/tabs-menu-item/block.json +0 -6
- package/src/tabs-menu-item/edit.js +3 -15
- package/src/tabs-menu-item/style.scss +10 -8
- package/build-style/tabs-menu/style-rtl.css +0 -8
- package/build-style/tabs-menu/style.css +0 -8
- package/src/tabs-menu/style.scss +0 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/search/edit.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst isSearchFieldHidden = hasOnlyButton && ! isSelected;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\tisSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder\u2026' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text\u2026' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tbuttonUseIcon: 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/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\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);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label\u2026' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth:\n\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\theight: 'auto',\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,iCAAiC;AAAA,EACjC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,iBAAiB;AACvC,SAAS,WAAW,cAAc;AAClC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,EAC7B,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,OAClB;AACP,SAAS,qBAAqB;AAC9B,SAAS,MAAM,cAAc;AAC7B,SAAS,IAAI,eAAe;AAC5B,SAAS,uBAAuB,iBAAiB;AAKjD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,sCAAsC;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst isSearchFieldHidden = hasOnlyButton && ! isSelected;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\tisSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\thasNoButton ? colorProps.className : undefined,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( hasNoButton ? colorProps.style : {} ),\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder\u2026' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text\u2026' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tbuttonUseIcon: 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/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\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);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label\u2026' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth:\n\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\theight: 'auto',\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
// packages/block-library/src/separator/transforms.js
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
createBlock,
|
|
4
|
+
getBlockVariations,
|
|
5
|
+
getDefaultBlockName
|
|
6
|
+
} from "@wordpress/blocks";
|
|
3
7
|
var transforms = {
|
|
4
8
|
from: [
|
|
5
9
|
{
|
|
6
10
|
type: "input",
|
|
7
11
|
regExp: /^-{3,}$/,
|
|
8
|
-
transform: () =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
transform: () => {
|
|
13
|
+
const defaultVariation = getBlockVariations(
|
|
14
|
+
"core/separator"
|
|
15
|
+
)?.find((variation) => variation.isDefault);
|
|
16
|
+
return [
|
|
17
|
+
createBlock(
|
|
18
|
+
"core/separator",
|
|
19
|
+
defaultVariation?.attributes ?? {}
|
|
20
|
+
),
|
|
21
|
+
createBlock(getDefaultBlockName())
|
|
22
|
+
];
|
|
23
|
+
}
|
|
12
24
|
},
|
|
13
25
|
{
|
|
14
26
|
type: "raw",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/separator/transforms.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {
|
|
5
|
-
"mappings": ";AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tcreateBlock,\n\tgetBlockVariations,\n\tgetDefaultBlockName,\n} from '@wordpress/blocks';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'input',\n\t\t\tregExp: /^-{3,}$/,\n\t\t\ttransform: () => {\n\t\t\t\t// Check for default variation to apply default variation attributes.\n\t\t\t\tconst defaultVariation = getBlockVariations(\n\t\t\t\t\t'core/separator'\n\t\t\t\t)?.find( ( variation ) => variation.isDefault );\n\n\t\t\t\treturn [\n\t\t\t\t\tcreateBlock(\n\t\t\t\t\t\t'core/separator',\n\t\t\t\t\t\tdefaultVariation?.attributes ?? {}\n\t\t\t\t\t),\n\t\t\t\t\tcreateBlock( getDefaultBlockName() ),\n\t\t\t\t];\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'raw',\n\t\t\tselector: 'hr',\n\t\t\tschema: {\n\t\t\t\thr: {},\n\t\t\t},\n\t\t},\n\t],\n\tto: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/spacer' ], // Transform to Spacer.\n\t\t\ttransform: ( { anchor } ) => {\n\t\t\t\treturn createBlock( 'core/spacer', {\n\t\t\t\t\tanchor: anchor || undefined,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,IACL;AAAA,MACC,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,WAAW,MAAM;AAEhB,cAAM,mBAAmB;AAAA,UACxB;AAAA,QACD,GAAG,KAAM,CAAE,cAAe,UAAU,SAAU;AAE9C,eAAO;AAAA,UACN;AAAA,YACC;AAAA,YACA,kBAAkB,cAAc,CAAC;AAAA,UAClC;AAAA,UACA,YAAa,oBAAoB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,IACA;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,QACP,IAAI,CAAC;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EACA,IAAI;AAAA,IACH;AAAA,MACC,MAAM;AAAA,MACN,QAAQ,CAAE,aAAc;AAAA;AAAA,MACxB,WAAW,CAAE,EAAE,OAAO,MAAO;AAC5B,eAAO,YAAa,eAAe;AAAA,UAClC,QAAQ,UAAU;AAAA,QACnB,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// packages/block-library/src/tab/add-tab-toolbar-control.js
|
|
2
|
-
import {
|
|
2
|
+
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import { createBlock } from "@wordpress/blocks";
|
|
4
4
|
import {
|
|
5
5
|
BlockControls,
|
|
@@ -10,13 +10,12 @@ import { useDispatch, useSelect } from "@wordpress/data";
|
|
|
10
10
|
import { jsx } from "react/jsx-runtime";
|
|
11
11
|
function AddTabToolbarControl({ tabsClientId }) {
|
|
12
12
|
const { insertBlock } = useDispatch(blockEditorStore);
|
|
13
|
-
const { tabPanelClientId, tabsMenuClientId
|
|
13
|
+
const { tabPanelClientId, tabsMenuClientId } = useSelect(
|
|
14
14
|
(select) => {
|
|
15
15
|
if (!tabsClientId) {
|
|
16
16
|
return {
|
|
17
17
|
tabPanelClientId: null,
|
|
18
|
-
tabsMenuClientId: null
|
|
19
|
-
existingAnchors: []
|
|
18
|
+
tabsMenuClientId: null
|
|
20
19
|
};
|
|
21
20
|
}
|
|
22
21
|
const { getBlocks } = select(blockEditorStore);
|
|
@@ -29,9 +28,7 @@ function AddTabToolbarControl({ tabsClientId }) {
|
|
|
29
28
|
);
|
|
30
29
|
return {
|
|
31
30
|
tabPanelClientId: tabPanel?.clientId || null,
|
|
32
|
-
tabsMenuClientId: tabsMenu?.clientId || null
|
|
33
|
-
tabCount: tabPanel?.innerBlocks?.length || 0,
|
|
34
|
-
existingAnchors: (tabPanel?.innerBlocks || []).map((block) => block.attributes.anchor).filter(Boolean)
|
|
31
|
+
tabsMenuClientId: tabsMenu?.clientId || null
|
|
35
32
|
};
|
|
36
33
|
},
|
|
37
34
|
[tabsClientId]
|
|
@@ -40,21 +37,12 @@ function AddTabToolbarControl({ tabsClientId }) {
|
|
|
40
37
|
if (!tabPanelClientId) {
|
|
41
38
|
return;
|
|
42
39
|
}
|
|
43
|
-
const existingAnchorSet = new Set(existingAnchors);
|
|
44
|
-
let tabNumber = tabCount + 1;
|
|
45
|
-
while (existingAnchorSet.has(`tab-${tabNumber}`)) {
|
|
46
|
-
tabNumber++;
|
|
47
|
-
}
|
|
48
40
|
const newTabBlock = createBlock("core/tab", {
|
|
49
|
-
|
|
50
|
-
/* translators: %d: tab number */
|
|
51
|
-
label: sprintf(__("Tab %d"), tabNumber)
|
|
41
|
+
label: __("Tab")
|
|
52
42
|
});
|
|
53
43
|
insertBlock(newTabBlock, void 0, tabPanelClientId);
|
|
54
44
|
if (tabsMenuClientId) {
|
|
55
|
-
const newMenuItemBlock = createBlock("core/tabs-menu-item", {
|
|
56
|
-
anchor: `tab-${tabNumber}-button`
|
|
57
|
-
});
|
|
45
|
+
const newMenuItemBlock = createBlock("core/tabs-menu-item", {});
|
|
58
46
|
insertBlock(newMenuItemBlock, void 0, tabsMenuClientId);
|
|
59
47
|
}
|
|
60
48
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tab/add-tab-toolbar-control.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {
|
|
5
|
-
"mappings": ";AAGA,SAAS,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Add tab\" button in the block toolbar for the tab block.\n * Inserts a new core/tab into the tab-panel and a new core/tabs-menu-item\n * into the tabs-menu, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function AddTabToolbarControl( { tabsClientId } ) {\n\tconst { insertBlock } = useDispatch( blockEditorStore );\n\n\tconst { tabPanelClientId, tabsMenuClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelClientId: null,\n\t\t\t\t\ttabsMenuClientId: null,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\t\t\treturn {\n\t\t\t\ttabPanelClientId: tabPanel?.clientId || null,\n\t\t\t\ttabsMenuClientId: tabsMenu?.clientId || null,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabBlock = createBlock( 'core/tab', {\n\t\t\tlabel: __( 'Tab' ),\n\t\t} );\n\t\tinsertBlock( newTabBlock, undefined, tabPanelClientId );\n\n\t\t// Insert a corresponding menu item into the tabs-menu.\n\t\tif ( tabsMenuClientId ) {\n\t\t\tconst newMenuItemBlock = createBlock( 'core/tabs-menu-item', {} );\n\t\t\tinsertBlock( newMenuItemBlock, undefined, tabsMenuClientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ addTab }\n\t\t\t\t\ttext={ __( 'Add tab' ) }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,aAAa,iBAAiB;AA0DnC;AA/CW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AAEtD,QAAM,EAAE,kBAAkB,iBAAiB,IAAI;AAAA,IAC9C,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,QACnB;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,aAAO;AAAA,QACN,kBAAkB,UAAU,YAAY;AAAA,QACxC,kBAAkB,UAAU,YAAY;AAAA,MACzC;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,kBAAmB;AACzB;AAAA,IACD;AAEA,UAAM,cAAc,YAAa,YAAY;AAAA,MAC5C,OAAO,GAAI,KAAM;AAAA,IAClB,CAAE;AACF,gBAAa,aAAa,QAAW,gBAAiB;AAGtD,QAAK,kBAAmB;AACvB,YAAM,mBAAmB,YAAa,uBAAuB,CAAC,CAAE;AAChE,kBAAa,kBAAkB,QAAW,gBAAiB;AAAA,IAC5D;AAAA,EACD;AAEA,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,10 +42,7 @@ function RemoveTabToolbarControl({ tabsClientId }) {
|
|
|
42
42
|
const tabs = tabPanel?.innerBlocks || [];
|
|
43
43
|
const menuItems = tabsMenu?.innerBlocks || [];
|
|
44
44
|
const activeTab = tabs[activeIndex];
|
|
45
|
-
const
|
|
46
|
-
const activeMenuItem = expectedMenuAnchor ? menuItems.find(
|
|
47
|
-
(m) => m.attributes?.anchor === expectedMenuAnchor
|
|
48
|
-
) : menuItems[activeIndex];
|
|
45
|
+
const activeMenuItem = menuItems[activeIndex];
|
|
49
46
|
return {
|
|
50
47
|
activeTabClientId: activeTab?.clientId || null,
|
|
51
48
|
activeMenuItemClientId: activeMenuItem?.clientId || null,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tab/remove-tab-toolbar-control.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Remove Tab\" button in the block toolbar for the tab block.\n * Removes the currently active core/tab and its corresponding\n * core/tabs-menu-item, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function RemoveTabToolbarControl( { tabsClientId } ) {\n\tconst {\n\t\tremoveBlock,\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst {\n\t\tactiveTabClientId,\n\t\tactiveMenuItemClientId,\n\t\ttabCount,\n\t\teditorActiveTabIndex,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\tactiveTabClientId: null,\n\t\t\t\t\tactiveMenuItemClientId: null,\n\t\t\t\t\ttabCount: 0,\n\t\t\t\t\teditorActiveTabIndex: 0,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst tabsAttributes = getBlockAttributes( tabsClientId );\n\t\t\tconst activeIndex =\n\t\t\t\ttabsAttributes?.editorActiveTabIndex ??\n\t\t\t\ttabsAttributes?.activeTabIndex ??\n\t\t\t\t0;\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\t\t\tconst tabs = tabPanel?.innerBlocks || [];\n\t\t\tconst menuItems = tabsMenu?.innerBlocks || [];\n\t\t\tconst activeTab = tabs[ activeIndex ];\n\t\t\
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,UAAU;AACnB,SAAS,aAAa,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Remove Tab\" button in the block toolbar for the tab block.\n * Removes the currently active core/tab and its corresponding\n * core/tabs-menu-item, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function RemoveTabToolbarControl( { tabsClientId } ) {\n\tconst {\n\t\tremoveBlock,\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst {\n\t\tactiveTabClientId,\n\t\tactiveMenuItemClientId,\n\t\ttabCount,\n\t\teditorActiveTabIndex,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\tactiveTabClientId: null,\n\t\t\t\t\tactiveMenuItemClientId: null,\n\t\t\t\t\ttabCount: 0,\n\t\t\t\t\teditorActiveTabIndex: 0,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst tabsAttributes = getBlockAttributes( tabsClientId );\n\t\t\tconst activeIndex =\n\t\t\t\ttabsAttributes?.editorActiveTabIndex ??\n\t\t\t\ttabsAttributes?.activeTabIndex ??\n\t\t\t\t0;\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\t\t\tconst tabs = tabPanel?.innerBlocks || [];\n\t\t\tconst menuItems = tabsMenu?.innerBlocks || [];\n\t\t\tconst activeTab = tabs[ activeIndex ];\n\t\t\tconst activeMenuItem = menuItems[ activeIndex ];\n\t\t\treturn {\n\t\t\t\tactiveTabClientId: activeTab?.clientId || null,\n\t\t\t\tactiveMenuItemClientId: activeMenuItem?.clientId || null,\n\t\t\t\ttabCount: tabs.length,\n\t\t\t\teditorActiveTabIndex: activeIndex,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst removeTab = () => {\n\t\tif ( ! activeTabClientId || tabCount <= 1 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate new active index after removal.\n\t\tconst newActiveIndex =\n\t\t\teditorActiveTabIndex >= tabCount - 1\n\t\t\t\t? tabCount - 2\n\t\t\t\t: editorActiveTabIndex;\n\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\teditorActiveTabIndex: newActiveIndex,\n\t\t} );\n\n\t\t// Remove the tab content block and the corresponding menu item.\n\t\tremoveBlock( activeTabClientId, false );\n\t\tif ( activeMenuItemClientId ) {\n\t\t\tremoveBlock( activeMenuItemClientId, false );\n\t\t}\n\n\t\tif ( tabsClientId ) {\n\t\t\tselectBlock( tabsClientId );\n\t\t}\n\t};\n\n\tconst isDisabled = tabCount <= 1 || ! activeTabClientId;\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ removeTab }\n\t\t\t\t\ttext={ __( 'Remove tab' ) }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,UAAU;AACnB,SAAS,aAAa,iBAAiB;AA8FnC;AAnFW,SAAR,wBAA0C,EAAE,aAAa,GAAI;AACnE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,gBAAiB;AAElC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,wBAAwB;AAAA,UACxB,UAAU;AAAA,UACV,sBAAsB;AAAA,QACvB;AAAA,MACD;AACA,YAAM,EAAE,WAAW,mBAAmB,IACrC,OAAQ,gBAAiB;AAC1B,YAAM,iBAAiB,mBAAoB,YAAa;AACxD,YAAM,cACL,gBAAgB,wBAChB,gBAAgB,kBAChB;AACD,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,OAAO,UAAU,eAAe,CAAC;AACvC,YAAM,YAAY,UAAU,eAAe,CAAC;AAC5C,YAAM,YAAY,KAAM,WAAY;AACpC,YAAM,iBAAiB,UAAW,WAAY;AAC9C,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,wBAAwB,gBAAgB,YAAY;AAAA,QACpD,UAAU,KAAK;AAAA,QACf,sBAAsB;AAAA,MACvB;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,YAAY,MAAM;AACvB,QAAK,CAAE,qBAAqB,YAAY,GAAI;AAC3C;AAAA,IACD;AAGA,UAAM,iBACL,wBAAwB,WAAW,IAChC,WAAW,IACX;AAEJ,4CAAwC;AACxC,0BAAuB,cAAc;AAAA,MACpC,sBAAsB;AAAA,IACvB,CAAE;AAGF,gBAAa,mBAAmB,KAAM;AACtC,QAAK,wBAAyB;AAC7B,kBAAa,wBAAwB,KAAM;AAAA,IAC5C;AAEA,QAAK,cAAe;AACnB,kBAAa,YAAa;AAAA,IAC3B;AAAA,EACD;AAEA,QAAM,aAAa,YAAY,KAAK,CAAE;AAEtC,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,YAAa;AAAA,MACxB,UAAW;AAAA;AAAA,EACZ,GACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,8 +7,10 @@ import {
|
|
|
7
7
|
} from "@wordpress/block-editor";
|
|
8
8
|
import { useSelect, useDispatch } from "@wordpress/data";
|
|
9
9
|
import { useMemo, useEffect, useRef } from "@wordpress/element";
|
|
10
|
+
import { __ } from "@wordpress/i18n";
|
|
10
11
|
import Controls from "./controls.mjs";
|
|
11
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var EMPTY_ARRAY = [];
|
|
12
14
|
var TABS_TEMPLATE = [
|
|
13
15
|
[
|
|
14
16
|
"core/tabs-menu",
|
|
@@ -18,8 +20,8 @@ var TABS_TEMPLATE = [
|
|
|
18
20
|
}
|
|
19
21
|
},
|
|
20
22
|
[
|
|
21
|
-
["core/tabs-menu-item", {
|
|
22
|
-
["core/tabs-menu-item", {
|
|
23
|
+
["core/tabs-menu-item", {}],
|
|
24
|
+
["core/tabs-menu-item", {}]
|
|
23
25
|
]
|
|
24
26
|
],
|
|
25
27
|
[
|
|
@@ -33,16 +35,14 @@ var TABS_TEMPLATE = [
|
|
|
33
35
|
[
|
|
34
36
|
"core/tab",
|
|
35
37
|
{
|
|
36
|
-
|
|
37
|
-
label: "Tab 1"
|
|
38
|
+
label: __("Tab")
|
|
38
39
|
},
|
|
39
40
|
[["core/paragraph"]]
|
|
40
41
|
],
|
|
41
42
|
[
|
|
42
43
|
"core/tab",
|
|
43
44
|
{
|
|
44
|
-
|
|
45
|
-
label: "Tab 2"
|
|
45
|
+
label: __("Tab")
|
|
46
46
|
},
|
|
47
47
|
[["core/paragraph"]]
|
|
48
48
|
]
|
|
@@ -61,8 +61,8 @@ function Edit({
|
|
|
61
61
|
setAttributes({ editorActiveTabIndex: activeTabIndex });
|
|
62
62
|
}
|
|
63
63
|
}, []);
|
|
64
|
-
const { removeBlock } = useDispatch(blockEditorStore);
|
|
65
|
-
const { tabs, menuItems } = useSelect(
|
|
64
|
+
const { removeBlock, replaceInnerBlocks } = useDispatch(blockEditorStore);
|
|
65
|
+
const { tabs, tabPanelClientId, menuItems } = useSelect(
|
|
66
66
|
(select) => {
|
|
67
67
|
const { getBlocks } = select(blockEditorStore);
|
|
68
68
|
const innerBlocks = getBlocks(clientId);
|
|
@@ -73,13 +73,9 @@ function Edit({
|
|
|
73
73
|
(block) => block.name === "core/tabs-menu"
|
|
74
74
|
);
|
|
75
75
|
return {
|
|
76
|
-
tabs: tabPanel
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
menuItems: tabsMenu ? getBlocks(tabsMenu.clientId).filter((b) => b.name === "core/tabs-menu-item").map((b) => ({
|
|
80
|
-
clientId: b.clientId,
|
|
81
|
-
anchor: b.attributes.anchor ?? ""
|
|
82
|
-
})) : []
|
|
76
|
+
tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
|
|
77
|
+
tabPanelClientId: tabPanel?.clientId ?? null,
|
|
78
|
+
menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY
|
|
83
79
|
};
|
|
84
80
|
},
|
|
85
81
|
[clientId]
|
|
@@ -87,8 +83,7 @@ function Edit({
|
|
|
87
83
|
const prevSyncStateRef = useRef(null);
|
|
88
84
|
useEffect(() => {
|
|
89
85
|
const currentTabs = tabs.map((tab) => ({
|
|
90
|
-
clientId: tab.clientId
|
|
91
|
-
anchor: tab.attributes.anchor ?? ""
|
|
86
|
+
clientId: tab.clientId
|
|
92
87
|
}));
|
|
93
88
|
if (prevSyncStateRef.current === null) {
|
|
94
89
|
prevSyncStateRef.current = {
|
|
@@ -100,10 +95,25 @@ function Edit({
|
|
|
100
95
|
const { tabs: prevTabs, menuItems: prevMenuItems } = prevSyncStateRef.current;
|
|
101
96
|
const tabsRemoved = currentTabs.length < prevTabs.length;
|
|
102
97
|
const menuItemsRemoved = menuItems.length < prevMenuItems.length;
|
|
98
|
+
const menuItemsReordered = !tabsRemoved && !menuItemsRemoved && menuItems.length === prevMenuItems.length && menuItems.some(
|
|
99
|
+
(m, i) => m.clientId !== prevMenuItems[i]?.clientId
|
|
100
|
+
);
|
|
103
101
|
prevSyncStateRef.current = {
|
|
104
102
|
tabs: currentTabs,
|
|
105
103
|
menuItems: [...menuItems]
|
|
106
104
|
};
|
|
105
|
+
if (menuItemsReordered && tabPanelClientId) {
|
|
106
|
+
const reorderedTabs = menuItems.map((menuItem) => {
|
|
107
|
+
const oldIndex = prevMenuItems.findIndex(
|
|
108
|
+
(pm) => pm.clientId === menuItem.clientId
|
|
109
|
+
);
|
|
110
|
+
return oldIndex !== -1 ? tabs[oldIndex] : null;
|
|
111
|
+
}).filter(Boolean);
|
|
112
|
+
if (reorderedTabs.length === tabs.length) {
|
|
113
|
+
replaceInnerBlocks(tabPanelClientId, reorderedTabs, false);
|
|
114
|
+
}
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
107
117
|
if (!tabsRemoved && !menuItemsRemoved || tabsRemoved && menuItemsRemoved) {
|
|
108
118
|
return;
|
|
109
119
|
}
|
|
@@ -112,37 +122,27 @@ function Edit({
|
|
|
112
122
|
menuItems.map((m) => m.clientId)
|
|
113
123
|
);
|
|
114
124
|
if (tabsRemoved) {
|
|
115
|
-
prevTabs.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
(m) => m.clientId !== menuItemToRemove.clientId
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
});
|
|
125
|
+
const removedIndex = prevTabs.findIndex(
|
|
126
|
+
(t) => !currentTabIds.has(t.clientId)
|
|
127
|
+
);
|
|
128
|
+
if (removedIndex >= 0 && menuItems[removedIndex]) {
|
|
129
|
+
removeBlock(menuItems[removedIndex].clientId, false);
|
|
130
|
+
prevSyncStateRef.current.menuItems = prevSyncStateRef.current.menuItems.filter(
|
|
131
|
+
(_, i) => i !== removedIndex
|
|
132
|
+
);
|
|
133
|
+
}
|
|
128
134
|
} else {
|
|
129
|
-
prevMenuItems.
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
(
|
|
135
|
+
const removedIndex = prevMenuItems.findIndex(
|
|
136
|
+
(m) => !currentMenuItemIds.has(m.clientId)
|
|
137
|
+
);
|
|
138
|
+
if (removedIndex >= 0 && tabs[removedIndex]) {
|
|
139
|
+
removeBlock(tabs[removedIndex].clientId, false);
|
|
140
|
+
prevSyncStateRef.current.tabs = prevSyncStateRef.current.tabs.filter(
|
|
141
|
+
(_, i) => i !== removedIndex
|
|
136
142
|
);
|
|
137
|
-
|
|
138
|
-
removeBlock(tabToRemove.clientId, false);
|
|
139
|
-
prevSyncStateRef.current.tabs = prevSyncStateRef.current.tabs.filter(
|
|
140
|
-
(t) => t.clientId !== tabToRemove.clientId
|
|
141
|
-
);
|
|
142
|
-
}
|
|
143
|
-
});
|
|
143
|
+
}
|
|
144
144
|
}
|
|
145
|
-
}, [tabs, menuItems, removeBlock]);
|
|
145
|
+
}, [tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks]);
|
|
146
146
|
const contextValue = useMemo(() => {
|
|
147
147
|
const tabList = tabs.map((tab, index) => ({
|
|
148
148
|
id: tab.attributes.anchor || `tab-${index}`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/tabs/edit.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tabs-menu',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[ 'core/tabs-menu-item', {
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,WAAW,cAAc;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst EMPTY_ARRAY = [];\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tabs-menu',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[ 'core/tabs-menu-item', {} ],\n\t\t\t[ 'core/tabs-menu-item', {} ],\n\t\t],\n\t],\n\t[\n\t\t'core/tab-panel',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Tab' ),\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t],\n\t],\n];\n\nfunction Edit( {\n\tclientId,\n\tattributes,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\t/**\n\t * Initialize editorActiveTabIndex to activeTabIndex on mount.\n\t * This ensures the ephemeral editor state starts at the persisted default.\n\t */\n\tuseEffect( () => {\n\t\tif ( editorActiveTabIndex === undefined ) {\n\t\t\tsetAttributes( { editorActiveTabIndex: activeTabIndex } );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst { removeBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );\n\n\tconst { tabs, tabPanelClientId, menuItems } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabPanelClientId: tabPanel?.clientId ?? null,\n\t\t\t\tmenuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t/**\n\t * Keep tabs and menu items in sync when either is deleted directly (e.g.\n\t * via the Backspace key or List View).\n\t *\n\t * TODO: This effect only handles deletions. The two lists can get out of\n\t * sync in other cases: if a user pastes a core/tab block into the tab-panel\n\t * (or duplicates one), no corresponding tabs-menu-item is created; if a\n\t * user drags and drops a tabs-menu-item, the tab panel is not copied with\n\t * it. We should extend this effect to handle insertions, detecting when\n\t * tabs.length > menuItems.length and inserting the missing menu\n\t * item(s) at the correct index.\n\t */\n\tconst prevSyncStateRef = useRef( null );\n\tuseEffect( () => {\n\t\tconst currentTabs = tabs.map( ( tab ) => ( {\n\t\t\tclientId: tab.clientId,\n\t\t} ) );\n\n\t\tif ( prevSyncStateRef.current === null ) {\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabs: currentTabs,\n\t\t\t\tmenuItems: [ ...menuItems ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst { tabs: prevTabs, menuItems: prevMenuItems } =\n\t\t\tprevSyncStateRef.current;\n\n\t\tconst tabsRemoved = currentTabs.length < prevTabs.length;\n\t\tconst menuItemsRemoved = menuItems.length < prevMenuItems.length;\n\t\tconst menuItemsReordered =\n\t\t\t! tabsRemoved &&\n\t\t\t! menuItemsRemoved &&\n\t\t\tmenuItems.length === prevMenuItems.length &&\n\t\t\tmenuItems.some(\n\t\t\t\t( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId\n\t\t\t);\n\n\t\t// Update snapshot to the current state.\n\t\t// Snapshot is updated eagerly; post-removal mutations keep it consistent\n\t\t// so the next effect invocation sees a stable baseline.\n\t\tprevSyncStateRef.current = {\n\t\t\ttabs: currentTabs,\n\t\t\tmenuItems: [ ...menuItems ],\n\t\t};\n\n\t\t// When menu items are reordered, move the corresponding tab content\n\t\t// blocks to match the new order.\n\t\tif ( menuItemsReordered && tabPanelClientId ) {\n\t\t\tconst reorderedTabs = menuItems\n\t\t\t\t.map( ( menuItem ) => {\n\t\t\t\t\tconst oldIndex = prevMenuItems.findIndex(\n\t\t\t\t\t\t( pm ) => pm.clientId === menuItem.clientId\n\t\t\t\t\t);\n\t\t\t\t\treturn oldIndex !== -1 ? tabs[ oldIndex ] : null;\n\t\t\t\t} )\n\t\t\t\t.filter( Boolean );\n\t\t\tif ( reorderedTabs.length === tabs.length ) {\n\t\t\t\treplaceInnerBlocks( tabPanelClientId, reorderedTabs, false );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// Lists are in sync, nothing changed, or toolbar already removed both.\n\t\tif (\n\t\t\t( ! tabsRemoved && ! menuItemsRemoved ) ||\n\t\t\t( tabsRemoved && menuItemsRemoved )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );\n\t\tconst currentMenuItemIds = new Set(\n\t\t\tmenuItems.map( ( m ) => m.clientId )\n\t\t);\n\n\t\tif ( tabsRemoved ) {\n\t\t\t// Remove the menu item at the same position.\n\t\t\tconst removedIndex = prevTabs.findIndex(\n\t\t\t\t( t ) => ! currentTabIds.has( t.clientId )\n\t\t\t);\n\t\t\tif ( removedIndex >= 0 && menuItems[ removedIndex ] ) {\n\t\t\t\tremoveBlock( menuItems[ removedIndex ].clientId, false );\n\t\t\t\tprevSyncStateRef.current.menuItems =\n\t\t\t\t\tprevSyncStateRef.current.menuItems.filter(\n\t\t\t\t\t\t( _, i ) => i !== removedIndex\n\t\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t// Remove the tab at the same position.\n\t\t\tconst removedIndex = prevMenuItems.findIndex(\n\t\t\t\t( m ) => ! currentMenuItemIds.has( m.clientId )\n\t\t\t);\n\t\t\tif ( removedIndex >= 0 && tabs[ removedIndex ] ) {\n\t\t\t\tremoveBlock( tabs[ removedIndex ].clientId, false );\n\t\t\t\tprevSyncStateRef.current.tabs =\n\t\t\t\t\tprevSyncStateRef.current.tabs.filter(\n\t\t\t\t\t\t( _, i ) => i !== removedIndex\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [ tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks ] );\n\n\t/**\n\t * Memoize context value to prevent unnecessary re-renders.\n\t */\n\tconst contextValue = useMemo( () => {\n\t\t/**\n\t\t * Compute tabs list from innerblocks to provide via context.\n\t\t * This traverses the tab-panel block to find all tab blocks\n\t\t * and extracts their label and anchor for the tabs-menu to consume.\n\t\t */\n\t\tconst tabList = tabs.map( ( tab, index ) => ( {\n\t\t\tid: tab.attributes.anchor || `tab-${ index }`,\n\t\t\tlabel: tab.attributes.label || '',\n\t\t\tclientId: tab.clientId,\n\t\t\tindex,\n\t\t} ) );\n\n\t\treturn {\n\t\t\t'core/tabs-list': tabList,\n\t\t\t'core/tabs-id': anchor,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t};\n\t}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\t/**\n\t * Block props for the tabs container.\n\t */\n\tconst blockProps = useBlockProps( {\n\t\tclassName: layoutClassNames,\n\t} );\n\n\t/**\n\t * Innerblocks props for the tabs container.\n\t */\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: false,\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<BlockContextProvider value={ contextValue }>\n\t\t\t<div { ...innerBlockProps }>\n\t\t\t\t<Controls\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t\t{ innerBlockProps.children }\n\t\t\t</div>\n\t\t</BlockContextProvider>\n\t);\n}\n\nexport default Edit;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|