diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js index bc06c9de5aaaff..c9b74b55f7e7dd 100644 --- a/packages/block-editor/src/autocompleters/block.js +++ b/packages/block-editor/src/autocompleters/block.js @@ -121,6 +121,7 @@ function createBlockCompleter() { name, initialAttributes, innerBlocks, + template, syncStatus, content, } = inserterItem; @@ -136,7 +137,7 @@ function createBlockCompleter() { name, initialAttributes, createBlocksFromInnerBlocksTemplate( - innerBlocks + innerBlocks || template ) ), }; diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js index 31344b54337935..f710fb0f57be93 100644 --- a/packages/block-editor/src/components/block-edit/edit.js +++ b/packages/block-editor/src/components/block-edit/edit.js @@ -11,13 +11,18 @@ import { getBlockDefaultClassName, hasBlockSupport, getBlockType, + getBlockEdit, } from '@wordpress/blocks'; -import { useContext, useMemo } from '@wordpress/element'; +import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data'; +import { useContext, useMemo, useRef } from '@wordpress/element'; /** * Internal dependencies */ import BlockContext from '../block-context'; +import RichText from '../rich-text'; +import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; /** * Default value used for blocks which do not define their own context needs, @@ -29,20 +34,93 @@ import BlockContext from '../block-context'; */ const DEFAULT_BLOCK_CONTEXT = {}; +function useSelectedChildBlock( clientId ) { + return useSelect( + ( select ) => { + const { + getSelectionStart, + isBlockSelected, + hasSelectedInnerBlock, + getBlockAttributes, + getBlockName, + } = select( blockEditorStore ); + + const isSelected = + isBlockSelected( clientId ) || + hasSelectedInnerBlock( clientId, true ); + + if ( ! isSelected ) { + return { + selClientId: null, + selBlockName: null, + selContent: undefined, + }; + } + + const sClientId = getSelectionStart().clientId; + return { + selClientId: sClientId, + selBlockName: getBlockName( sClientId ), + selContent: getBlockAttributes( sClientId ).content, + }; + }, + [ clientId ] + ); +} +function FallbackRichEdit( { clientId } ) { + const ref = useRef(); + const { selClientId, selBlockName, selContent } = + useSelectedChildBlock( clientId ); + const { updateBlockAttributes, replaceEdit } = unlock( + useDispatch( blockEditorStore ) + ); + + if ( ! selClientId ) { + return null; + } + + const onChange = ( value ) => + updateBlockAttributes( [ selClientId ], { content: value } ); + + const onReplace = ( blocks, indexToSelect, initialPos ) => + replaceEdit( selClientId, blocks, indexToSelect, initialPos ); + + return ( +
+ +
+ ); +} + +function FallbackEdit( { clientId } ) { + return ( + + + + ); +} + const Edit = ( props ) => { const { name } = props; const blockType = getBlockType( name ); - if ( ! blockType ) { + const Component = getBlockEdit( blockType ); + if ( ! Component ) { return null; } - // `edit` and `save` are functions or components describing the markup - // with which a block is displayed. If `blockType` is valid, assign - // them preferentially as the render value for the block. - const Component = blockType.edit || blockType.save; - - return ; + return ; }; const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit ); diff --git a/packages/block-editor/src/components/block-edit/edit.native.js b/packages/block-editor/src/components/block-edit/edit.native.js index 12d16d155d7b31..60c8719d5bcc1e 100644 --- a/packages/block-editor/src/components/block-edit/edit.native.js +++ b/packages/block-editor/src/components/block-edit/edit.native.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { withFilters } from '@wordpress/components'; -import { getBlockType } from '@wordpress/blocks'; +import { getBlockType, getBlockEdit } from '@wordpress/blocks'; import { useContext, useMemo } from '@wordpress/element'; /** @@ -37,12 +37,11 @@ export const Edit = ( props ) => { : DEFAULT_BLOCK_CONTEXT; }, [ blockType, blockContext ] ); - if ( ! blockType ) { + const Component = getBlockEdit( blockType ); + if ( ! Component ) { return null; } - const Component = blockType.edit; - return ; }; diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 69fe3161126185..94c421c8c0e1ea 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -16,11 +16,7 @@ import { import { getBlockType, getSaveContent, - isUnmodifiedDefaultBlock, serializeRawBlock, - switchToBlockType, - getDefaultBlockName, - isUnmodifiedBlock, isReusableBlock, getBlockDefaultClassName, store as blocksStore, @@ -243,241 +239,24 @@ function BlockListBlock( { ); } -const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => { - const { - updateBlockAttributes, - insertBlocks, - mergeBlocks, - replaceBlocks, - toggleSelection, - __unstableMarkLastChangeAsPersistent, - moveBlocksToPosition, - removeBlock, - } = dispatch( blockEditorStore ); +const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => { + const d = unlock( dispatch( blockEditorStore ) ); + const { clientId, rootClientId } = ownProps; // Do not add new properties here, use `useDispatch` instead to avoid // leaking new props to the public API (editor.BlockListBlock filter). return { - setAttributes( newAttributes ) { - const { getMultiSelectedBlockClientIds } = - registry.select( blockEditorStore ); - const multiSelectedBlockClientIds = - getMultiSelectedBlockClientIds(); - const { clientId } = ownProps; - const clientIds = multiSelectedBlockClientIds.length - ? multiSelectedBlockClientIds - : [ clientId ]; - - updateBlockAttributes( clientIds, newAttributes ); - }, - onInsertBlocks( blocks, index ) { - const { rootClientId } = ownProps; - insertBlocks( blocks, index, rootClientId ); - }, - onInsertBlocksAfter( blocks ) { - const { clientId, rootClientId } = ownProps; - const { getBlockIndex } = registry.select( blockEditorStore ); - const index = getBlockIndex( clientId ); - insertBlocks( blocks, index + 1, rootClientId ); - }, - onMerge( forward ) { - const { clientId, rootClientId } = ownProps; - const { - getPreviousBlockClientId, - getNextBlockClientId, - getBlock, - getBlockAttributes, - getBlockName, - getBlockOrder, - getBlockIndex, - getBlockRootClientId, - canInsertBlockType, - } = registry.select( blockEditorStore ); - - /** - * Moves the block with clientId up one level. If the block type - * cannot be inserted at the new location, it will be attempted to - * convert to the default block type. - * - * @param {string} _clientId The block to move. - * @param {boolean} changeSelection Whether to change the selection - * to the moved block. - */ - function moveFirstItemUp( _clientId, changeSelection = true ) { - const targetRootClientId = getBlockRootClientId( _clientId ); - const blockOrder = getBlockOrder( _clientId ); - const [ firstClientId ] = blockOrder; - - if ( - blockOrder.length === 1 && - isUnmodifiedBlock( getBlock( firstClientId ) ) - ) { - removeBlock( _clientId ); - } else { - registry.batch( () => { - if ( - canInsertBlockType( - getBlockName( firstClientId ), - targetRootClientId - ) - ) { - moveBlocksToPosition( - [ firstClientId ], - _clientId, - targetRootClientId, - getBlockIndex( _clientId ) - ); - } else { - const replacement = switchToBlockType( - getBlock( firstClientId ), - getDefaultBlockName() - ); - - if ( replacement && replacement.length ) { - insertBlocks( - replacement, - getBlockIndex( _clientId ), - targetRootClientId, - changeSelection - ); - removeBlock( firstClientId, false ); - } - } - - if ( - ! getBlockOrder( _clientId ).length && - isUnmodifiedBlock( getBlock( _clientId ) ) - ) { - removeBlock( _clientId, false ); - } - } ); - } - } - - // For `Delete` or forward merge, we should do the exact same thing - // as `Backspace`, but from the other block. - if ( forward ) { - if ( rootClientId ) { - const nextRootClientId = - getNextBlockClientId( rootClientId ); - - if ( nextRootClientId ) { - // If there is a block that follows with the same parent - // block name and the same attributes, merge the inner - // blocks. - if ( - getBlockName( rootClientId ) === - getBlockName( nextRootClientId ) - ) { - const rootAttributes = - getBlockAttributes( rootClientId ); - const previousRootAttributes = - getBlockAttributes( nextRootClientId ); - - if ( - Object.keys( rootAttributes ).every( - ( key ) => - rootAttributes[ key ] === - previousRootAttributes[ key ] - ) - ) { - registry.batch( () => { - moveBlocksToPosition( - getBlockOrder( nextRootClientId ), - nextRootClientId, - rootClientId - ); - removeBlock( nextRootClientId, false ); - } ); - return; - } - } else { - mergeBlocks( rootClientId, nextRootClientId ); - return; - } - } - } - - const nextBlockClientId = getNextBlockClientId( clientId ); - - if ( ! nextBlockClientId ) { - return; - } - - if ( getBlockOrder( nextBlockClientId ).length ) { - moveFirstItemUp( nextBlockClientId, false ); - } else { - mergeBlocks( clientId, nextBlockClientId ); - } - } else { - const previousBlockClientId = - getPreviousBlockClientId( clientId ); - - if ( previousBlockClientId ) { - mergeBlocks( previousBlockClientId, clientId ); - } else if ( rootClientId ) { - const previousRootClientId = - getPreviousBlockClientId( rootClientId ); - - // If there is a preceding block with the same parent block - // name and the same attributes, merge the inner blocks. - if ( - previousRootClientId && - getBlockName( rootClientId ) === - getBlockName( previousRootClientId ) - ) { - const rootAttributes = - getBlockAttributes( rootClientId ); - const previousRootAttributes = - getBlockAttributes( previousRootClientId ); - - if ( - Object.keys( rootAttributes ).every( - ( key ) => - rootAttributes[ key ] === - previousRootAttributes[ key ] - ) - ) { - registry.batch( () => { - moveBlocksToPosition( - getBlockOrder( rootClientId ), - rootClientId, - previousRootClientId - ); - removeBlock( rootClientId, false ); - } ); - return; - } - } - - moveFirstItemUp( rootClientId ); - } else { - removeBlock( clientId ); - } - } - }, - onReplace( blocks, indexToSelect, initialPosition ) { - if ( - blocks.length && - ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] ) - ) { - __unstableMarkLastChangeAsPersistent(); - } - //Unsynced patterns are nested in an array so we need to flatten them. - const replacementBlocks = - blocks?.length === 1 && Array.isArray( blocks[ 0 ] ) - ? blocks[ 0 ] - : blocks; - replaceBlocks( - [ ownProps.clientId ], - replacementBlocks, - indexToSelect, - initialPosition - ); - }, - toggleSelection( selectionEnabled ) { - toggleSelection( selectionEnabled ); - }, + setAttributes: ( newAttributes ) => + d.setAttributesEdit( clientId, newAttributes ), + onInsertBlocks: ( blocks, index ) => + d.insertBlocks( blocks, index, rootClientId ), + onInsertBlocksAfter: ( blocks ) => + d.insertBlocksAfterEdit( blocks, clientId, rootClientId ), + onMerge: ( forward ) => d.mergeEdit( clientId, rootClientId, forward ), + onReplace: ( blocks, indexToSelect, initialPos ) => + d.replaceEdit( clientId, blocks, indexToSelect, initialPos ), + toggleSelection: ( selectionEnabled ) => + d.toggleSelection( selectionEnabled ), }; } ); diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 411ae62d4eee12..b4117050f9628f 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -176,7 +176,7 @@ describe( 'Basic rendering', () => { await user.type( searchInput, 'Hello' ); // Wait for the spinner SVG icon to be rendered. - expect( await screen.findByRole( 'presentation' ) ).toBeVisible(); + expect( await screen.findByRole( 'status' ) ).toBeVisible(); // Check the suggestions list is not rendered yet. expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument(); @@ -190,7 +190,7 @@ describe( 'Basic rendering', () => { // Check the suggestions list is rendered. expect( resultsList ).toBeVisible(); // Check the spinner SVG icon is not rendered any longer. - expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument(); + expect( screen.queryByRole( 'status' ) ).not.toBeInTheDocument(); const searchResultElements = within( resultsList ).getAllByRole( 'option' ); @@ -455,14 +455,14 @@ describe( 'Searching for a link', () => { // Simulate searching for a term. await user.type( searchInput, searchTerm ); - expect( await screen.findByRole( 'presentation' ) ).toBeVisible(); + expect( await screen.findByRole( 'status' ) ).toBeVisible(); expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument(); // make the search suggestions fetch return a response resolver( fauxEntitySuggestions ); expect( await screen.findByRole( 'listbox' ) ).toBeVisible(); - expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument(); + expect( screen.queryByRole( 'status' ) ).not.toBeInTheDocument(); } ); it.each( [ 'With spaces', 'Uppercase', 'lowercase' ] )( diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 3d1725c54fe715..645553a8e124f1 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -89,6 +89,8 @@ export function RichTextWrapper( tagName = 'div', value: adjustedValue = '', onChange: adjustedOnChange, + clientId: originalClientId, + blockName: originalBlockName, isSelected: originalIsSelected, multiline, inlineToolbar, @@ -116,20 +118,18 @@ export function RichTextWrapper( forwardedRef ) { props = removeNativeProps( props ); - - const anchorRef = useRef(); const context = useBlockEditContext(); - const { clientId, isSelected: isBlockSelected, name: blockName } = context; - const blockBindings = context[ blockBindingsKey ]; + const clientId = originalClientId ?? context.clientId; + const blockName = originalBlockName ?? context.blockName; + const selector = ( select ) => { - // Avoid subscribing to the block editor store if the block is not - // selected. - if ( ! isBlockSelected ) { + const { isBlockSelected, getSelectionStart, getSelectionEnd } = + select( blockEditorStore ); + + if ( ! isBlockSelected( clientId ) ) { return { isSelected: false }; } - const { getSelectionStart, getSelectionEnd } = - select( blockEditorStore ); const selectionStart = getSelectionStart(); const selectionEnd = getSelectionEnd(); @@ -140,8 +140,9 @@ export function RichTextWrapper( selectionStart.clientId === clientId && selectionEnd.clientId === clientId && selectionStart.attributeKey === identifier; - } else if ( originalIsSelected ) { - isSelected = selectionStart.clientId === clientId; + } else { + isSelected = + originalIsSelected && selectionStart.clientId === clientId; } return { @@ -154,9 +155,9 @@ export function RichTextWrapper( clientId, identifier, originalIsSelected, - isBlockSelected, ] ); + const blockBindings = context[ blockBindingsKey ]; const disableBoundBlocks = useSelect( ( select ) => { // Disable Rich Text editing if block bindings specify that. @@ -333,11 +334,61 @@ export function RichTextWrapper( const keyboardShortcuts = useRef( new Set() ); const inputEvents = useRef( new Set() ); + const anchorRef = useRef(); function onFocus() { anchorRef.current?.focus(); } + const textRef = useMergeRefs( [ + // Rich text ref must be first because its focus listener + // must be set up before any other ref calls .focus() on + // mount. + richTextRef, + forwardedRef, + autocompleteProps.ref, + props.ref, + useBeforeInputRules( { value, onChange } ), + useInputRules( { + getValue, + onChange, + __unstableAllowPrefixTransformations, + formatTypes, + onReplace, + selectionChange, + } ), + useInsertReplacementText(), + useRemoveBrowserShortcuts(), + useShortcuts( keyboardShortcuts ), + useInputEvents( inputEvents ), + useUndoAutomaticChange(), + usePasteHandler( { + isSelected, + disableFormats, + onChange, + value, + formatTypes, + tagName, + onReplace, + onSplit, + __unstableEmbedURLOnPaste, + pastePlainText, + } ), + useDelete( { value, onMerge, onRemove } ), + useEnter( { + removeEditorOnlyFormats, + value, + onReplace, + onSplit, + onChange, + disableLineBreaks, + onSplitAtEnd, + onSplitAtDoubleLineEnd, + } ), + useFirefoxCompat(), + anchorRef, + ] ); + const TagName = tagName; return ( <> @@ -373,58 +424,7 @@ export function RichTextWrapper( aria-readonly={ shouldDisableEditing } { ...props } { ...autocompleteProps } - ref={ useMergeRefs( [ - // Rich text ref must be first because its focus listener - // must be set up before any other ref calls .focus() on - // mount. - richTextRef, - forwardedRef, - autocompleteProps.ref, - props.ref, - useBeforeInputRules( { value, onChange } ), - useInputRules( { - getValue, - onChange, - __unstableAllowPrefixTransformations, - formatTypes, - onReplace, - selectionChange, - } ), - useInsertReplacementText(), - useRemoveBrowserShortcuts(), - useShortcuts( keyboardShortcuts ), - useInputEvents( inputEvents ), - useUndoAutomaticChange(), - usePasteHandler( { - isSelected, - disableFormats, - onChange, - value, - formatTypes, - tagName, - onReplace, - onSplit, - __unstableEmbedURLOnPaste, - pastePlainText, - } ), - useDelete( { - value, - onMerge, - onRemove, - } ), - useEnter( { - removeEditorOnlyFormats, - value, - onReplace, - onSplit, - onChange, - disableLineBreaks, - onSplitAtEnd, - onSplitAtDoubleLineEnd, - } ), - useFirefoxCompat(), - anchorRef, - ] ) } + ref={ textRef } contentEditable={ ! shouldDisableEditing } suppressContentEditableWarning className={ classnames( diff --git a/packages/block-editor/src/components/rich-text/use-input-rules.js b/packages/block-editor/src/components/rich-text/use-input-rules.js index ff871eb9363234..b4c2c133c84ea5 100644 --- a/packages/block-editor/src/components/rich-text/use-input-rules.js +++ b/packages/block-editor/src/components/rich-text/use-input-rules.js @@ -3,7 +3,7 @@ */ import { useRef } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; -import { insert, toHTMLString } from '@wordpress/rich-text'; +import { remove, toHTMLString } from '@wordpress/rich-text'; import { getBlockTransforms, findTransform } from '@wordpress/blocks'; import { useDispatch } from '@wordpress/data'; @@ -21,92 +21,95 @@ function findSelection( blocks ) { let i = blocks.length; while ( i-- ) { - const attributeKey = retrieveSelectedAttribute( - blocks[ i ].attributes - ); + const block = blocks[ i ]; + const attributeKey = retrieveSelectedAttribute( block.attributes ); if ( attributeKey ) { - blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[ - attributeKey - ] - // To do: refactor this to use rich text's selection instead, so - // we no longer have to use on this hack inserting a special - // character. - .toString() - .replace( START_OF_SELECTED_AREA, '' ); - return [ blocks[ i ].clientId, attributeKey, 0, 0 ]; + return [ block, attributeKey ]; } - const nestedSelection = findSelection( blocks[ i ].innerBlocks ); + const nestedSelection = findSelection( block.innerBlocks ); if ( nestedSelection ) { return nestedSelection; } } - return []; + return null; } -export function useInputRules( props ) { - const { - __unstableMarkLastChangeAsPersistent, - __unstableMarkAutomaticChange, - } = useDispatch( blockEditorStore ); - const propsRef = useRef( props ); - propsRef.current = props; - return useRefEffect( ( element ) => { - function inputRule() { - const { getValue, onReplace, selectionChange } = propsRef.current; +function findPrefixTransform( prefixText ) { + const prefixTransforms = getBlockTransforms( 'from' ).filter( + ( t ) => t.type === 'prefix' + ); + return findTransform( prefixTransforms, ( t ) => t.prefix === prefixText ); +} - if ( ! onReplace ) { - return; - } +function inputRule( props, onReplace ) { + const { getValue, selectionChange } = props; - // We must use getValue() here because value may be update - // asynchronously. - const value = getValue(); - const { start, text } = value; - const characterBefore = text.slice( start - 1, start ); + // We must use getValue() here because value may be update + // asynchronously. + const value = getValue(); + const { start, text } = value; + const characterBefore = text.slice( start - 1, start ); - // The character right before the caret must be a plain space. - if ( characterBefore !== ' ' ) { - return; - } + // The character right before the caret must be a plain space. + if ( characterBefore !== ' ' ) { + return; + } - const trimmedTextBefore = text.slice( 0, start ).trim(); - const prefixTransforms = getBlockTransforms( 'from' ).filter( - ( { type } ) => type === 'prefix' - ); - const transformation = findTransform( - prefixTransforms, - ( { prefix } ) => { - return trimmedTextBefore === prefix; - } + const trimmedTextBefore = text.slice( 0, start ).trim(); + const transformation = findPrefixTransform( trimmedTextBefore ); + if ( ! transformation ) { + return; + } + + const block = transformation.transform( START_OF_SELECTED_AREA ); + const selection = findSelection( [ block ] ); + if ( selection ) { + const [ selectedBlock, selectedAttribute ] = selection; + // To do: refactor this to use rich text's selection instead, so + // we no longer have to use on this hack inserting a special + // character. + const newValue = selectedBlock.attributes[ selectedAttribute ] + .toString() + .replace( + START_OF_SELECTED_AREA, + toHTMLString( { value: remove( value, 0, start ) } ) ); - if ( ! transformation ) { - return; - } + selectedBlock.attributes[ selectedAttribute ] = newValue; + selectionChange( + selectedBlock.clientId, + selectedAttribute, + newValue.length, + newValue.length + ); + } + onReplace( [ block ] ); - const content = toHTMLString( { - value: insert( value, START_OF_SELECTED_AREA, 0, start ), - } ); - const block = transformation.transform( content ); + return true; +} - selectionChange( ...findSelection( [ block ] ) ); - onReplace( [ block ] ); - __unstableMarkAutomaticChange(); +export function useInputRules( props ) { + const { + __unstableMarkLastChangeAsPersistent, + __unstableMarkAutomaticChange, + } = useDispatch( blockEditorStore ); - return true; - } + const propsRef = useRef( props ); + propsRef.current = props; + return useRefEffect( ( element ) => { function onInput( event ) { const { inputType, type } = event; const { getValue, onChange, - __unstableAllowPrefixTransformations, + onReplace, formatTypes, + __unstableAllowPrefixTransformations, } = propsRef.current; // Only run input rules when inserting text. @@ -114,18 +117,25 @@ export function useInputRules( props ) { return; } - if ( __unstableAllowPrefixTransformations && inputRule() ) { + if ( + onReplace && + __unstableAllowPrefixTransformations && + inputRule( propsRef.current, ( blocks ) => { + onReplace( blocks ); + __unstableMarkAutomaticChange(); + } ) + ) { return; } const value = getValue(); const transformed = formatTypes.reduce( - ( accumlator, { __unstableInputRule } ) => { + ( accumulator, { __unstableInputRule } ) => { if ( __unstableInputRule ) { - accumlator = __unstableInputRule( accumlator ); + return __unstableInputRule( accumulator ); } - return accumlator; + return accumulator; }, preventEventDiscovery( value ) ); diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 36efe3dcf409b5..b1c07bfbe674ed 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -28,7 +28,9 @@ import contentLockUI from './content-lock-ui'; import './metadata'; import blockHooks from './block-hooks'; import blockRenaming from './block-renaming'; -import './use-bindings-attributes'; +import init from './use-bindings-attributes'; + +// init(); createBlockEditFilter( [ diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js index 5cd8cb46b3b7e7..7c401d90b4f2bb 100644 --- a/packages/block-editor/src/hooks/use-bindings-attributes.js +++ b/packages/block-editor/src/hooks/use-bindings-attributes.js @@ -257,8 +257,10 @@ function shimAttributeSource( settings, name ) { }; } -addFilter( - 'blocks.registerBlockType', - 'core/editor/custom-sources-backwards-compatibility/shim-attribute-source', - shimAttributeSource -); +export default function init() { + addFilter( + 'blocks.registerBlockType', + 'core/editor/custom-sources-backwards-compatibility/shim-attribute-source', + shimAttributeSource + ); +} diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js index d402d45657704c..968476cbba0fd3 100644 --- a/packages/block-editor/src/store/private-actions.js +++ b/packages/block-editor/src/store/private-actions.js @@ -1,6 +1,12 @@ /** * WordPress dependencies */ +import { + getDefaultBlockName, + switchToBlockType, + isUnmodifiedDefaultBlock, + isUnmodifiedBlock, +} from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; /** @@ -376,3 +382,223 @@ export function stopDragging() { type: 'STOP_DRAGGING', }; } + +export function setAttributesEdit( clientId, newAttributes ) { + return ( { select, dispatch } ) => { + const multiSelectedBlockClientIds = + select.getMultiSelectedBlockClientIds(); + const clientIds = multiSelectedBlockClientIds.length + ? multiSelectedBlockClientIds + : [ clientId ]; + + dispatch.updateBlockAttributes( clientIds, newAttributes ); + }; +} + +export function insertBlocksAfterEdit( blocks, clientId, rootClientId ) { + return ( { select, dispatch } ) => { + const index = select.getBlockIndex( clientId ); + dispatch.insertBlocks( blocks, index + 1, rootClientId ); + }; +} + +function moveFirstItemUp( clientId, changeSelection = true ) { + return ( { registry, select, dispatch } ) => { + const { + getBlock, + getBlockName, + getBlockOrder, + getBlockIndex, + getBlockRootClientId, + canInsertBlockType, + } = select; + + const blockOrder = getBlockOrder( clientId ); + const [ firstClientId ] = blockOrder; + + if ( + blockOrder.length === 1 && + isUnmodifiedBlock( getBlock( firstClientId ) ) + ) { + dispatch.removeBlock( clientId ); + return; + } + + registry.batch( () => { + const targetRootClientId = getBlockRootClientId( clientId ); + if ( + canInsertBlockType( + getBlockName( firstClientId ), + targetRootClientId + ) + ) { + dispatch.moveBlocksToPosition( + [ firstClientId ], + clientId, + targetRootClientId, + getBlockIndex( clientId ) + ); + } else { + const replacement = switchToBlockType( + getBlock( firstClientId ), + getDefaultBlockName() + ); + + if ( replacement && replacement.length ) { + dispatch.insertBlocks( + replacement, + getBlockIndex( clientId ), + targetRootClientId, + changeSelection + ); + dispatch.removeBlock( firstClientId, false ); + } + } + + if ( + ! getBlockOrder( clientId ).length && + isUnmodifiedBlock( getBlock( clientId ) ) + ) { + dispatch.removeBlock( clientId, false ); + } + } ); + }; +} + +export function mergeEdit( clientId, rootClientId, forward ) { + return ( { registry, select, dispatch } ) => { + const { + getPreviousBlockClientId, + getNextBlockClientId, + getBlockAttributes, + getBlockName, + getBlockOrder, + } = select; + + // For `Delete` or forward merge, we should do the exact same thing + // as `Backspace`, but from the other block. + if ( forward ) { + if ( rootClientId ) { + const nextRootClientId = getNextBlockClientId( rootClientId ); + + if ( nextRootClientId ) { + // If there is a block that follows with the same parent + // block name and the same attributes, merge the inner + // blocks. + if ( + getBlockName( rootClientId ) === + getBlockName( nextRootClientId ) + ) { + const rootAttributes = + getBlockAttributes( rootClientId ); + const previousRootAttributes = + getBlockAttributes( nextRootClientId ); + + if ( + Object.keys( rootAttributes ).every( + ( key ) => + rootAttributes[ key ] === + previousRootAttributes[ key ] + ) + ) { + registry.batch( () => { + dispatch.moveBlocksToPosition( + getBlockOrder( nextRootClientId ), + nextRootClientId, + rootClientId + ); + dispatch.removeBlock( nextRootClientId, false ); + } ); + return; + } + } else { + dispatch.mergeBlocks( rootClientId, nextRootClientId ); + return; + } + } + } + + const nextBlockClientId = getNextBlockClientId( clientId ); + + if ( ! nextBlockClientId ) { + return; + } + + if ( getBlockOrder( nextBlockClientId ).length ) { + dispatch( moveFirstItemUp( nextBlockClientId, false ) ); + } else { + dispatch.mergeBlocks( clientId, nextBlockClientId ); + } + } else { + const previousBlockClientId = getPreviousBlockClientId( clientId ); + + if ( previousBlockClientId ) { + dispatch.mergeBlocks( previousBlockClientId, clientId ); + } else if ( rootClientId ) { + const previousRootClientId = + getPreviousBlockClientId( rootClientId ); + + // If there is a preceding block with the same parent block + // name and the same attributes, merge the inner blocks. + if ( + previousRootClientId && + getBlockName( rootClientId ) === + getBlockName( previousRootClientId ) + ) { + const rootAttributes = getBlockAttributes( rootClientId ); + const previousRootAttributes = + getBlockAttributes( previousRootClientId ); + + if ( + Object.keys( rootAttributes ).every( + ( key ) => + rootAttributes[ key ] === + previousRootAttributes[ key ] + ) + ) { + registry.batch( () => { + dispatch.moveBlocksToPosition( + getBlockOrder( rootClientId ), + rootClientId, + previousRootClientId + ); + dispatch.removeBlock( rootClientId, false ); + } ); + return; + } + } + + dispatch( moveFirstItemUp( rootClientId ) ); + } else { + dispatch.removeBlock( clientId ); + } + } + }; +} + +export function replaceEdit( + clientId, + blocks, + indexToSelect, + initialPosition +) { + return ( { dispatch } ) => { + if ( + blocks.length && + ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] ) + ) { + dispatch.__unstableMarkLastChangeAsPersistent(); + } + //Unsynced patterns are nested in an array so we need to flatten them. + const replacementBlocks = + blocks?.length === 1 && Array.isArray( blocks[ 0 ] ) + ? blocks[ 0 ] + : blocks; + dispatch.replaceBlocks( + [ clientId ], + replacementBlocks, + indexToSelect, + initialPosition + ); + }; +} diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 751a19a1c2a8c2..64efca4e06e89e 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -329,16 +329,13 @@ const withBlockTree = // If there are no replaced blocks, it means we're removing blocks so we need to update their parent. const parentsOfRemovedBlocks = []; for ( const clientId of action.clientIds ) { + const parentId = state.parents.get( clientId ); if ( - state.parents.get( clientId ) !== undefined && - ( state.parents.get( clientId ) === '' || - newState.byClientId.get( - state.parents.get( clientId ) - ) ) + parentId !== undefined && + ( parentId === '' || + newState.byClientId.get( parentId ) ) ) { - parentsOfRemovedBlocks.push( - state.parents.get( clientId ) - ); + parentsOfRemovedBlocks.push( parentId ); } } updateParentInnerBlocksInTree( @@ -351,16 +348,13 @@ const withBlockTree = case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN': const parentsOfRemovedBlocks = []; for ( const clientId of action.clientIds ) { + const parentId = state.parents.get( clientId ); if ( - state.parents.get( clientId ) !== undefined && - ( state.parents.get( clientId ) === '' || - newState.byClientId.get( - state.parents.get( clientId ) - ) ) + parentId !== undefined && + ( parentId === '' || + newState.byClientId.get( parentId ) ) ) { - parentsOfRemovedBlocks.push( - state.parents.get( clientId ) - ); + parentsOfRemovedBlocks.push( parentId ); } } newState.tree = new Map( newState.tree ); @@ -1342,14 +1336,14 @@ function selectionHelper( state = {}, action ) { if ( ! action.clientIds || ! action.clientIds.length || - action.clientIds.indexOf( state.clientId ) === -1 + ! action.clientIds.includes( state.clientId ) ) { return state; } return {}; case 'REPLACE_BLOCKS': { - if ( action.clientIds.indexOf( state.clientId ) === -1 ) { + if ( ! action.clientIds.includes( state.clientId ) ) { return state; } @@ -1372,6 +1366,20 @@ function selectionHelper( state = {}, action ) { return state; } +function selectionEqual( sel1, sel2 ) { + if ( sel1 === sel2 ) { + return true; + } + if ( ! sel1 || ! sel2 ) { + return false; + } + return ( + sel1.clientId === sel2.clientId && + sel1.attributeKey === sel2.attributeKey && + sel1.offset === sel2.offset + ); +} + /** * Reducer returning the selection state. * @@ -1381,33 +1389,30 @@ function selectionHelper( state = {}, action ) { * @return {boolean} Updated state. */ export function selection( state = {}, action ) { + let { selectionStart, selectionEnd } = state; + switch ( action.type ) { case 'SELECTION_CHANGE': if ( action.clientId ) { - return { - selectionStart: { - clientId: action.clientId, - attributeKey: action.attributeKey, - offset: action.startOffset, - }, - selectionEnd: { - clientId: action.clientId, - attributeKey: action.attributeKey, - offset: action.endOffset, - }, + selectionStart = { + clientId: action.clientId, + attributeKey: action.attributeKey, + offset: action.startOffset, + }; + selectionEnd = { + clientId: action.clientId, + attributeKey: action.attributeKey, + offset: action.endOffset, }; + } else { + selectionStart = action.start || selectionStart; + selectionEnd = action.end || selectionEnd; } - - return { - selectionStart: action.start || state.selectionStart, - selectionEnd: action.end || state.selectionEnd, - }; + break; case 'RESET_SELECTION': - const { selectionStart, selectionEnd } = action; - return { - selectionStart, - selectionEnd, - }; + selectionStart = action.selectionStart; + selectionEnd = action.selectionEnd; + break; case 'MULTI_SELECT': const { start, end } = action; @@ -1418,10 +1423,9 @@ export function selection( state = {}, action ) { return state; } - return { - selectionStart: { clientId: start }, - selectionEnd: { clientId: end }, - }; + selectionStart = { clientId: start }; + selectionEnd = { clientId: end }; + break; case 'RESET_BLOCKS': const startClientId = state?.selectionStart?.clientId; const endClientId = state?.selectionEnd?.clientId; @@ -1437,31 +1441,26 @@ export function selection( state = {}, action ) { ( block ) => block.clientId === startClientId ) ) { - return { - selectionStart: {}, - selectionEnd: {}, - }; + selectionStart = {}; + selectionEnd = {}; } - // If the end of the selection won't exist after reset, collapse selection. - if ( + else if ( ! action.blocks.some( ( block ) => block.clientId === endClientId ) ) { - return { - ...state, - selectionEnd: state.selectionStart, - }; + selectionEnd = selectionStart; } + break; + default: + selectionStart = selectionHelper( state.selectionStart, action ); + selectionEnd = selectionHelper( state.selectionEnd, action ); } - const selectionStart = selectionHelper( state.selectionStart, action ); - const selectionEnd = selectionHelper( state.selectionEnd, action ); - if ( - selectionStart === state.selectionStart && - selectionEnd === state.selectionEnd + selectionEqual( selectionStart, state.selectionStart ) && + selectionEqual( selectionEnd, state.selectionEnd ) ) { return state; } @@ -1703,36 +1702,42 @@ export function settings( state = SETTINGS_DEFAULTS, action ) { export function preferences( state = PREFERENCES_DEFAULTS, action ) { switch ( action.type ) { case 'INSERT_BLOCKS': - case 'REPLACE_BLOCKS': - return action.blocks.reduce( ( prevState, block ) => { - const { attributes, name: blockName } = block; - let id = blockName; - // If a block variation match is found change the name to be the same with the - // one that is used for block variations in the Inserter (`getItemFromVariation`). - const match = select( blocksStore ).getActiveBlockVariation( - blockName, - attributes - ); - if ( match?.name ) { - id += '/' + match.name; - } - if ( blockName === 'core/block' ) { - id += '/' + attributes.ref; - } + case 'REPLACE_BLOCKS': { + const nextInsertUsage = action.blocks.reduce( + ( prevUsage, block ) => { + const { attributes, name: blockName } = block; + let id = blockName; + // If a block variation match is found change the name to be the same with the + // one that is used for block variations in the Inserter (`getItemFromVariation`). + const match = select( blocksStore ).getActiveBlockVariation( + blockName, + attributes + ); + if ( match?.name ) { + id += '/' + match.name; + } + if ( blockName === 'core/block' ) { + id += '/' + attributes.ref; + } - return { - ...prevState, - insertUsage: { - ...prevState.insertUsage, + return { + ...prevUsage, [ id ]: { time: action.time, - count: prevState.insertUsage[ id ] - ? prevState.insertUsage[ id ].count + 1 + count: prevUsage[ id ] + ? prevUsage[ id ].count + 1 : 1, }, - }, - }; - }, state ); + }; + }, + state.insertUsage + ); + + return { + ...state, + insertUsage: nextInsertUsage, + }; + } } return state; @@ -1905,13 +1910,10 @@ export function lastBlockInserted( state = {}, action ) { return state; } - const clientIds = action.blocks.map( ( block ) => { - return block.clientId; - } ); - - const source = action.meta?.source; - - return { clientIds, source }; + return { + clientIds: action.blocks.map( ( block ) => block.clientId ), + source: action.meta?.source, + }; case 'RESET_BLOCKS': return {}; } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 8f2e5e4e5ccc80..6fb6d4cc12aef5 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1565,9 +1565,9 @@ const canInsertBlockTypeUnmemoized = ( // The parent block doesn't have settings indicating it doesn't support // inner blocks, return false. - if ( rootClientId && parentBlockListSettings === undefined ) { - return false; - } + // if ( rootClientId && parentBlockListSettings === undefined ) { + // return false; + // } const parentName = getBlockName( state, rootClientId ); const parentBlockType = getBlockType( parentName ); @@ -1862,7 +1862,7 @@ const getItemFromVariation = ( state, item ) => ( variation ) => { ...item.initialAttributes, ...variation.attributes, }, - innerBlocks: variation.innerBlocks, + innerBlocks: variation.innerBlocks || item.template, keywords: variation.keywords || item.keywords, frecency: calculateFrecency( time, count ), }; @@ -1944,6 +1944,7 @@ const buildBlockTypeItem = keywords: blockType.keywords, variations: inserterVariations, example: blockType.example, + template: blockType.template, utility: 1, // Deprecated. }; }; diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 6af35aff730155..c5f409a66a6f66 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -1,3 +1,4 @@ +const BLOCK_PLACEHOLDER = '.block-placeholder'; const BLOCK_SELECTOR = '.block-editor-block-list__block'; const APPENDER_SELECTOR = '.block-list-appender'; const BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender'; @@ -26,7 +27,12 @@ export function isInSameBlock( a, b ) { */ export function isInsideRootBlock( blockElement, element ) { const parentBlock = element.closest( - [ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' ) + [ + BLOCK_PLACEHOLDER, + BLOCK_SELECTOR, + APPENDER_SELECTOR, + BLOCK_APPENDER_CLASS, + ].join( ',' ) ); return parentBlock === blockElement; } diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index 40844eb9cb7d7a..1a579f1e10809b 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -8,7 +8,6 @@ import { archive as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "archives/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index aa1bba1c341d2f..3f37ccdcf3b5a2 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -8,7 +8,7 @@ import { audio as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -27,7 +27,7 @@ export const settings = { }, transforms, deprecated, - edit, + lazyEdit: () => import( /* webpackChunkName: "audio/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js index d318450aec3903..62de9d77e3cb94 100644 --- a/packages/block-library/src/avatar/index.js +++ b/packages/block-library/src/avatar/index.js @@ -8,14 +8,13 @@ import { commentAuthorAvatar as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => import( /* webpackChunkName: "avatar/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js index 7f1fa7bdab3494..a2d3ee89e3f757 100644 --- a/packages/block-library/src/block/index.js +++ b/packages/block-library/src/block/index.js @@ -11,7 +11,6 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import deprecated from './deprecated'; const { name } = metadata; @@ -20,7 +19,7 @@ export { metadata, name }; export const settings = { deprecated, - edit, + lazyEdit: () => import( /* webpackChunkName: "block/editor" */ './edit' ), icon, __experimentalLabel: ( { ref } ) => { if ( ! ref ) { diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 2b05b280028abd..a3d5670b51137d 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -9,7 +9,7 @@ import { button as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -25,7 +25,7 @@ export const settings = { text: __( 'Call to Action' ), }, }, - edit, + lazyEdit: () => import( /* webpackChunkName: "button/editor" */ './edit' ), save, deprecated, merge: ( a, { text = '' } ) => ( { diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 810922fbcb839b..aa19e5eca0311e 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -10,7 +10,7 @@ import { buttons as icon } from '@wordpress/icons'; import initBlock from '../utils/init-block'; import deprecated from './deprecated'; import transforms from './transforms'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -34,7 +34,7 @@ export const settings = { }, deprecated, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "buttons/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js index 7fff20826e2719..09763ce3b49449 100644 --- a/packages/block-library/src/calendar/index.js +++ b/packages/block-library/src/calendar/index.js @@ -8,7 +8,7 @@ import { calendar as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import transforms from './transforms'; const { name } = metadata; @@ -18,7 +18,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "calendar/editor" */ './edit' ), transforms, }; diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index 8cdcad450862a2..b59c61d9d2ae74 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -8,7 +8,6 @@ import { category as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "categories/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index c602045256d6e9..9885c05730eb87 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -8,7 +8,6 @@ import { code as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -35,7 +34,7 @@ export const settings = { }; }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "code/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index 687b8c180b1f50..01a38f50799bff 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -8,7 +8,7 @@ import { column as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -18,7 +18,7 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => import( /* webpackChunkName: "column/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 45f7bd70e61ffd..a999800b8390cc 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -9,7 +9,7 @@ import { columns as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import variations from './variations'; @@ -80,7 +80,7 @@ export const settings = { ], }, deprecated, - edit, + lazyEdit: () => import( /* webpackChunkName: "columns/editor" */ './edit' ), save, transforms, }; diff --git a/packages/block-library/src/comment-author-avatar/index.js b/packages/block-library/src/comment-author-avatar/index.js index d318450aec3903..caff08add2fbb8 100644 --- a/packages/block-library/src/comment-author-avatar/index.js +++ b/packages/block-library/src/comment-author-avatar/index.js @@ -8,14 +8,16 @@ import { commentAuthorAvatar as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "comment-author-avatar/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js index 4d85bbebe047be..ccf59e432288d6 100644 --- a/packages/block-library/src/comment-author-name/index.js +++ b/packages/block-library/src/comment-author-name/index.js @@ -8,7 +8,7 @@ import { commentAuthorName as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import deprecated from './deprecated'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-author-name/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js index 130f1d30125559..84788791308670 100644 --- a/packages/block-library/src/comment-content/index.js +++ b/packages/block-library/src/comment-content/index.js @@ -8,14 +8,14 @@ import { commentContent as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-content/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js index fddae539acfa34..4b667c2a070869 100644 --- a/packages/block-library/src/comment-date/index.js +++ b/packages/block-library/src/comment-date/index.js @@ -8,7 +8,7 @@ import { postDate as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import deprecated from './deprecated'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-date/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/comment-edit-link/index.js b/packages/block-library/src/comment-edit-link/index.js index 6639dda86a7a40..3d5224df678a64 100644 --- a/packages/block-library/src/comment-edit-link/index.js +++ b/packages/block-library/src/comment-edit-link/index.js @@ -8,14 +8,14 @@ import { commentEditLink as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-edit-link/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comment-reply-link/index.js b/packages/block-library/src/comment-reply-link/index.js index c04f8ce7b1bba5..73b300ec3cd2ee 100644 --- a/packages/block-library/src/comment-reply-link/index.js +++ b/packages/block-library/src/comment-reply-link/index.js @@ -8,13 +8,13 @@ import { commentReplyLink as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-reply-link/editor" */ './edit' ), icon, }; diff --git a/packages/block-library/src/comment-template/index.js b/packages/block-library/src/comment-template/index.js index afc295cad4c126..d2ffe76c2c85b3 100644 --- a/packages/block-library/src/comment-template/index.js +++ b/packages/block-library/src/comment-template/index.js @@ -8,7 +8,7 @@ import { layout as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comment-template/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/comments-pagination-next/index.js b/packages/block-library/src/comments-pagination-next/index.js index 2df0e8da6aa99d..ba141486263ef7 100644 --- a/packages/block-library/src/comments-pagination-next/index.js +++ b/packages/block-library/src/comments-pagination-next/index.js @@ -8,14 +8,16 @@ import { queryPaginationNext as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "comments-pagination-next/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js index 3fd903e2d9ef48..770300744b85ca 100644 --- a/packages/block-library/src/comments-pagination-numbers/index.js +++ b/packages/block-library/src/comments-pagination-numbers/index.js @@ -8,14 +8,16 @@ import { queryPaginationNumbers as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "comments-pagination-numbers/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comments-pagination-previous/index.js b/packages/block-library/src/comments-pagination-previous/index.js index 80e555ccc79d9b..f7919d629100d6 100644 --- a/packages/block-library/src/comments-pagination-previous/index.js +++ b/packages/block-library/src/comments-pagination-previous/index.js @@ -8,14 +8,16 @@ import { queryPaginationPrevious as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "comments-pagination-previous/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comments-pagination/index.js b/packages/block-library/src/comments-pagination/index.js index 3d9bc853db140c..ccf8eddac8d58a 100644 --- a/packages/block-library/src/comments-pagination/index.js +++ b/packages/block-library/src/comments-pagination/index.js @@ -8,7 +8,7 @@ import { queryPagination as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comments-pagination/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js index 86bdab0dbccbff..847cfd8d649775 100644 --- a/packages/block-library/src/comments-title/index.js +++ b/packages/block-library/src/comments-title/index.js @@ -8,7 +8,6 @@ import { title as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import deprecated from './deprecated'; const { name } = metadata; @@ -16,7 +15,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comments-title/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 21db8b986d6e5e..b5444159646890 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -9,7 +9,7 @@ import { postComments as icon } from '@wordpress/icons'; import initBlock from '../utils/init-block'; import metadata from './block.json'; import deprecated from './deprecated'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "comments/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index e6797a3b51dbe4..4641864d3775af 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -9,7 +9,6 @@ import { cover as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -47,7 +46,7 @@ export const settings = { }, transforms, save, - edit, + lazyEdit: () => import( /* webpackChunkName: "cover/editor" */ './edit' ), deprecated, variations, }; diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js index e30d1a8e04974f..8c802b6d919da9 100644 --- a/packages/block-library/src/details/index.js +++ b/packages/block-library/src/details/index.js @@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import save from './save'; const { name } = metadata; @@ -34,7 +33,7 @@ export const settings = { ], }, save, - edit, + lazyEdit: () => import( /* webpackChunkName: "details/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 065cf9665fa9b0..fcd204c2a1a8b2 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -2,7 +2,6 @@ * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import save from './save'; import metadata from './block.json'; import transforms from './transforms'; @@ -15,7 +14,7 @@ export { metadata, name }; export const settings = { icon: embedContentIcon, - edit, + lazyEdit: () => import( /* webpackChunkName: "embed/editor" */ './edit' ), save, transforms, variations, diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index 46b9691ea88a7a..6b76c0ac6daf44 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -9,7 +9,6 @@ import { file as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -28,7 +27,7 @@ export const settings = { }, transforms, deprecated, - edit, + lazyEdit: () => import( /* webpackChunkName: "file/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/footnotes/index.js b/packages/block-library/src/footnotes/index.js index c5e851af7e033f..06830434111c0f 100644 --- a/packages/block-library/src/footnotes/index.js +++ b/packages/block-library/src/footnotes/index.js @@ -8,7 +8,6 @@ import { registerFormatType } from '@wordpress/rich-text'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import metadata from './block.json'; import { formatName, format } from './format'; @@ -18,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "footnotes/editor" */ './edit' ), }; registerFormatType( formatName, format ); diff --git a/packages/block-library/src/form-input/index.js b/packages/block-library/src/form-input/index.js index 8e0548a6b24dbf..6830e292a23b5b 100644 --- a/packages/block-library/src/form-input/index.js +++ b/packages/block-library/src/form-input/index.js @@ -3,7 +3,6 @@ */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import variations from './variations'; @@ -14,7 +13,8 @@ export { metadata, name }; export const settings = { deprecated, - edit, + lazyEdit: () => + import( /* webpackChunkName: "form-input/editor" */ './edit' ), save, variations, }; diff --git a/packages/block-library/src/form-submission-notification/index.js b/packages/block-library/src/form-submission-notification/index.js index 67c359374eec1c..77dbe1a961409b 100644 --- a/packages/block-library/src/form-submission-notification/index.js +++ b/packages/block-library/src/form-submission-notification/index.js @@ -7,7 +7,7 @@ import { group as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import variations from './variations'; @@ -18,7 +18,10 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "form-submission-notification/editor" */ './edit' + ), save, variations, }; diff --git a/packages/block-library/src/form-submit-button/index.js b/packages/block-library/src/form-submit-button/index.js index 4c60b5f5c20639..1f5a4ecbfc9e43 100644 --- a/packages/block-library/src/form-submit-button/index.js +++ b/packages/block-library/src/form-submit-button/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -11,7 +11,8 @@ const { name } = metadata; export { metadata, name }; export const settings = { - edit, + lazyEdit: () => + import( /* webpackChunkName: "form-submit-button/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/form/index.js b/packages/block-library/src/form/index.js index 1e45c642b6d48e..3bb5c1d9c985f4 100644 --- a/packages/block-library/src/form/index.js +++ b/packages/block-library/src/form/index.js @@ -2,7 +2,6 @@ * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import variations from './variations'; @@ -17,7 +16,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - edit, + lazyEdit: () => import( /* webpackChunkName: "form/editor" */ './edit' ), save, variations, }; diff --git a/packages/block-library/src/freeform/index.js b/packages/block-library/src/freeform/index.js index e94a459487b898..5f1d1642c0d39f 100644 --- a/packages/block-library/src/freeform/index.js +++ b/packages/block-library/src/freeform/index.js @@ -7,7 +7,7 @@ import { classic as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "freeform/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index f865072526098b..dd46e5144d8fe3 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -8,7 +8,6 @@ import { gallery as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit-wrapper'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -39,7 +38,8 @@ export const settings = { ], }, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "gallery/editor" */ './edit-wrapper' ), save, deprecated, }; diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index 2d06f1a965c521..24230b25d13ba6 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -9,7 +9,7 @@ import { group as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -82,7 +82,7 @@ export const settings = { ], }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "group/editor" */ './edit' ), save, deprecated, variations, diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 3752ca70bc7142..0e5293ec170ff2 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -9,7 +9,7 @@ import { __, sprintf } from '@wordpress/i18n'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -61,7 +61,7 @@ export const settings = { ( attributesToMerge.content || '' ), }; }, - edit, + lazyEdit: () => import( /* webpackChunkName: "heading/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/home-link/index.js b/packages/block-library/src/home-link/index.js index 71d62dcd8c44e5..b92f94a56cebe6 100644 --- a/packages/block-library/src/home-link/index.js +++ b/packages/block-library/src/home-link/index.js @@ -9,7 +9,6 @@ import { home } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import save from './save'; const { name } = metadata; @@ -18,11 +17,9 @@ export { metadata, name }; export const settings = { icon: home, - - edit, - + lazyEdit: () => + import( /* webpackChunkName: "home-link/editor" */ './edit' ), save, - example: { attributes: { label: _x( 'Home Link', 'block example' ), diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js index cd25f25126a61d..ef2d91607eec97 100644 --- a/packages/block-library/src/html/index.js +++ b/packages/block-library/src/html/index.js @@ -8,7 +8,7 @@ import { html as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -27,7 +27,7 @@ export const settings = { '', }, }, - edit, + lazyEdit: () => import( /* webpackChunkName: "html/editor" */ './edit' ), save, transforms, }; diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index af7e518f49864a..8deae27529c49e 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -744,6 +744,7 @@ export default function Image( { { onImageError() } onLoad={ ( event ) => { setLoadedNaturalSize( { diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 68625bd77cc873..5f8033cdf68da9 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -9,7 +9,6 @@ import { image as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -57,7 +56,7 @@ export const settings = { }; }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "image/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/latest-comments/index.js b/packages/block-library/src/latest-comments/index.js index 5c2bab45638df7..63da6d60d58b30 100644 --- a/packages/block-library/src/latest-comments/index.js +++ b/packages/block-library/src/latest-comments/index.js @@ -8,7 +8,6 @@ import { comment as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "latest-comments/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/latest-posts/index.js b/packages/block-library/src/latest-posts/index.js index 5ea877488d72a7..b64ea1cd2e00cf 100644 --- a/packages/block-library/src/latest-posts/index.js +++ b/packages/block-library/src/latest-posts/index.js @@ -8,7 +8,7 @@ import { postList as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; const { name } = metadata; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "latest-posts/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/list-item/index.js b/packages/block-library/src/list-item/index.js index 07c5bb7fda9015..41b1ecfdf311fd 100644 --- a/packages/block-library/src/list-item/index.js +++ b/packages/block-library/src/list-item/index.js @@ -9,7 +9,7 @@ import { privateApis } from '@wordpress/block-editor'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; @@ -20,7 +20,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "list-item/editor" */ './edit' ), save, merge( attributes, attributesToMerge ) { return { diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js index dc0f31822680a5..1ef477f6dd52c3 100644 --- a/packages/block-library/src/list/index.js +++ b/packages/block-library/src/list/index.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -44,8 +44,9 @@ const settings = { }, ], }, + template: [ [ 'core/list-item' ] ], transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "list/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/loginout/index.js b/packages/block-library/src/loginout/index.js index 65c611621fd623..acbcdee1cf8b13 100644 --- a/packages/block-library/src/loginout/index.js +++ b/packages/block-library/src/loginout/index.js @@ -7,7 +7,7 @@ import { login as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; const { name } = metadata; @@ -15,7 +15,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "loginout/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js index 373050cb77fd56..698a9f4a70fd89 100644 --- a/packages/block-library/src/media-text/index.js +++ b/packages/block-library/src/media-text/index.js @@ -9,7 +9,7 @@ import { mediaAndText as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -45,7 +45,8 @@ export const settings = { ], }, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "media-text/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js index 766381156eb34f..ed07422ec039f3 100644 --- a/packages/block-library/src/missing/index.js +++ b/packages/block-library/src/missing/index.js @@ -7,7 +7,7 @@ import { getBlockType } from '@wordpress/blocks'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -32,7 +32,7 @@ export const settings = { return ''; } }, - edit, + lazyEdit: () => import( /* webpackChunkName: "missing/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js index b40bb2123bc727..438395833b6d70 100644 --- a/packages/block-library/src/more/index.js +++ b/packages/block-library/src/more/index.js @@ -7,7 +7,7 @@ import { more as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -31,7 +31,7 @@ export const settings = { } }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "more/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index 3d1f0207ff955a..e30c11c4dbee2f 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -11,7 +11,7 @@ import { addFilter } from '@wordpress/hooks'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; import { enhanceNavigationLinkVariations } from './hooks'; import transforms from './transforms'; @@ -32,8 +32,8 @@ export const settings = { }; }, - edit, - + lazyEdit: () => + import( /* webpackChunkName: "navigation-link/editor" */ './edit' ), save, example: { diff --git a/packages/block-library/src/navigation-submenu/index.js b/packages/block-library/src/navigation-submenu/index.js index 69e97fb85325a5..3dac0e2bc518b3 100644 --- a/packages/block-library/src/navigation-submenu/index.js +++ b/packages/block-library/src/navigation-submenu/index.js @@ -8,7 +8,6 @@ import { page, addSubmenu } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import save from './save'; import transforms from './transforms'; @@ -36,7 +35,8 @@ export const settings = { return label; }, - edit, + lazyEdit: () => + import( /* webpackChunkName: "navigation-submenu/editor" */ './edit' ), save, transforms, }; diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js index d0405be794ffe8..998df0489c9fe9 100644 --- a/packages/block-library/src/navigation/index.js +++ b/packages/block-library/src/navigation/index.js @@ -9,7 +9,6 @@ import { navigation as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import save from './save'; import deprecated from './deprecated'; @@ -50,7 +49,7 @@ export const settings = { }, ], }, - edit, + lazyEdit: () => import( /* webpackChunkName: "cover/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js index 5f425e7e952c62..8bd19f270d0e71 100644 --- a/packages/block-library/src/nextpage/index.js +++ b/packages/block-library/src/nextpage/index.js @@ -7,7 +7,7 @@ import { pageBreak as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -20,7 +20,8 @@ export const settings = { icon, example: {}, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "nextpage/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/page-list-item/index.js b/packages/block-library/src/page-list-item/index.js index 6d1db7282af898..919174802a9bfc 100644 --- a/packages/block-library/src/page-list-item/index.js +++ b/packages/block-library/src/page-list-item/index.js @@ -8,7 +8,6 @@ import { page as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit.js'; const { name } = metadata; @@ -18,7 +17,8 @@ export const settings = { __experimentalLabel: ( { label } ) => label, icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "page-list-item/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/page-list/index.js b/packages/block-library/src/page-list/index.js index 4a128e7da58a8d..361088fdbe828a 100644 --- a/packages/block-library/src/page-list/index.js +++ b/packages/block-library/src/page-list/index.js @@ -8,7 +8,6 @@ import { pages } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit.js'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon: pages, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "page-list/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 715fb35ec05ab1..d3595234964519 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -9,8 +9,8 @@ import { paragraph as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; +import edit from './edit'; import save from './save'; import transforms from './transforms'; @@ -53,6 +53,8 @@ export const settings = { }; }, edit, + // lazyEdit: () => + // import( /* webpackChunkName: "paragraph/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js index e4af712da8bb29..60e44074e91170 100644 --- a/packages/block-library/src/pattern/index.js +++ b/packages/block-library/src/pattern/index.js @@ -3,13 +3,12 @@ */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import PatternEdit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { - edit: PatternEdit, + lazyEdit: () => import( /* webpackChunkName: "pattern/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-author-biography/index.js b/packages/block-library/src/post-author-biography/index.js index 8c91b99f7f6f59..dd705f16c299cf 100644 --- a/packages/block-library/src/post-author-biography/index.js +++ b/packages/block-library/src/post-author-biography/index.js @@ -8,14 +8,16 @@ import { postAuthor as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "post-author-biography/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-author-name/index.js b/packages/block-library/src/post-author-name/index.js index dce3e48c86f636..fe593fe2b227c1 100644 --- a/packages/block-library/src/post-author-name/index.js +++ b/packages/block-library/src/post-author-name/index.js @@ -8,7 +8,7 @@ import { postAuthor as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import transforms from './transforms'; const { name } = metadata; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-author-name/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-author/index.js b/packages/block-library/src/post-author/index.js index 8c91b99f7f6f59..f0500f3560fd7d 100644 --- a/packages/block-library/src/post-author/index.js +++ b/packages/block-library/src/post-author/index.js @@ -8,14 +8,14 @@ import { postAuthor as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-author/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-comment/index.js b/packages/block-library/src/post-comment/index.js index 2fca916307a791..7bd4201cb015e0 100644 --- a/packages/block-library/src/post-comment/index.js +++ b/packages/block-library/src/post-comment/index.js @@ -8,7 +8,7 @@ import { comment as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-comment/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/post-comments-count/index.js b/packages/block-library/src/post-comments-count/index.js index 1d2525ddf2d9eb..9b47a80a19042a 100644 --- a/packages/block-library/src/post-comments-count/index.js +++ b/packages/block-library/src/post-comments-count/index.js @@ -8,14 +8,14 @@ import { postCommentsCount as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-comments-count/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-comments-form/index.js b/packages/block-library/src/post-comments-form/index.js index 4d0444194241de..de99dbebaec0b2 100644 --- a/packages/block-library/src/post-comments-form/index.js +++ b/packages/block-library/src/post-comments-form/index.js @@ -8,14 +8,14 @@ import { postCommentsForm as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-comments-form/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-comments-link/index.js b/packages/block-library/src/post-comments-link/index.js index 36e9673a08a1d2..2b29f25dc88a92 100644 --- a/packages/block-library/src/post-comments-link/index.js +++ b/packages/block-library/src/post-comments-link/index.js @@ -8,13 +8,13 @@ import { postCommentsCount as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-comments-link/editor" */ './edit' ), icon, }; diff --git a/packages/block-library/src/post-content/index.js b/packages/block-library/src/post-content/index.js index 80196db27878bc..cff13b0ab96e76 100644 --- a/packages/block-library/src/post-content/index.js +++ b/packages/block-library/src/post-content/index.js @@ -8,14 +8,14 @@ import { postContent as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-content/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-date/index.js b/packages/block-library/src/post-date/index.js index 232b715c3795b6..1c4e945d3e4490 100644 --- a/packages/block-library/src/post-date/index.js +++ b/packages/block-library/src/post-date/index.js @@ -8,7 +8,7 @@ import { postDate as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import deprecated from './deprecated'; import variations from './variations'; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-date/editor" */ './edit' ), deprecated, variations, }; diff --git a/packages/block-library/src/post-excerpt/index.js b/packages/block-library/src/post-excerpt/index.js index 41b868965eec57..7f000748c6fbde 100644 --- a/packages/block-library/src/post-excerpt/index.js +++ b/packages/block-library/src/post-excerpt/index.js @@ -8,7 +8,7 @@ import { postExcerpt as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import transforms from './transforms'; const { name } = metadata; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-excerpt/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-featured-image/index.js b/packages/block-library/src/post-featured-image/index.js index aa28444114fb36..b293cb1bafa853 100644 --- a/packages/block-library/src/post-featured-image/index.js +++ b/packages/block-library/src/post-featured-image/index.js @@ -8,14 +8,14 @@ import { postFeaturedImage as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-featured-image/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-navigation-link/index.js b/packages/block-library/src/post-navigation-link/index.js index e85e594990adba..d89ec12b067032 100644 --- a/packages/block-library/src/post-navigation-link/index.js +++ b/packages/block-library/src/post-navigation-link/index.js @@ -3,14 +3,17 @@ */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import variations from './variations'; const { name } = metadata; export { metadata, name }; export const settings = { - edit, + lazyEdit: () => + import( + /* webpackChunkName: "post-navigation-link/editor" */ './edit' + ), variations, }; diff --git a/packages/block-library/src/post-template/index.js b/packages/block-library/src/post-template/index.js index bc6f8ffa13ab60..54d4be87ed08a0 100644 --- a/packages/block-library/src/post-template/index.js +++ b/packages/block-library/src/post-template/index.js @@ -8,7 +8,7 @@ import { layout } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon: layout, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-template/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/post-terms/index.js b/packages/block-library/src/post-terms/index.js index 3a00f04b77fd21..647976b21a3119 100644 --- a/packages/block-library/src/post-terms/index.js +++ b/packages/block-library/src/post-terms/index.js @@ -9,7 +9,7 @@ import { addFilter } from '@wordpress/hooks'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import enhanceVariations from './hooks'; const { name } = metadata; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-terms/editor" */ './edit' ), }; export const init = () => { diff --git a/packages/block-library/src/post-time-to-read/index.js b/packages/block-library/src/post-time-to-read/index.js index 95b379f55f0b3f..63f84018ee2824 100644 --- a/packages/block-library/src/post-time-to-read/index.js +++ b/packages/block-library/src/post-time-to-read/index.js @@ -3,7 +3,7 @@ */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import icon from './icon'; const { name } = metadata; @@ -11,7 +11,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-time-to-read/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-title/index.js b/packages/block-library/src/post-title/index.js index 86bdab0dbccbff..29e62455265207 100644 --- a/packages/block-library/src/post-title/index.js +++ b/packages/block-library/src/post-title/index.js @@ -8,7 +8,7 @@ import { title as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import deprecated from './deprecated'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "post-title/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js index a2e1fecc185528..1aa928ff64c925 100644 --- a/packages/block-library/src/preformatted/index.js +++ b/packages/block-library/src/preformatted/index.js @@ -8,7 +8,7 @@ import { preformatted as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -30,7 +30,8 @@ export const settings = { }, }, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "preformatted/editor" */ './edit' ), save, merge( attributes, attributesToMerge ) { return { diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 9d2b42f7698ab5..c6b8511ed8c073 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -9,7 +9,7 @@ import { pullquote as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -31,7 +31,8 @@ export const settings = { }, }, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "pullquote/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/query-no-results/index.js b/packages/block-library/src/query-no-results/index.js index 1c56638cdfdba8..b29cdf8ac9f545 100644 --- a/packages/block-library/src/query-no-results/index.js +++ b/packages/block-library/src/query-no-results/index.js @@ -8,7 +8,7 @@ import { loop as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; const { name } = metadata; @@ -16,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "query-no-results/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/query-pagination-next/index.js b/packages/block-library/src/query-pagination-next/index.js index 2df0e8da6aa99d..a341be4469209f 100644 --- a/packages/block-library/src/query-pagination-next/index.js +++ b/packages/block-library/src/query-pagination-next/index.js @@ -8,14 +8,16 @@ import { queryPaginationNext as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "query-pagination-next/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js index 3fd903e2d9ef48..ec6a2e3d8de2e3 100644 --- a/packages/block-library/src/query-pagination-numbers/index.js +++ b/packages/block-library/src/query-pagination-numbers/index.js @@ -8,14 +8,16 @@ import { queryPaginationNumbers as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "query-pagination-numbers/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/query-pagination-previous/index.js b/packages/block-library/src/query-pagination-previous/index.js index 80e555ccc79d9b..6b7bbf9255c930 100644 --- a/packages/block-library/src/query-pagination-previous/index.js +++ b/packages/block-library/src/query-pagination-previous/index.js @@ -8,14 +8,16 @@ import { queryPaginationPrevious as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( + /* webpackChunkName: "query-pagination-previous/editor" */ './edit' + ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js index b113a8384b043b..493d503e1a1d36 100644 --- a/packages/block-library/src/query-pagination/index.js +++ b/packages/block-library/src/query-pagination/index.js @@ -8,7 +8,7 @@ import { queryPagination as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; import deprecated from './deprecated'; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "query-pagination/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/query-title/index.js b/packages/block-library/src/query-title/index.js index 875c2b8b865041..83ea4fc4adcc03 100644 --- a/packages/block-library/src/query-title/index.js +++ b/packages/block-library/src/query-title/index.js @@ -8,7 +8,7 @@ import { title as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import variations from './variations'; import deprecated from './deprecated'; @@ -17,7 +17,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "query-title/editor" */ './edit' ), variations, deprecated, }; diff --git a/packages/block-library/src/query/index.js b/packages/block-library/src/query/index.js index 8d82391923603e..d3281e3afeb2a5 100644 --- a/packages/block-library/src/query/index.js +++ b/packages/block-library/src/query/index.js @@ -8,7 +8,7 @@ import { loop as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import save from './save'; import variations from './variations'; import deprecated from './deprecated'; @@ -18,7 +18,7 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => import( /* webpackChunkName: "query/editor" */ './edit' ), save, variations, deprecated, diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index 4689899c6a91e8..a801459432ffaa 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -78,11 +78,17 @@ export default function QuoteEdit( { useMigrateOnLoad( attributes, clientId ); - const hasSelection = useSelect( ( select ) => { - const { isBlockSelected, hasSelectedInnerBlock } = - select( blockEditorStore ); - return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId ); - }, [] ); + const hasSelection = useSelect( + ( select ) => { + const { isBlockSelected, hasSelectedInnerBlock } = + select( blockEditorStore ); + return ( + hasSelectedInnerBlock( clientId, true ) || + isBlockSelected( clientId ) + ); + }, + [ clientId ] + ); const blockProps = useBlockProps( { className: classNames( className, { diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index d67685f3561b01..f92054836aabae 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -9,7 +9,6 @@ import { quote as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -34,7 +33,7 @@ export const settings = { ], }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "quote/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/read-more/index.js b/packages/block-library/src/read-more/index.js index 497cd77f429e62..bc9659962f79d0 100644 --- a/packages/block-library/src/read-more/index.js +++ b/packages/block-library/src/read-more/index.js @@ -8,14 +8,14 @@ import { link as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "read-more/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/rss/index.js b/packages/block-library/src/rss/index.js index 439d14c4edcdd6..baac7a6d54b911 100644 --- a/packages/block-library/src/rss/index.js +++ b/packages/block-library/src/rss/index.js @@ -8,7 +8,6 @@ import { rss as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; @@ -21,7 +20,7 @@ export const settings = { feedURL: 'https://wordpress.org', }, }, - edit, + lazyEdit: () => import( /* webpackChunkName: "rss/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js index 85770a23268cba..82dca7c5485fe2 100644 --- a/packages/block-library/src/search/index.js +++ b/packages/block-library/src/search/index.js @@ -9,7 +9,7 @@ import { search as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import variations from './variations'; const { name } = metadata; @@ -23,7 +23,7 @@ export const settings = { viewportWidth: 400, }, variations, - edit, + lazyEdit: () => import( /* webpackChunkName: "search/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js index 712caef7751463..ddbd8837c93025 100644 --- a/packages/block-library/src/separator/index.js +++ b/packages/block-library/src/separator/index.js @@ -7,7 +7,7 @@ import { separator as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -26,7 +26,8 @@ export const settings = { }, }, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "separator/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/shortcode/index.js b/packages/block-library/src/shortcode/index.js index 6fe36bdbfb3d3f..29cc1ec8d3a5a8 100644 --- a/packages/block-library/src/shortcode/index.js +++ b/packages/block-library/src/shortcode/index.js @@ -7,7 +7,6 @@ import { shortcode as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import save from './save'; import transforms from './transforms'; import metadata from './block.json'; @@ -19,7 +18,8 @@ export { metadata, name }; export const settings = { icon, transforms, - edit, + lazyEdit: () => + import( /* webpackChunkName: "shortcode/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js index fc10df08e17dee..655424eed71e02 100644 --- a/packages/block-library/src/site-logo/index.js +++ b/packages/block-library/src/site-logo/index.js @@ -8,7 +8,6 @@ import { siteLogo as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import transforms from './transforms'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "site-logo/editor" */ './edit' ), transforms, }; diff --git a/packages/block-library/src/site-tagline/index.js b/packages/block-library/src/site-tagline/index.js index 1d0090f9dcea19..6f8ccf9cecabce 100644 --- a/packages/block-library/src/site-tagline/index.js +++ b/packages/block-library/src/site-tagline/index.js @@ -3,7 +3,6 @@ */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import icon from './icon'; import deprecated from './deprecated'; @@ -12,7 +11,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "site-tagline/editor" */ './edit' ), deprecated, }; diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js index 87934888ce4380..d832d8323783fa 100644 --- a/packages/block-library/src/site-title/index.js +++ b/packages/block-library/src/site-title/index.js @@ -8,7 +8,7 @@ import { mapMarker as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import deprecated from './deprecated'; import transforms from './transforms'; @@ -18,7 +18,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "site-title/editor" */ './edit' ), transforms, deprecated, }; diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js index 161e6f2697acca..e00105a386d34f 100644 --- a/packages/block-library/src/social-link/index.js +++ b/packages/block-library/src/social-link/index.js @@ -7,7 +7,6 @@ import { share as icon } from '@wordpress/icons'; * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import metadata from './block.json'; import variations from './variations'; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "social-link/editor" */ './edit' ), variations, }; diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js index 601a8c63ec5399..9b0e039e4133f2 100644 --- a/packages/block-library/src/social-links/index.js +++ b/packages/block-library/src/social-links/index.js @@ -8,7 +8,6 @@ import { share as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -43,7 +42,8 @@ export const settings = { ], }, icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "social-links/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js index d77c51bc96cea2..a5c987c4497ffd 100644 --- a/packages/block-library/src/spacer/index.js +++ b/packages/block-library/src/spacer/index.js @@ -8,7 +8,7 @@ import { resizeCornerNE as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; @@ -18,7 +18,7 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => import( /* webpackChunkName: "spacer/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/table-of-contents/index.js b/packages/block-library/src/table-of-contents/index.js index 408538a7dcadbd..610ecfa2e6ba75 100644 --- a/packages/block-library/src/table-of-contents/index.js +++ b/packages/block-library/src/table-of-contents/index.js @@ -8,7 +8,6 @@ import { tableOfContents as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; import save from './save'; const { name } = metadata; @@ -17,7 +16,8 @@ export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "table-of-contents/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index dea09dd7c98298..82de376d095794 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -9,7 +9,6 @@ import { blockTable as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -94,7 +93,7 @@ export const settings = { viewportWidth: 450, }, transforms, - edit, + lazyEdit: () => import( /* webpackChunkName: "table/editor" */ './edit' ), save, deprecated, }; diff --git a/packages/block-library/src/tag-cloud/index.js b/packages/block-library/src/tag-cloud/index.js index 6dc0931663fcd7..1e32c621b419a7 100644 --- a/packages/block-library/src/tag-cloud/index.js +++ b/packages/block-library/src/tag-cloud/index.js @@ -9,7 +9,6 @@ import { tag as icon } from '@wordpress/icons'; import initBlock from '../utils/init-block'; import transforms from './transforms'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; @@ -18,7 +17,8 @@ export { metadata, name }; export const settings = { icon, example: {}, - edit, + lazyEdit: () => + import( /* webpackChunkName: "tag-cloud/editor" */ './edit' ), transforms, }; diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js index 20976e231d811c..05b8a1cfe3aafe 100644 --- a/packages/block-library/src/template-part/index.js +++ b/packages/block-library/src/template-part/index.js @@ -17,7 +17,7 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; + import { enhanceTemplatePartVariations } from './variations'; const { name } = metadata; @@ -47,7 +47,8 @@ export const settings = { decodeEntities( entity.title ) || capitalCase( entity.slug || '' ) ); }, - edit, + lazyEdit: () => + import( /* webpackChunkName: "template-part/editor" */ './edit' ), }; export const init = () => { diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js index 0ff710a91f5d50..26d2005edb875c 100644 --- a/packages/block-library/src/term-description/index.js +++ b/packages/block-library/src/term-description/index.js @@ -8,14 +8,14 @@ import { termDescription as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import metadata from './block.json'; -import edit from './edit'; const { name } = metadata; export { metadata, name }; export const settings = { icon, - edit, + lazyEdit: () => + import( /* webpackChunkName: "term-description/editor" */ './edit' ), }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/text-columns/index.js b/packages/block-library/src/text-columns/index.js index c0bce35b96f4ef..33527132b644d3 100644 --- a/packages/block-library/src/text-columns/index.js +++ b/packages/block-library/src/text-columns/index.js @@ -2,7 +2,6 @@ * Internal dependencies */ import initBlock from '../utils/init-block'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -19,7 +18,8 @@ export const settings = { return { 'data-align': width }; } }, - edit, + lazyEdit: () => + import( /* webpackChunkName: "text-columns/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index 5d80b63a4ca84c..ff7a6cfe2665f3 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -9,7 +9,6 @@ import { verse as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -37,7 +36,7 @@ export const settings = { content: attributes.content + '\n\n' + attributesToMerge.content, }; }, - edit, + lazyEdit: () => import( /* webpackChunkName: "verse/editor" */ './edit' ), save, }; diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index 57201ef7125658..6576ea84cf909b 100644 --- a/packages/block-library/src/video/index.js +++ b/packages/block-library/src/video/index.js @@ -9,7 +9,7 @@ import { video as icon } from '@wordpress/icons'; */ import initBlock from '../utils/init-block'; import deprecated from './deprecated'; -import edit from './edit'; + import metadata from './block.json'; import save from './save'; import transforms from './transforms'; @@ -29,7 +29,7 @@ export const settings = { }, transforms, deprecated, - edit, + lazyEdit: () => import( /* webpackChunkName: "video/editor" */ './edit' ), save, }; diff --git a/packages/blocks/README.md b/packages/blocks/README.md index 8e6fdc9d900dbb..b8c4d1660544ad 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -126,6 +126,10 @@ _Returns_ - `string`: The block's default class. +### getBlockEdit + +Undocumented declaration. + ### getBlockFromExample Create a block object from the example API. @@ -402,6 +406,10 @@ _Returns_ - `boolean`: True if the parameter is a valid icon and false otherwise. +### lazyLoadBlock + +Undocumented declaration. + ### normalizeIconObject Function that receives an icon as set by the blocks during the registration and returns a new icon object that is normalized so we can rely on just on possible icon structure in the codebase. diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index aa72979818c9c7..1a9884d401d3ab 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -145,6 +145,8 @@ export { getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel, __experimentalSanitizeBlockAttributes, __experimentalGetBlockAttributesNamesByRole, + getBlockEdit, + lazyLoadBlock, } from './utils'; // Templates are, in a general sense, a basic collection of block nodes with any diff --git a/packages/blocks/src/api/templates.js b/packages/blocks/src/api/templates.js index bc76218892688a..e470ac2a5c3edb 100644 --- a/packages/blocks/src/api/templates.js +++ b/packages/blocks/src/api/templates.js @@ -31,6 +31,41 @@ export function doBlocksMatchTemplate( blocks = [], template = [] ) { ); } +const isHTMLAttribute = ( attributeDefinition ) => + attributeDefinition?.source === 'html'; +const isQueryAttribute = ( attributeDefinition ) => + attributeDefinition?.source === 'query'; + +const normalizeAttributes = ( schema, values ) => { + if ( ! values ) { + return {}; + } + + return Object.fromEntries( + Object.entries( values ).map( ( [ key, value ] ) => [ + key, + normalizeAttribute( schema[ key ], value ), + ] ) + ); +}; + +const normalizeAttribute = ( definition, value ) => { + if ( isHTMLAttribute( definition ) && Array.isArray( value ) ) { + // Introduce a deprecated call at this point + // When we're confident that "children" format should be removed from the templates. + + return renderToString( value ); + } + + if ( isQueryAttribute( definition ) && value ) { + return value.map( ( subValues ) => { + return normalizeAttributes( definition.query, subValues ); + } ); + } + + return value; +}; + /** * Synchronize a block list with a block template. * @@ -67,42 +102,6 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) { // before creating the blocks. const blockType = getBlockType( name ); - const isHTMLAttribute = ( attributeDefinition ) => - attributeDefinition?.source === 'html'; - const isQueryAttribute = ( attributeDefinition ) => - attributeDefinition?.source === 'query'; - - const normalizeAttributes = ( schema, values ) => { - if ( ! values ) { - return {}; - } - - return Object.fromEntries( - Object.entries( values ).map( ( [ key, value ] ) => [ - key, - normalizeAttribute( schema[ key ], value ), - ] ) - ); - }; - const normalizeAttribute = ( definition, value ) => { - if ( isHTMLAttribute( definition ) && Array.isArray( value ) ) { - // Introduce a deprecated call at this point - // When we're confident that "children" format should be removed from the templates. - - return renderToString( value ); - } - - if ( isQueryAttribute( definition ) && value ) { - return value.map( ( subValues ) => { - return normalizeAttributes( - definition.query, - subValues - ); - } ); - } - - return value; - }; const normalizedAttributes = normalizeAttributes( blockType?.attributes ?? {}, diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js index 0d17836faea7eb..266539215880de 100644 --- a/packages/blocks/src/api/utils.js +++ b/packages/blocks/src/api/utils.js @@ -8,7 +8,7 @@ import a11yPlugin from 'colord/plugins/a11y'; /** * WordPress dependencies */ -import { Component, isValidElement } from '@wordpress/element'; +import { Component, Suspense, lazy, isValidElement } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { RichTextData } from '@wordpress/rich-text'; @@ -352,3 +352,60 @@ export function omit( object, keys ) { Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) ) ); } + +export function lazyEdit( cb ) { + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const Load = lazy( () => + cb().then( + ( i ) => new Promise( ( r ) => setTimeout( () => r( i ), 2000 ) ) + ) + ); + + return function Edit( props ) { + const { FallbackEdit, clientId } = props; + return ( + }> + + + ); + }; +} + +const lazyEditCache = new WeakMap(); + +export function getBlockEdit( blockType ) { + if ( ! blockType ) { + return null; + } + + if ( blockType.lazyEdit ) { + let edit = lazyEditCache.get( blockType.lazyEdit ); + if ( ! edit ) { + edit = lazyEdit( blockType.lazyEdit ); + lazyEditCache.set( blockType.lazyEdit, edit ); + } + return edit; + } + + return blockType.edit || blockType.save || null; +} + +function* getBlockNames( block ) { + yield block.name; + if ( ! block.innerBlocks ) { + return; + } + for ( const innerBlock of block.innerBlocks ) { + yield* getBlockNames( innerBlock ); + } +} + +export function lazyLoadBlock( block ) { + const blockNames = Array.from( new Set( getBlockNames( block ) ) ); + return Promise.all( + blockNames.map( ( blockName ) => { + const blockType = getBlockType( blockName ); + return blockType.lazyEdit?.(); + } ) + ); +} diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx index 9864819fa3d97f..af059557af39a6 100644 --- a/packages/components/src/spinner/index.tsx +++ b/packages/components/src/spinner/index.tsx @@ -26,7 +26,7 @@ export function UnforwardedSpinner( width="16" height="16" xmlns="http://www.w3.org/2000/svg" - role="presentation" + role="status" focusable="false" { ...props } ref={ forwardedRef } diff --git a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts index a0a08ac6f847a9..2a258be33cf6fe 100644 --- a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts +++ b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts @@ -27,7 +27,7 @@ async function insertBlock( ); await this.page.evaluate( - ( [ _blockRepresentation, _clientId ] ) => { + async ( [ _blockRepresentation, _clientId ] ) => { function recursiveCreateBlock( { name, attributes = {}, @@ -43,6 +43,8 @@ async function insertBlock( } const block = recursiveCreateBlock( _blockRepresentation ); + await window.wp.blocks.lazyLoadBlock( block ); + window.wp.data .dispatch( 'core/block-editor' ) .insertBlock( block, undefined, _clientId ); diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index aef3f40f48c614..91883035ed0f46 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -667,7 +667,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1 class="components-spinner emotion-0 emotion-1" focusable="false" height="16" - role="presentation" + role="status" viewBox="0 0 100 100" width="16" xmlns="http://www.w3.org/2000/svg" diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index f62732470d9747..413d162e7982f0 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -35,6 +35,7 @@ test.describe( 'Buttons', () => { .click(); await page.keyboard.type( '/buttons' ); await page.keyboard.press( 'Enter' ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); // Check the content. @@ -143,6 +144,7 @@ test.describe( 'Buttons', () => { pageUtils, } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'WordPress' ); await pageUtils.pressKeys( 'primary+k' ); await page.keyboard.type( 'https://www.wordpress.org/' ); @@ -170,6 +172,7 @@ test.describe( 'Buttons', () => { pageUtils, } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'WordPress' ); await pageUtils.pressKeys( 'primary+k' ); await page.keyboard.type( 'https://www.wordpress.org/' ); @@ -259,6 +262,7 @@ test.describe( 'Buttons', () => { test( 'can resize width', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); await editor.openDocumentSettingsSidebar(); await page.click( @@ -281,6 +285,7 @@ test.describe( 'Buttons', () => { test( 'can apply named colors', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); await editor.openDocumentSettingsSidebar(); @@ -310,6 +315,7 @@ test.describe( 'Buttons', () => { test( 'can apply custom colors', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); await editor.openDocumentSettingsSidebar(); @@ -345,6 +351,7 @@ test.describe( 'Buttons', () => { page, } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); await editor.openDocumentSettingsSidebar(); @@ -374,6 +381,7 @@ test.describe( 'Buttons', () => { page, } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await page.locator( 'role=textbox[name="Button text"i]' ).isVisible(); await page.keyboard.type( 'Content' ); await editor.openDocumentSettingsSidebar(); diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js index ba5af46f69cfd5..3c0d8d02640ca2 100644 --- a/test/e2e/specs/editor/blocks/code.spec.js +++ b/test/e2e/specs/editor/blocks/code.spec.js @@ -17,6 +17,9 @@ test.describe( 'Code', () => { .click(); await page.keyboard.type( '```' ); await page.keyboard.press( 'Enter' ); + + await editor.canvas.locator( 'pre' ).isVisible(); + await page.keyboard.type( ' { test( 'should paste plain text', async ( { editor, pageUtils } ) => { await editor.insertBlock( { name: 'core/code' } ); + await editor.canvas.locator( 'pre' ).isVisible(); // Test to see if HTML and white space is kept. pageUtils.setClipboardData( { plainText: '\n\t
' } ); diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index 10f25d6b3609f0..850dba7449ef62 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -680,7 +680,7 @@ test.describe( 'List (@firefox)', () => { ); } ); - test( 'should be immeadiately saved on indentation', async ( { + test( 'should be immediately saved on indentation', async ( { editor, page, } ) => { diff --git a/test/e2e/specs/editor/blocks/preformatted.spec.js b/test/e2e/specs/editor/blocks/preformatted.spec.js index 5cd20a051c4fb8..295db02993fb88 100644 --- a/test/e2e/specs/editor/blocks/preformatted.spec.js +++ b/test/e2e/specs/editor/blocks/preformatted.spec.js @@ -30,6 +30,7 @@ test.describe( 'Preformatted', () => { page, } ) => { await editor.insertBlock( { name: 'core/preformatted' } ); + await editor.canvas.locator( 'pre' ).isVisible(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); diff --git a/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js b/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js index fdb76a8277a462..82db0b2a106f79 100644 --- a/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js +++ b/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js @@ -15,6 +15,9 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); page, } ) => { await editor.insertBlock( { name: blockName } ); + + await editor.canvas.locator( 'pre' ).isVisible(); + await page.keyboard.type( 'a' ); await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'Enter' ); diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 0a4b8cef574464..6571824ed192e1 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -151,6 +151,12 @@ module.exports = { output: { devtoolNamespace: 'wp', filename: './build/[name]/index.min.js', + chunkFilename: ( { chunk } ) => { + if ( chunk.runtime === 'block-library' ) { + return './build/block-library/blocks/[name].min.js'; + } + return './build/' + chunk.runtime + '/[name].min.js'; + }, path: join( __dirname, '..', '..' ), devtoolModuleFilenameTemplate: ( info ) => { if ( info.resourcePath.includes( '/@wordpress/' ) ) { @@ -164,6 +170,14 @@ module.exports = { performance: { hints: false, // disable warnings about package sizes }, + optimization: { + splitChunks: { + cacheGroups: { + default: false, + defaultVendors: false, + }, + }, + }, plugins: [ ...plugins, new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),