From ea2ee6011ec6739c39454a5cebc14cf48b794d98 Mon Sep 17 00:00:00 2001 From: Marcelo Serpa <81248+fullofcaffeine@users.noreply.github.com> Date: Thu, 14 Dec 2023 12:21:06 -0600 Subject: [PATCH 01/89] (edit-site)(use-init-edited-entity-from-url) Safely access `toString()` on `siteData`'s `page_on_front` (#57035) --- .../sync-state-with-url/use-init-edited-entity-from-url.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js index 46079cbce8efd..7b1321fdf4b8a 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -54,7 +54,10 @@ function useResolveEditedEntityAndContext( { postId, postType } ) { return { hasLoadedAllDependencies: !! base && !! siteData, homepageId: - siteData?.show_on_front === 'page' + siteData?.show_on_front === 'page' && + [ 'number', 'string' ].includes( + typeof siteData.page_on_front + ) ? siteData.page_on_front.toString() : null, url: base?.home, From 30037b55f07c7df725777c6efdb0dca03a4fb6da Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 14 Dec 2023 20:34:52 +0100 Subject: [PATCH 02/89] List: avoid useSelect in block render (#57077) --- packages/block-library/src/list-item/edit.js | 20 ++- .../src/list-item/hooks/use-enter.js | 125 +++++++++--------- .../src/list-item/hooks/use-enter.native.js | 14 +- .../list-item/hooks/use-indent-list-item.js | 96 ++++++-------- .../src/list-item/hooks/use-merge.js | 2 +- .../list-item/hooks/use-outdent-list-item.js | 119 +++++++---------- .../src/list-item/hooks/use-space.js | 11 +- packages/block-library/src/list/edit.js | 62 ++++----- 8 files changed, 218 insertions(+), 231 deletions(-) diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js index 3f26840ad345f..7733a76280752 100644 --- a/packages/block-library/src/list-item/edit.js +++ b/packages/block-library/src/list-item/edit.js @@ -6,6 +6,7 @@ import { useBlockProps, useInnerBlocksProps, BlockControls, + store as blockEditorStore, } from '@wordpress/block-editor'; import { isRTL, __ } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; @@ -16,6 +17,7 @@ import { formatIndent, } from '@wordpress/icons'; import { useMergeRefs } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -32,8 +34,22 @@ import { import { convertToListItems } from './utils'; export function IndentUI( { clientId } ) { - const [ canIndent, indentListItem ] = useIndentListItem( clientId ); - const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId ); + const indentListItem = useIndentListItem( clientId ); + const outdentListItem = useOutdentListItem(); + const { canIndent, canOutdent } = useSelect( + ( select ) => { + const { getBlockIndex, getBlockRootClientId, getBlockName } = + select( blockEditorStore ); + return { + canIndent: getBlockIndex( clientId ) > 0, + canOutdent: + getBlockName( + getBlockRootClientId( getBlockRootClientId( clientId ) ) + ) === 'core/list-item', + }; + }, + [ clientId ] + ); return ( <> diff --git a/packages/block-library/src/list-item/hooks/use-enter.js b/packages/block-library/src/list-item/hooks/use-enter.js index 46fdc65cecdd7..ffe5c55fbbed2 100644 --- a/packages/block-library/src/list-item/hooks/use-enter.js +++ b/packages/block-library/src/list-item/hooks/use-enter.js @@ -19,71 +19,72 @@ import useOutdentListItem from './use-outdent-list-item'; export default function useEnter( props ) { const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore ); - const { getBlock, getBlockRootClientId, getBlockIndex } = + const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } = useSelect( blockEditorStore ); const propsRef = useRef( props ); propsRef.current = props; - const [ canOutdent, outdentListItem ] = useOutdentListItem( - propsRef.current.clientId - ); - return useRefEffect( - ( element ) => { - function onKeyDown( event ) { - if ( event.defaultPrevented || event.keyCode !== ENTER ) { - return; - } - const { content, clientId } = propsRef.current; - if ( content.length ) { - return; - } - event.preventDefault(); - if ( canOutdent ) { - outdentListItem(); - return; - } - // Here we are in top level list so we need to split. - const topParentListBlock = getBlock( - getBlockRootClientId( clientId ) - ); - const blockIndex = getBlockIndex( clientId ); - const head = cloneBlock( { - ...topParentListBlock, - innerBlocks: topParentListBlock.innerBlocks.slice( - 0, - blockIndex - ), - } ); - const middle = createBlock( getDefaultBlockName() ); - // Last list item might contain a `list` block innerBlock - // In that case append remaining innerBlocks blocks. - const after = [ - ...( topParentListBlock.innerBlocks[ blockIndex ] - .innerBlocks[ 0 ]?.innerBlocks || [] ), - ...topParentListBlock.innerBlocks.slice( blockIndex + 1 ), - ]; - const tail = after.length - ? [ - cloneBlock( { - ...topParentListBlock, - innerBlocks: after, - } ), - ] - : []; - replaceBlocks( - topParentListBlock.clientId, - [ head, middle, ...tail ], - 1 - ); - // We manually change the selection here because we are replacing - // a different block than the selected one. - selectionChange( middle.clientId ); + const outdentListItem = useOutdentListItem(); + return useRefEffect( ( element ) => { + function onKeyDown( event ) { + if ( event.defaultPrevented || event.keyCode !== ENTER ) { + return; } + const { content, clientId } = propsRef.current; + if ( content.length ) { + return; + } + event.preventDefault(); + const canOutdent = + getBlockName( + getBlockRootClientId( + getBlockRootClientId( propsRef.current.clientId ) + ) + ) === 'core/list-item'; + if ( canOutdent ) { + outdentListItem(); + return; + } + // Here we are in top level list so we need to split. + const topParentListBlock = getBlock( + getBlockRootClientId( clientId ) + ); + const blockIndex = getBlockIndex( clientId ); + const head = cloneBlock( { + ...topParentListBlock, + innerBlocks: topParentListBlock.innerBlocks.slice( + 0, + blockIndex + ), + } ); + const middle = createBlock( getDefaultBlockName() ); + // Last list item might contain a `list` block innerBlock + // In that case append remaining innerBlocks blocks. + const after = [ + ...( topParentListBlock.innerBlocks[ blockIndex ] + .innerBlocks[ 0 ]?.innerBlocks || [] ), + ...topParentListBlock.innerBlocks.slice( blockIndex + 1 ), + ]; + const tail = after.length + ? [ + cloneBlock( { + ...topParentListBlock, + innerBlocks: after, + } ), + ] + : []; + replaceBlocks( + topParentListBlock.clientId, + [ head, middle, ...tail ], + 1 + ); + // We manually change the selection here because we are replacing + // a different block than the selected one. + selectionChange( middle.clientId ); + } - element.addEventListener( 'keydown', onKeyDown ); - return () => { - element.removeEventListener( 'keydown', onKeyDown ); - }; - }, - [ canOutdent ] - ); + element.addEventListener( 'keydown', onKeyDown ); + return () => { + element.removeEventListener( 'keydown', onKeyDown ); + }; + }, [] ); } diff --git a/packages/block-library/src/list-item/hooks/use-enter.native.js b/packages/block-library/src/list-item/hooks/use-enter.native.js index d3be5f1ea0e1b..596dd469d3132 100644 --- a/packages/block-library/src/list-item/hooks/use-enter.native.js +++ b/packages/block-library/src/list-item/hooks/use-enter.native.js @@ -17,13 +17,11 @@ import useOutdentListItem from './use-outdent-list-item'; export default function useEnter( props, preventDefault ) { const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore ); - const { getBlock, getBlockRootClientId, getBlockIndex } = + const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } = useSelect( blockEditorStore ); const propsRef = useRef( props ); propsRef.current = props; - const [ canOutdent, outdentListItem ] = useOutdentListItem( - propsRef.current.clientId - ); + const outdentListItem = useOutdentListItem(); return { onEnter() { @@ -32,7 +30,13 @@ export default function useEnter( props, preventDefault ) { return; } preventDefault.current = true; - if ( canOutdent ) { + if ( + getBlockName( + getBlockRootClientId( + getBlockRootClientId( propsRef.current.clientId ) + ) + ) === 'core/list-item' + ) { outdentListItem(); return; } diff --git a/packages/block-library/src/list-item/hooks/use-indent-list-item.js b/packages/block-library/src/list-item/hooks/use-indent-list-item.js index b1fd8394be43c..6eb5d9d73ba65 100644 --- a/packages/block-library/src/list-item/hooks/use-indent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-indent-list-item.js @@ -7,10 +7,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { createBlock, cloneBlock } from '@wordpress/blocks'; export default function useIndentListItem( clientId ) { - const canIndent = useSelect( - ( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0, - [ clientId ] - ); const { replaceBlocks, selectionChange, multiSelect } = useDispatch( blockEditorStore ); const { @@ -21,55 +17,49 @@ export default function useIndentListItem( clientId ) { hasMultiSelection, getMultiSelectedBlockClientIds, } = useSelect( blockEditorStore ); - return [ - canIndent, - useCallback( () => { - const _hasMultiSelection = hasMultiSelection(); - const clientIds = _hasMultiSelection - ? getMultiSelectedBlockClientIds() - : [ clientId ]; - const clonedBlocks = clientIds.map( ( _clientId ) => - cloneBlock( getBlock( _clientId ) ) - ); - const previousSiblingId = getPreviousBlockClientId( clientId ); - const newListItem = cloneBlock( getBlock( previousSiblingId ) ); - // If the sibling has no innerBlocks, create a new `list` block. - if ( ! newListItem.innerBlocks?.length ) { - newListItem.innerBlocks = [ createBlock( 'core/list' ) ]; - } - // A list item usually has one `list`, but it's possible to have - // more. So we need to preserve the previous `list` blocks and - // merge the new blocks to the last `list`. - newListItem.innerBlocks[ - newListItem.innerBlocks.length - 1 - ].innerBlocks.push( ...clonedBlocks ); + return useCallback( () => { + const _hasMultiSelection = hasMultiSelection(); + const clientIds = _hasMultiSelection + ? getMultiSelectedBlockClientIds() + : [ clientId ]; + const clonedBlocks = clientIds.map( ( _clientId ) => + cloneBlock( getBlock( _clientId ) ) + ); + const previousSiblingId = getPreviousBlockClientId( clientId ); + const newListItem = cloneBlock( getBlock( previousSiblingId ) ); + // If the sibling has no innerBlocks, create a new `list` block. + if ( ! newListItem.innerBlocks?.length ) { + newListItem.innerBlocks = [ createBlock( 'core/list' ) ]; + } + // A list item usually has one `list`, but it's possible to have + // more. So we need to preserve the previous `list` blocks and + // merge the new blocks to the last `list`. + newListItem.innerBlocks[ + newListItem.innerBlocks.length - 1 + ].innerBlocks.push( ...clonedBlocks ); - // We get the selection start/end here, because when - // we replace blocks, the selection is updated too. - const selectionStart = getSelectionStart(); - const selectionEnd = getSelectionEnd(); - // Replace the previous sibling of the block being indented and the indented blocks, - // with a new block whose attributes are equal to the ones of the previous sibling and - // whose descendants are the children of the previous sibling, followed by the indented blocks. - replaceBlocks( - [ previousSiblingId, ...clientIds ], - [ newListItem ] + // We get the selection start/end here, because when + // we replace blocks, the selection is updated too. + const selectionStart = getSelectionStart(); + const selectionEnd = getSelectionEnd(); + // Replace the previous sibling of the block being indented and the indented blocks, + // with a new block whose attributes are equal to the ones of the previous sibling and + // whose descendants are the children of the previous sibling, followed by the indented blocks. + replaceBlocks( [ previousSiblingId, ...clientIds ], [ newListItem ] ); + if ( ! _hasMultiSelection ) { + selectionChange( + clonedBlocks[ 0 ].clientId, + selectionEnd.attributeKey, + selectionEnd.clientId === selectionStart.clientId + ? selectionStart.offset + : selectionEnd.offset, + selectionEnd.offset + ); + } else { + multiSelect( + clonedBlocks[ 0 ].clientId, + clonedBlocks[ clonedBlocks.length - 1 ].clientId ); - if ( ! _hasMultiSelection ) { - selectionChange( - clonedBlocks[ 0 ].clientId, - selectionEnd.attributeKey, - selectionEnd.clientId === selectionStart.clientId - ? selectionStart.offset - : selectionEnd.offset, - selectionEnd.offset - ); - } else { - multiSelect( - clonedBlocks[ 0 ].clientId, - clonedBlocks[ clonedBlocks.length - 1 ].clientId - ); - } - }, [ clientId ] ), - ]; + } + }, [ clientId ] ); } diff --git a/packages/block-library/src/list-item/hooks/use-merge.js b/packages/block-library/src/list-item/hooks/use-merge.js index cda1f0c02d3a8..2fbee4ba275a1 100644 --- a/packages/block-library/src/list-item/hooks/use-merge.js +++ b/packages/block-library/src/list-item/hooks/use-merge.js @@ -20,7 +20,7 @@ export default function useMerge( clientId, onMerge ) { } = useSelect( blockEditorStore ); const { mergeBlocks, moveBlocksToPosition } = useDispatch( blockEditorStore ); - const [ , outdentListItem ] = useOutdentListItem( clientId ); + const outdentListItem = useOutdentListItem(); function getTrailingId( id ) { const order = getBlockOrder( id ); diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js index 14598dc7451cf..85c433fbeffad 100644 --- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js +++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js @@ -6,24 +6,8 @@ import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { cloneBlock } from '@wordpress/blocks'; -export default function useOutdentListItem( clientId ) { +export default function useOutdentListItem() { const registry = useRegistry(); - const { canOutdent } = useSelect( - ( innerSelect ) => { - const { getBlockRootClientId, getBlockName } = - innerSelect( blockEditorStore ); - const grandParentId = getBlockRootClientId( - getBlockRootClientId( clientId ) - ); - const grandParentName = getBlockName( grandParentId ); - const isListItem = grandParentName === 'core/list-item'; - - return { - canOutdent: isListItem, - }; - }, - [ clientId ] - ); const { moveBlocksToPosition, removeBlock, @@ -48,69 +32,66 @@ export default function useOutdentListItem( clientId ) { return parentListItemId; } - return [ - canOutdent, - useCallback( ( clientIds = getSelectedBlockClientIds() ) => { - if ( ! Array.isArray( clientIds ) ) { - clientIds = [ clientIds ]; - } - - if ( ! clientIds.length ) return; + return useCallback( ( clientIds = getSelectedBlockClientIds() ) => { + if ( ! Array.isArray( clientIds ) ) { + clientIds = [ clientIds ]; + } - const firstClientId = clientIds[ 0 ]; + if ( ! clientIds.length ) return; - // Can't outdent if it's not a list item. - if ( getBlockName( firstClientId ) !== 'core/list-item' ) return; + const firstClientId = clientIds[ 0 ]; - const parentListItemId = getParentListItemId( firstClientId ); + // Can't outdent if it's not a list item. + if ( getBlockName( firstClientId ) !== 'core/list-item' ) return; - // Can't outdent if it's at the top level. - if ( ! parentListItemId ) return; + const parentListItemId = getParentListItemId( firstClientId ); - const parentListId = getBlockRootClientId( firstClientId ); - const lastClientId = clientIds[ clientIds.length - 1 ]; - const order = getBlockOrder( parentListId ); - const followingListItems = order.slice( - getBlockIndex( lastClientId ) + 1 - ); + // Can't outdent if it's at the top level. + if ( ! parentListItemId ) return; - registry.batch( () => { - if ( followingListItems.length ) { - let nestedListId = getBlockOrder( firstClientId )[ 0 ]; + const parentListId = getBlockRootClientId( firstClientId ); + const lastClientId = clientIds[ clientIds.length - 1 ]; + const order = getBlockOrder( parentListId ); + const followingListItems = order.slice( + getBlockIndex( lastClientId ) + 1 + ); - if ( ! nestedListId ) { - const nestedListBlock = cloneBlock( - getBlock( parentListId ), - {}, - [] - ); - nestedListId = nestedListBlock.clientId; - insertBlock( nestedListBlock, 0, firstClientId, false ); - // Immediately update the block list settings, otherwise - // blocks can't be moved here due to canInsert checks. - updateBlockListSettings( - nestedListId, - getBlockListSettings( parentListId ) - ); - } + registry.batch( () => { + if ( followingListItems.length ) { + let nestedListId = getBlockOrder( firstClientId )[ 0 ]; - moveBlocksToPosition( - followingListItems, - parentListId, - nestedListId + if ( ! nestedListId ) { + const nestedListBlock = cloneBlock( + getBlock( parentListId ), + {}, + [] + ); + nestedListId = nestedListBlock.clientId; + insertBlock( nestedListBlock, 0, firstClientId, false ); + // Immediately update the block list settings, otherwise + // blocks can't be moved here due to canInsert checks. + updateBlockListSettings( + nestedListId, + getBlockListSettings( parentListId ) ); } + moveBlocksToPosition( - clientIds, + followingListItems, parentListId, - getBlockRootClientId( parentListItemId ), - getBlockIndex( parentListItemId ) + 1 + nestedListId ); - if ( ! getBlockOrder( parentListId ).length ) { - const shouldSelectParent = false; - removeBlock( parentListId, shouldSelectParent ); - } - } ); - }, [] ), - ]; + } + moveBlocksToPosition( + clientIds, + parentListId, + getBlockRootClientId( parentListItemId ), + getBlockIndex( parentListItemId ) + 1 + ); + if ( ! getBlockOrder( parentListId ).length ) { + const shouldSelectParent = false; + removeBlock( parentListId, shouldSelectParent ); + } + } ); + }, [] ); } diff --git a/packages/block-library/src/list-item/hooks/use-space.js b/packages/block-library/src/list-item/hooks/use-space.js index 6079b2c5edb28..deb6313e4b1b0 100644 --- a/packages/block-library/src/list-item/hooks/use-space.js +++ b/packages/block-library/src/list-item/hooks/use-space.js @@ -12,9 +12,9 @@ import { useSelect } from '@wordpress/data'; import useIndentListItem from './use-indent-list-item'; export default function useSpace( clientId ) { - const { getSelectionStart, getSelectionEnd } = + const { getSelectionStart, getSelectionEnd, getBlockIndex } = useSelect( blockEditorStore ); - const [ canIndent, indentListItem ] = useIndentListItem( clientId ); + const indentListItem = useIndentListItem( clientId ); return useRefEffect( ( element ) => { @@ -23,7 +23,6 @@ export default function useSpace( clientId ) { if ( event.defaultPrevented || - ! canIndent || keyCode !== SPACE || // Only override when no modifiers are pressed. shiftKey || @@ -34,6 +33,10 @@ export default function useSpace( clientId ) { return; } + if ( getBlockIndex( clientId ) === 0 ) { + return; + } + const selectionStart = getSelectionStart(); const selectionEnd = getSelectionEnd(); if ( @@ -50,6 +53,6 @@ export default function useSpace( clientId ) { element.removeEventListener( 'keydown', onKeyDown ); }; }, - [ canIndent, indentListItem ] + [ clientId, indentListItem ] ); } diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index 569e4182b3ea5..e1d29d517a5ff 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -68,48 +68,40 @@ function useMigrateOnLoad( attributes, clientId ) { } function useOutdentList( clientId ) { - const { canOutdent } = useSelect( - ( innerSelect ) => { - const { getBlockRootClientId, getBlock } = - innerSelect( blockEditorStore ); - const parentId = getBlockRootClientId( clientId ); - return { - canOutdent: - !! parentId && - getBlock( parentId ).name === 'core/list-item', - }; - }, - [ clientId ] - ); const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore ); const { getBlockRootClientId, getBlockAttributes, getBlock } = useSelect( blockEditorStore ); - return [ - canOutdent, - useCallback( () => { - const parentBlockId = getBlockRootClientId( clientId ); - const parentBlockAttributes = getBlockAttributes( parentBlockId ); - // Create a new parent block without the inner blocks. - const newParentBlock = createBlock( - 'core/list-item', - parentBlockAttributes - ); - const { innerBlocks } = getBlock( clientId ); - // Replace the parent block with a new parent block without inner blocks, - // and make the inner blocks siblings of the parent. - replaceBlocks( - [ parentBlockId ], - [ newParentBlock, ...innerBlocks ] - ); - // Select the last child of the list being outdent. - selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId ); - }, [ clientId ] ), - ]; + return useCallback( () => { + const parentBlockId = getBlockRootClientId( clientId ); + const parentBlockAttributes = getBlockAttributes( parentBlockId ); + // Create a new parent block without the inner blocks. + const newParentBlock = createBlock( + 'core/list-item', + parentBlockAttributes + ); + const { innerBlocks } = getBlock( clientId ); + // Replace the parent block with a new parent block without inner blocks, + // and make the inner blocks siblings of the parent. + replaceBlocks( [ parentBlockId ], [ newParentBlock, ...innerBlocks ] ); + // Select the last child of the list being outdent. + selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId ); + }, [ clientId ] ); } function IndentUI( { clientId } ) { - const [ canOutdent, outdentList ] = useOutdentList( clientId ); + const outdentList = useOutdentList( clientId ); + const canOutdent = useSelect( + ( select ) => { + const { getBlockRootClientId, getBlockName } = + select( blockEditorStore ); + return ( + getBlockName( getBlockRootClientId( clientId ) ) === + 'core/list-item' + ); + }, + [ clientId ] + ); return ( <> Date: Thu, 14 Dec 2023 19:46:54 +0000 Subject: [PATCH 03/89] Mobile Release v1.109.3 (#57060) * Release script: Update react-native-editor version to 1.109.0 * Release script: Update CHANGELOG for version 1.109.0 * Release script: Update podfile * Update `react-native-editor` changelog * Update `react-native-editor` changelog * Mobile - Fix issue when backspacing in an empty Paragraph block (#56496) * Bring changes from #55134 to the mobile code * Mobile - RichText - Force focus when the block is selected but the textinput is not, for cases when merging blocks. * Update Buttons integration test due to a change in the logic of the app where deleting the only button available does not remove the block * Mobile - Heading block - Adds integration test for merging a Heading block with an empty Paragraph block * Mobile - Paragraph block - Adds integration test to check that backspacing in an empty Paragraph block merges succesfully with the previous block and keeps the focus on the TextInput * Mobile - RichText - Set selection values to be the last character position when merging and adds some comments to explain what is doing * Mobile - Paragraph block test - Use focusTextInput to check the TextInput is in focused instead of checking for the fomatting toolbar button * Rename shouldFocusTextInputAfterUpdate to shouldFocusTextInputAfterMerge * Update CHANGELOG * Release script: Update react-native-editor version to 1.109.1 * Release script: Update CHANGELOG for version 1.109.1 * Release script: Update podfile * [RNMobile] Fixes a crash on pasting MS Word list markup (#56653) * Add polyfill for Element.prototype.remove * Enable unit tests of `raw-handling` API filter `ms-list-converter` * Update `react-native-editor` changelog * [RNMobile] Fix issue related to receiving undefined ref in text color format (#56686) * Fix issue related to receiving undefined ref in text color format In rare cases, `TextColorEdit` might receive the `RichText` ref as undefined. This ref is used to get the background color of the text and use it in the toolbar button. * Update `react-native-editor` changelog * Add test to cover undefined `contentRef` case * Correct typo in `changelog` * [RNMobile] Fix HTML to blocks conversion when no transformations are available (#56723) * Add native workaround for HTML block in `htmlToBlocks` * Add raw handling tests This file is a clone of the same `blocks-raw-handling.js` file located in `gutenberg/test/integration`. The reason for the separation is that several of the test cases fail in the native version. For now, we are going to skip them, but we'd need to work on them in the future. Once all issues in tests are addressed, we'll remove this file in favor of the original one. * Update blocks raw handling test snapshot with original values * Disable more pasteHandler test cases due to not matching test snapshot * Comment obsolete snapshots of blocks raw handling tests The reason for commenting them instead of removing is that, in the future, we'll restore them once we address the failing test cases. * RichText (native): remove HTML check in getFormatColors (#56684) * Mobile - Global Styles - Fix issue with custom color variables not being parsed (#56752) * [RNMobile] Address `NullPointerException` crash in `AztecHeadingSpan` (#56757) Address rare cases where a null value is passed to a heading block, causing a crash. * Release script: Update react-native-editor version to 1.109.2 * Release script: Update CHANGELOG for version 1.109.2 * Release script: Update podfile * Release script: Update react-native-editor version to 1.109.3 * Release script: Update CHANGELOG for version 1.109.3 * Release script: Update podfile * Mobile - Fix having the default font sizes when there are theme font sizes available * Update CHANGELOG entry --------- Co-authored-by: Carlos Garcia Co-authored-by: Gerardo Pacheco Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> --- package-lock.json | 6 +++--- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/CHANGELOG.md | 3 +++ packages/react-native-editor/ios/Podfile.lock | 8 ++++---- packages/react-native-editor/package.json | 2 +- 6 files changed, 13 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d707b51aab83..c01f19ad33228 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56135,7 +56135,7 @@ }, "packages/react-native-aztec": { "name": "@wordpress/react-native-aztec", - "version": "1.109.2", + "version": "1.109.3", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/element": "file:../element", @@ -56148,7 +56148,7 @@ }, "packages/react-native-bridge": { "name": "@wordpress/react-native-bridge", - "version": "1.109.2", + "version": "1.109.3", "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/react-native-aztec": "file:../react-native-aztec" @@ -56159,7 +56159,7 @@ }, "packages/react-native-editor": { "name": "@wordpress/react-native-editor", - "version": "1.109.2", + "version": "1.109.3", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index fbf34269306ee..4b24bdbc70756 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.109.2", + "version": "1.109.3", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 6b9bdb782d66d..586c5159ef165 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.109.2", + "version": "1.109.3", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 6f4c1ee783e19..a66368115a320 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -17,6 +17,9 @@ For each user feature we should also add a importance categorization label to i - [**] Fix crash when sharing unsupported media types on Android [#56791] - [**] Fix regressions with wrapper props and font size customization [#56985] +## 1.109.3 +- [**] Fix duplicate/unresponsive options in font size settings. [#56985] + ## 1.109.2 - [**] Fix issue related to text color format and receiving in rare cases an undefined ref from `RichText` component [#56686] - [**] Fixes a crash on pasting MS Word list markup [#56653] diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 51b5554191ea8..f4eaa1c15bc1f 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.71.11) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.109.2): + - Gutenberg (1.109.3): - React-Core (= 0.71.11) - React-CoreModules (= 0.71.11) - React-RCTImage (= 0.71.11) @@ -429,7 +429,7 @@ PODS: - React-RCTImage - RNSVG (13.9.0): - React-Core - - RNTAztecView (1.109.2): + - RNTAztecView (1.109.3): - React-Core - WordPress-Aztec-iOS (= 1.19.9) - SDWebImage (5.11.1): @@ -617,7 +617,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: f07662560742d82a5b73cee116c70b0b49bcc220 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b - Gutenberg: 2da422f5cdffef9f66fc57f87ddba4dbda5ceb9d + Gutenberg: 74c7183474e117f4ffaae5eac944cf598a383095 hermes-engine: 34c863b446d0135b85a6536fa5fd89f48196f848 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c @@ -662,7 +662,7 @@ SPEC CHECKSUMS: RNReanimated: d4f363f4987ae0ade3e36ff81c94e68261bf4b8d RNScreens: 68fd1060f57dd1023880bf4c05d74784b5392789 RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315 - RNTAztecView: dc2635b4d33818f4c113717ff67071c1e367ed8c + RNTAztecView: fd32ea370f13d9edd7f43b65b6270ae499757d69 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d WordPress-Aztec-iOS: fbebd569c61baa252b3f5058c0a2a9a6ada686bb diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index bcc15b44b4ca1..90f99b36a0b0a 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.109.2", + "version": "1.109.3", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 30b5e03b2afc1f5ed68c4f4359cb2bfbfa2e7af5 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 14 Dec 2023 22:16:55 +0100 Subject: [PATCH 04/89] Mobile: fix getPxFromCssUnit circular dependency (#57045) --- packages/block-editor/README.md | 9 +++------ .../src/components/plain-text/index.native.js | 7 ++++++- .../src/components/rich-text/native/index.native.js | 3 ++- packages/block-editor/src/utils/get-px-from-css-unit.js | 8 ++++++++ packages/block-editor/src/utils/index.js | 2 +- packages/block-library/src/spacer/edit.native.js | 6 ++++-- packages/components/src/font-size-picker/index.native.js | 2 +- packages/components/src/index.native.js | 1 + .../src/mobile/global-styles-context/utils.native.js | 2 +- .../src/mobile/utils/get-px-from-css-unit.native.js} | 0 .../mobile/utils/test/get-px-from-css-unit.native.js} | 2 +- 11 files changed, 28 insertions(+), 14 deletions(-) create mode 100644 packages/block-editor/src/utils/get-px-from-css-unit.js rename packages/{block-editor/src/utils/parse-css-unit-to-px.js => components/src/mobile/utils/get-px-from-css-unit.native.js} (100%) rename packages/{block-editor/src/utils/test/parse-css-unit-to-px.js => components/src/mobile/utils/test/get-px-from-css-unit.native.js} (99%) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6c39b5dcc44b4..5917ac235505c 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -539,16 +539,13 @@ _Returns_ ### getPxFromCssUnit -Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit; - -_Parameters_ +> **Deprecated** -- _cssUnit_ `string`: -- _options_ `Object`: +This function was accidentially exposed for mobile/native usage. _Returns_ -- `string`: returns the cssUnit value in a simple px format. +- `string`: Empty string. ### getSpacingPresetCssVar diff --git a/packages/block-editor/src/components/plain-text/index.native.js b/packages/block-editor/src/components/plain-text/index.native.js index dc1af954c6e1c..d61c3647af018 100644 --- a/packages/block-editor/src/components/plain-text/index.native.js +++ b/packages/block-editor/src/components/plain-text/index.native.js @@ -7,7 +7,12 @@ import { TextInput, Platform, Dimensions } from 'react-native'; * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { RichText, getPxFromCssUnit } from '@wordpress/block-editor'; +import { getPxFromCssUnit } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import RichText from '../rich-text'; /** * Internal dependencies diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js index 116425a15b53b..83396cbb4319f 100644 --- a/packages/block-editor/src/components/rich-text/native/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/index.native.js @@ -15,7 +15,8 @@ import { showUserSuggestions, showXpostSuggestions, } from '@wordpress/react-native-bridge'; -import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor'; +import { BlockFormatControls } from '@wordpress/block-editor'; +import { getPxFromCssUnit } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { compose, diff --git a/packages/block-editor/src/utils/get-px-from-css-unit.js b/packages/block-editor/src/utils/get-px-from-css-unit.js new file mode 100644 index 0000000000000..f1ee9fbcafb13 --- /dev/null +++ b/packages/block-editor/src/utils/get-px-from-css-unit.js @@ -0,0 +1,8 @@ +/** + * This function was accidentially exposed for mobile/native usage. + * + * @deprecated + * + * @return {string} Empty string. + */ +export default () => ''; diff --git a/packages/block-editor/src/utils/index.js b/packages/block-editor/src/utils/index.js index af45111759699..ee3b2692b369a 100644 --- a/packages/block-editor/src/utils/index.js +++ b/packages/block-editor/src/utils/index.js @@ -1,3 +1,3 @@ export { default as transformStyles } from './transform-styles'; export * from './block-variation-transforms'; -export { default as getPxFromCssUnit } from './parse-css-unit-to-px'; +export { default as getPxFromCssUnit } from './get-px-from-css-unit'; diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 614624570a6d9..c6ef3095e26ac 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -6,14 +6,16 @@ import { View, useWindowDimensions } from 'react-native'; /** * WordPress dependencies */ -import { useConvertUnitToMobile } from '@wordpress/components'; +import { + useConvertUnitToMobile, + getPxFromCssUnit, +} from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; import { InspectorControls, isValueSpacingPreset, useSettings, getCustomValueFromPreset, - getPxFromCssUnit, } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index 1d5d25cbc1b73..089c2b3923000 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -11,11 +11,11 @@ import { useState } from '@wordpress/element'; import { Icon, chevronRight, check } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { BottomSheet } from '@wordpress/components'; -import { getPxFromCssUnit } from '@wordpress/block-editor'; /** * Internal dependencies */ +import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit'; import { default as UnitControl, useCustomUnits } from '../unit-control'; import styles from './style.scss'; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index f2c1591dc3ce2..3958f359ca307 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -121,6 +121,7 @@ export { ALIGNMENT_BREAKPOINTS, alignmentHelpers, } from './mobile/utils/alignments'; +export { default as getPxFromCssUnit } from './mobile/utils/get-px-from-css-unit'; // Hooks. export { diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index ac77945c464cb..f03a2afa77c40 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -9,7 +9,6 @@ import { colord } from 'colord'; * WordPress dependencies */ import { - getPxFromCssUnit, useSettings, useMultipleOriginColorsAndGradients, SETTINGS_DEFAULTS, @@ -19,6 +18,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ +import { default as getPxFromCssUnit } from '../utils/get-px-from-css-unit'; import { useGlobalStyles } from './index.native'; export const BLOCK_STYLE_ATTRIBUTES = [ diff --git a/packages/block-editor/src/utils/parse-css-unit-to-px.js b/packages/components/src/mobile/utils/get-px-from-css-unit.native.js similarity index 100% rename from packages/block-editor/src/utils/parse-css-unit-to-px.js rename to packages/components/src/mobile/utils/get-px-from-css-unit.native.js diff --git a/packages/block-editor/src/utils/test/parse-css-unit-to-px.js b/packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js similarity index 99% rename from packages/block-editor/src/utils/test/parse-css-unit-to-px.js rename to packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js index 17fd36e1cddcb..852fc0b4f9a78 100644 --- a/packages/block-editor/src/utils/test/parse-css-unit-to-px.js +++ b/packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js @@ -4,7 +4,7 @@ import { default as memoizedGetPxFromCssUnit, getPxFromCssUnit, -} from '../parse-css-unit-to-px'; +} from '../get-px-from-css-unit'; describe( 'getPxFromCssUnit', () => { // Absolute units. From f22603f9ff6d3fdf0250969aa99b16c4ae3b3f75 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 15 Dec 2023 10:12:55 +1100 Subject: [PATCH 05/89] List View: Allow right-click to open block settings dropdown, add editor setting (#50273) * List View: Allow right-click to open block settings dropdown, add setting * Fix flicker of focus state when initially right clicking * Tidy up useSelect * Fix e2e test (hopefully) * Update help text for preferences items --- .../list-view/block-select-button.js | 4 ++ .../src/components/list-view/block.js | 72 ++++++++++++++++++- .../src/components/preferences-modal/index.js | 9 +++ packages/edit-post/src/editor.js | 6 ++ packages/edit-post/src/index.js | 1 + .../block-editor/use-site-editor-settings.js | 7 ++ .../src/components/preferences-modal/index.js | 7 ++ packages/edit-site/src/index.js | 1 + .../provider/use-block-editor-settings.js | 1 + test/e2e/specs/editor/various/a11y.spec.js | 25 ++++++- 10 files changed, 130 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 25de5483f5192..6b9de943ea0bf 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -38,6 +38,8 @@ function ListViewBlockSelectButton( className, block: { clientId }, onClick, + onContextMenu, + onMouseDown, onToggleExpanded, tabIndex, onFocus, @@ -237,7 +239,9 @@ function ListViewBlockSelectButton( className ) } onClick={ onClick } + onContextMenu={ onContextMenu } onKeyDown={ onKeyDownHandler } + onMouseDown={ onMouseDown } ref={ ref } tabIndex={ tabIndex } onFocus={ onFocus } diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 4957f79fa0d48..a90bf116e1d08 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -13,7 +13,13 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { moreVertical } from '@wordpress/icons'; -import { useState, useRef, useCallback, memo } from '@wordpress/element'; +import { + useCallback, + useMemo, + useState, + useRef, + memo, +} from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; import { ESCAPE } from '@wordpress/keycodes'; @@ -53,7 +59,9 @@ function ListViewBlock( { } ) { const cellRef = useRef( null ); const rowRef = useRef( null ); + const settingsRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); + const [ settingsAnchorRect, setSettingsAnchorRect ] = useState(); const { isLocked, canEdit } = useBlockLock( clientId ); @@ -82,6 +90,11 @@ function ListViewBlock( { }, [ clientId ] ); + const allowRightClickOverrides = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().allowRightClickOverrides, + [] + ); const showBlockActions = // When a block hides its toolbar it also hides the block settings menu, @@ -190,6 +203,56 @@ function ListViewBlock( { [ clientId, expand, collapse, isExpanded ] ); + // Allow right-clicking an item in the List View to open up the block settings dropdown. + const onContextMenu = useCallback( + ( event ) => { + if ( showBlockActions && allowRightClickOverrides ) { + settingsRef.current?.click(); + // Ensure the position of the settings dropdown is at the cursor. + setSettingsAnchorRect( + new window.DOMRect( event.clientX, event.clientY, 0, 0 ) + ); + event.preventDefault(); + } + }, + [ allowRightClickOverrides, settingsRef, showBlockActions ] + ); + + const onMouseDown = useCallback( + ( event ) => { + // Prevent right-click from focusing the block, + // because focus will be handled when opening the block settings dropdown. + if ( allowRightClickOverrides && event.button === 2 ) { + event.preventDefault(); + } + }, + [ allowRightClickOverrides ] + ); + + const settingsPopoverAnchor = useMemo( () => { + const { ownerDocument } = rowRef?.current || {}; + + // If no custom position is set, the settings dropdown will be anchored to the + // DropdownMenu toggle button. + if ( ! settingsAnchorRect || ! ownerDocument ) { + return undefined; + } + + // Position the settings dropdown at the cursor when right-clicking a block. + return { + ownerDocument, + getBoundingClientRect() { + return settingsAnchorRect; + }, + }; + }, [ settingsAnchorRect ] ); + + const clearSettingsAnchorRect = useCallback( () => { + // Clear the custom position for the settings dropdown so that it is restored back + // to being anchored to the DropdownMenu toggle button. + setSettingsAnchorRect( undefined ); + }, [ setSettingsAnchorRect ] ); + let colSpan; if ( hasRenderedMovers ) { colSpan = 2; @@ -257,6 +320,8 @@ function ListViewBlock( { { ( { ref, tabIndex, onFocus } ) => ( ) } + + ), }, diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 82014ad06eb49..9dcdb2ce99b5b 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -52,6 +52,7 @@ export function initializeEditor( id, settings ) { // We dispatch actions and update the store synchronously before rendering // so that we won't trigger unnecessary re-renders with useEffect. dispatch( preferencesStore ).setDefaults( 'core/edit-site', { + allowRightClickOverrides: true, editorMode: 'visual', fixedToolbar: false, focusMode: false, diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index de5d9cf43437d..34aa472a9921d 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -29,6 +29,7 @@ const BLOCK_EDITOR_SETTINGS = [ '__unstableGalleryWithImageBlocks', 'alignWide', 'allowedBlockTypes', + 'allowRightClickOverrides', 'blockInspectorTabs', 'allowedMimeTypes', 'bodyPlaceholder', diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index 05c4ea3b8e97e..3ec7318ab89e7 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -124,6 +124,13 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, } ) => { + // Note: this test depends on a particular viewport height to determine whether or not + // the modal content is scrollable. If this tests fails and needs to be debugged locally, + // double-check the viewport height when running locally versus in CI. Additionally, + // when adding or removing items from the preference menu, this test may need to be updated + // if the height of panels has changed. It would be good to find a more robust way to test + // this behavior. + // Open the top bar Options menu. await page.click( 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]' @@ -145,6 +152,9 @@ test.describe( 'a11y (@firefox, @webkit)', () => { const generalTab = preferencesModal.locator( 'role=tab[name="General"i]' ); + const accessibilityTab = preferencesModal.locator( + 'role=tab[name="Accessibility"i]' + ); const blocksTab = preferencesModal.locator( 'role=tab[name="Blocks"i]' ); @@ -165,9 +175,20 @@ test.describe( 'a11y (@firefox, @webkit)', () => { await tab.focus(); } - // The General tab panel content is short and not scrollable. - // Check it's not focusable. + // The Accessibility tab is currently short and not scrollable. + // Check that it cannot be focused by tabbing. Note: this test depends + // on a particular viewport height to determine whether or not the + // modal content is scrollable. If additional Accessibility options are + // added, then eventually this test will fail. + // TODO: find a more robust way to test this behavior. await clickAndFocusTab( generalTab ); + // Navigate down to the Accessibility tab. + await pageUtils.pressKeys( 'ArrowDown', { times: 2 } ); + // Check the Accessibility tab panel is visible. + await expect( + preferencesModal.locator( 'role=tabpanel[name="Accessibility"i]' ) + ).toBeVisible(); + await expect( accessibilityTab ).toBeFocused(); await pageUtils.pressKeys( 'Shift+Tab' ); await expect( closeButton ).toBeFocused(); await pageUtils.pressKeys( 'Shift+Tab' ); From b8edcb73e9f6816f1eb600f14219fcf7feb90e5e Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Fri, 15 Dec 2023 00:22:13 +0000 Subject: [PATCH 06/89] Update Changelog for 17.2.2 --- changelog.txt | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/changelog.txt b/changelog.txt index d0d8e111937e0..8a56965c390e7 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,10 @@ == Changelog == += 17.2.2 = + +This patch release fixes a WSOD which could occur in the site editor. See https://github.com/WordPress/gutenberg/pull/57035. + + = 17.3.0-rc.1 = From 6e30f08ffa28579a0a3a21daf1f7935414672c01 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 15 Dec 2023 11:11:53 +0900 Subject: [PATCH 07/89] Quality: Replace wpKebabCase function with kebabCase function from components package (#57038) --- .../font-library-modal/utils/index.js | 18 ++++-------- .../utils/test/wpKebabCase.spec.js | 28 ------------------- 2 files changed, 5 insertions(+), 41 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index f5723f5814e98..69db09d49a0ce 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -1,12 +1,13 @@ /** - * External dependencies + * WordPress dependencies */ -import { paramCase as kebabCase } from 'change-case'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; /** * Internal dependencies */ import { FONT_WEIGHTS, FONT_STYLES } from './constants'; +import { unlock } from '../../../../lock-unlock'; export function setUIValuesNeeded( font, extraValues = {} ) { if ( ! font.name && ( font.fontFamily || font.slug ) ) { @@ -129,20 +130,11 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) { return src; } -// This function replicates one behavior of _wp_to_kebab_case(). -// Additional context: https://github.com/WordPress/gutenberg/issues/53695 -export function wpKebabCase( str ) { - // If a string contains a digit followed by a number, insert a dash between them. - return kebabCase( str ).replace( - /([a-zA-Z])(\d)|(\d)([a-zA-Z])/g, - '$1$3-$2$4' - ); -} - export function makeFormDataFromFontFamilies( fontFamilies ) { const formData = new FormData(); const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => { - family.slug = wpKebabCase( family.slug ); + const { kebabCase } = unlock( componentsPrivateApis ); + family.slug = kebabCase( family.slug ); if ( family?.fontFace ) { family.fontFace = family.fontFace.map( ( face, faceIndex ) => { if ( face.file ) { diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js deleted file mode 100644 index d296117ff3a49..0000000000000 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/wpKebabCase.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Internal dependencies - */ -import { wpKebabCase } from '../index'; - -describe( 'wpKebabCase', () => { - it( 'should insert a dash between a letter and a digit', () => { - const input = 'abc1def'; - const expectedOutput = 'abc-1def'; - expect( wpKebabCase( input ) ).toEqual( expectedOutput ); - - const input2 = 'abc1def2ghi'; - const expectedOutput2 = 'abc-1def-2ghi'; - expect( wpKebabCase( input2 ) ).toEqual( expectedOutput2 ); - } ); - - it( 'should not insert a dash between two letters', () => { - const input = 'abcdef'; - const expectedOutput = 'abcdef'; - expect( wpKebabCase( input ) ).toEqual( expectedOutput ); - } ); - - it( 'should not insert a dash between a digit and a hyphen', () => { - const input = 'abc1-def'; - const expectedOutput = 'abc-1-def'; - expect( wpKebabCase( input ) ).toEqual( expectedOutput ); - } ); -} ); From 2aa0804588b7c3082da489b11eb0b9ec7d00068e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 15 Dec 2023 15:28:28 +1300 Subject: [PATCH 08/89] Add e2e tests to check image upload working in site editor (#57086) --- test/e2e/specs/editor/blocks/image.spec.js | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index f1041fa60061a..adeabc860c834 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -1294,6 +1294,59 @@ test.describe.skip( 'Image - interactivity', () => { } ); } ); +// Added to prevent regressions of https://github.com/WordPress/gutenberg/pull/57040. +test.describe( 'Image - Site editor', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.deleteAllMedia(); + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.beforeEach( async ( { admin, editor } ) => { + await admin.visitSiteEditor( { + postId: 'emptytheme//index', + postType: 'wp_template', + } ); + await editor.canvas.locator( 'body' ).click(); + } ); + + test.afterEach( async ( { requestUtils } ) => { + await requestUtils.deleteAllMedia(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test( 'can be inserted via image upload', async ( { + editor, + imageBlockUtils, + } ) => { + await editor.insertBlock( { name: 'core/image' } ); + + const imageBlock = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + await expect( imageBlock ).toBeVisible(); + + const filename = await imageBlockUtils.upload( + imageBlock.locator( 'data-testid=form-file-upload-input' ) + ); + + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); + await expect( image ).toBeVisible(); + await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); + + const regex = new RegExp( + ` +
+` + ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); + } ); +} ); + class ImageBlockUtils { constructor( { page } ) { /** @type {Page} */ From 58fd414f20bf6f862a94136e3171de4065f599f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 15 Dec 2023 09:15:52 +0100 Subject: [PATCH 09/89] DataViews: remove class from edit site (#57075) --- packages/dataviews/src/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 1282d28581dce..81c6d1055d328 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -242,13 +242,9 @@ } } - .edit-site-page-pages__featured-image, .dataviews-list-view__media-placeholder { min-width: $grid-unit-40; height: $grid-unit-40; - } - - .dataviews-list-view__media-placeholder { background-color: $gray-200; } From 633d6ef620f33e04c266d29af1da416a342e8557 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 15 Dec 2023 08:22:23 +0000 Subject: [PATCH 10/89] [a11y] Fix: Use spans instead of headings on dataviews table view page title. (#56956) --- packages/edit-site/src/components/page-pages/index.js | 9 ++++++--- packages/edit-site/src/components/page-pages/style.scss | 6 ++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 55eb450f7ac7e..17736abdfc55c 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { - __experimentalHeading as Heading, + __experimentalView as View, __experimentalVStack as VStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -216,7 +216,10 @@ export default function PagePages() { render: ( { item } ) => { return ( - + { [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ? ( @@ -236,7 +239,7 @@ export default function PagePages() { item.title?.rendered || item.slug ) || __( '(no title)' ) ) } - + ); }, diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss index 933fdadb8d070..35ac8273dc555 100644 --- a/packages/edit-site/src/components/page-pages/style.scss +++ b/packages/edit-site/src/components/page-pages/style.scss @@ -3,3 +3,9 @@ width: $grid-unit-40; height: $grid-unit-40; } + + +.edit-site-page-pages__list-view-title-field { + font-size: $default-font-size; + font-weight: 500; +} From 77a9c2667f9d5f2764e2ce55fde851e5a142d7c5 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 15 Dec 2023 11:24:41 +0100 Subject: [PATCH 11/89] Interactivity API: fix namespaces in nested interactive regions (#57029) * Add failing test * Turn namespaces into a stack inside `toVdom` * Add changelog entry --- .../interactive-blocks/tovdom-islands/render.php | 12 ++++++++++++ packages/interactivity/CHANGELOG.md | 4 ++++ packages/interactivity/src/vdom.js | 10 +++++++--- test/e2e/specs/interactivity/tovdom-islands.spec.ts | 7 +++++++ 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php index 7b1bc6513977b..1f53ca1331a37 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php @@ -68,4 +68,16 @@ + + + +
+
+
+ + The directive above should keep the `tovdom-island` namespace, + so this message should not be visible. + +
+
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index ce90835dda23d..8c03cfc314efe 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- Fix namespaces when there are nested interactive regions. ([#57029](https://github.com/WordPress/gutenberg/pull/57029)) + ## 3.1.0 (2023-12-13) ## 3.0.0 (2023-11-29) diff --git a/packages/interactivity/src/vdom.js b/packages/interactivity/src/vdom.js index b1342ac271a8e..860a3149e6ffd 100644 --- a/packages/interactivity/src/vdom.js +++ b/packages/interactivity/src/vdom.js @@ -10,7 +10,8 @@ import { directivePrefix as p } from './constants'; const ignoreAttr = `data-${ p }-ignore`; const islandAttr = `data-${ p }-interactive`; const fullPrefix = `data-${ p }-`; -let namespace = null; +const namespaces = []; +const currentNamespace = () => namespaces[ namespaces.length - 1 ] ?? null; // Regular expression for directive parsing. const directiveParser = new RegExp( @@ -79,7 +80,7 @@ export function toVdom( root ) { } catch ( e ) {} if ( n === islandAttr ) { island = true; - namespace = value?.namespace ?? null; + namespaces.push( value?.namespace ?? null ); } else { directives.push( [ n, ns, value ] ); } @@ -107,7 +108,7 @@ export function toVdom( root ) { directiveParser.exec( name ); if ( ! obj[ prefix ] ) obj[ prefix ] = []; obj[ prefix ].push( { - namespace: ns ?? namespace, + namespace: ns ?? currentNamespace(), value, suffix, } ); @@ -127,6 +128,9 @@ export function toVdom( root ) { treeWalker.parentNode(); } + // Restore previous namespace. + if ( island ) namespaces.pop(); + return [ h( node.localName, props, children ) ]; } diff --git a/test/e2e/specs/interactivity/tovdom-islands.spec.ts b/test/e2e/specs/interactivity/tovdom-islands.spec.ts index fcc7c6081077a..257b0a0fc94b8 100644 --- a/test/e2e/specs/interactivity/tovdom-islands.spec.ts +++ b/test/e2e/specs/interactivity/tovdom-islands.spec.ts @@ -55,4 +55,11 @@ test.describe( 'toVdom - islands', () => { ); await expect( el ).toBeHidden(); } ); + + test( 'islands should recover their namespace if an inner island has changed it', async ( { + page, + } ) => { + const el = page.getByTestId( 'directive after different namespace' ); + await expect( el ).toBeHidden(); + } ); } ); From 125c130818ebb83c50618722858e8315d90e76b8 Mon Sep 17 00:00:00 2001 From: JuanMa Date: Fri, 15 Dec 2023 11:51:48 +0100 Subject: [PATCH 12/89] fixed headings (#57098) --- docs/getting-started/fundamentals/registration-of-a-block.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/fundamentals/registration-of-a-block.md b/docs/getting-started/fundamentals/registration-of-a-block.md index 28e1618605a20..7d7b0e5ac3163 100644 --- a/docs/getting-started/fundamentals/registration-of-a-block.md +++ b/docs/getting-started/fundamentals/registration-of-a-block.md @@ -8,7 +8,7 @@ For example, to allow a block [to be styled via `theme.json`](https://developer. [![Open Block Registration diagram image](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png)](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png "Open Block Registration diagram image") -### Registration of the block with PHP (server-side) +## Registration of the block with PHP (server-side) Block registration on the server usually takes place in the main plugin PHP file with the `register_block_type` function called on the [init hook](https://developer.wordpress.org/reference/hooks/init/). @@ -44,7 +44,7 @@ add_action( 'init', 'minimal_block_ca6eda___register_block' ); ``` _See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/index.php)_ -### Registration of the block with JavaScript (client-side) +## Registration of the block with JavaScript (client-side) When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. From ab04a95714af347cac9ee0f24a3e58abf66f27ea Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Fri, 15 Dec 2023 06:41:02 -0600 Subject: [PATCH 13/89] Remove unnecessary TOCs (#57087) --- docs/contributors/code/release.md | 31 ------------------- .../platform/custom-block-editor.md | 15 --------- .../components/alignment-control/README.md | 5 --- .../block-alignment-control/README.md | 5 --- .../block-alignment-matrix-control/README.md | 10 ------ .../src/components/block-breadcrumb/README.md | 5 --- .../src/components/block-caption/README.md | 5 --- .../src/components/block-card/README.md | 5 --- .../src/components/block-icon/README.md | 5 --- .../src/components/block-inspector/README.md | 5 --- .../src/components/block-mover/README.md | 5 --- .../block-parent-selector/README.md | 5 --- .../components/block-patterns-list/README.md | 5 --- .../src/components/block-toolbar/README.md | 5 --- .../src/components/block-types-list/README.md | 5 --- .../block-variation-picker/README.md | 5 --- .../block-variation-transforms/README.md | 5 --- .../src/components/caption/README.md | 5 --- .../src/components/contrast-checker/README.md | 4 --- .../src/components/copy-handler/README.md | 10 ------ .../src/components/height-control/README.md | 5 --- .../letter-spacing-control/README.md | 5 --- .../components/line-height-control/README.md | 5 --- .../src/components/list-view/README.md | 5 --- .../multi-selection-inspector/README.md | 5 --- .../text-transform-control/README.md | 4 --- .../src/components/ungroup-button/README.md | 5 --- .../src/components/unit-control/README.md | 4 --- .../components/use-resize-canvas/README.md | 4 --- .../src/components/use-settings/README.md | 4 --- .../components/src/button-group/README.md | 6 ---- packages/components/src/button/README.md | 6 ---- .../components/src/checkbox-control/README.md | 10 +----- .../components/src/combobox-control/README.md | 6 ---- .../src/custom-select-control/README.md | 6 ---- .../components/src/dropdown-menu/README.md | 5 --- packages/components/src/form-toggle/README.md | 6 ---- packages/components/src/menu-group/README.md | 8 ----- .../src/menu-items-choice/README.md | 7 ----- packages/components/src/modal/README.md | 6 ---- packages/components/src/notice/README.md | 6 ---- packages/components/src/panel/README.md | 6 ---- .../components/src/radio-control/README.md | 6 ---- packages/components/src/radio-group/README.md | 6 ---- .../components/src/range-control/README.md | 10 +----- .../components/src/search-control/README.md | 6 ---- .../components/src/select-control/README.md | 6 ---- packages/components/src/snackbar/README.md | 6 ---- packages/components/src/spacer/README.md | 2 -- packages/components/src/tab-panel/README.md | 5 --- .../components/src/text-control/README.md | 6 ---- .../components/src/textarea-control/README.md | 6 ---- .../components/src/toolbar/toolbar/README.md | 6 ---- packages/components/src/tree-grid/README.md | 4 --- packages/create-block/README.md | 12 ------- 55 files changed, 2 insertions(+), 348 deletions(-) diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index d19be240f4870..05194ecd83417 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -10,37 +10,6 @@ Before you begin, there are some requirements that must be met in order to succe Similar requirements apply to releasing WordPress's [npm packages](https://developer.wordpress.org/block-editor/contributors/code/release/#packages-releases-to-npm-and-wordpress-core-updates). -**Table of contents** - -- **[Gutenberg plugin releases](#gutenberg-plugin-releases)** - - [Release schedule](#release-schedule) - - [Release management](#release-management) - - [Preparing a release](#preparing-a-release) - - [Organizing and labeling milestone PRs](#organizing-and-labeling-milestone-prs) - - [Running the release workflow](#running-the-release-workflow) - - [Publishing the @wordpress packages to NPM](#publishing-the-wordpress-packages-to-npm) - - [Viewing the release draft](#viewing-the-release-draft) - - [Curating the release changelog](#curating-the-release-changelog) - - [Creating release candidate patches (cherry-picking)](#creating-release-candidate-patches-cherry-picking) - - [Automated cherry-picking](#automated-cherry-picking) - - [Manual cherry-picking](#manual-cherry-picking) - - [Publishing the release](#publishing-the-release) - - [Troubleshooting the release](#troubleshooting-the-release) - - [Documenting the release](#documenting-the-release) - - [Selecting the release highlights](#selecting-the-release-highlights) - - [Requesting release assets](#requesting-release-assets) - - [Drafting the release post](#drafting-the-release-post) - - [Publishing the release post](#publishing-the-release-post) - - [Creating minor releases](#creating-minor-releases) - - [Updating the release branch](#updating-the-release-branch) - - [Running the minor release](#running-the-minor-release) - - [Creating a minor release for previous stable releases](#creating-a-minor-release-for-previous-stable-releases) - - [Troubleshooting](#troubleshooting) -- [Packages releases to NPM and WordPress Core updates](#packages-releases-to-npm-and-wordpress-core-updates) - - [Synchronizing the Gutenberg plugin](#synchronizing-the-gutenberg-plugin) - - [WordPress releases](#wordpress-releases) - - [Development releases](#development-releases) - ## Gutenberg plugin releases The first step in releasing a stable version of the Gutenberg plugin is to [create an issue](https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&projects=&template=New_release.md) in the Gutenberg repository. The issue template is called "Gutenberg Release," and it contains a checklist for the complete release process, from release candidate to changelog curation to cherry-picking, stable release, and release post. The issue for [Gutenberg 15.7](https://github.com/WordPress/gutenberg/issues/50092) is a good example. diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md index 94f942fd5e05f..65f8c412c45d3 100644 --- a/docs/how-to-guides/platform/custom-block-editor.md +++ b/docs/how-to-guides/platform/custom-block-editor.md @@ -10,21 +10,6 @@ This flexibility and interoperability makes blocks a powerful tool for building This guide covers the basics of creating your first custom block editor. -## Table of contents - -- [Introduction](#introduction) -- [Code Syntax](#code-syntax) -- [What you're going to be building](#what-youre-going-to-be-building) -- [Plugin setup and organization](#plugin-setup-and-organization) -- [The "Core" of the editor](#the-core-of-the-editor) -- [Creating the custom "Block Editor" page](#creating-the-custom-block-editor-page) -- [Registering and rendering the custom block editor](#registering-and-rendering-the-custom-block-editor) -- [Reviewing the `` component](#reviewing-the-editor-component) -- [The custom ``](#the-custom-blockeditor) -- [Reviewing the sidebar](#reviewing-the-sidebar) -- [Block persistence](#block-persistence) -- [Wrapping up](#wrapping-up) - ## Introduction With its many packages and components, the Gutenberg codebase can be daunting at first. But at its core, it's all about managing and editing blocks. So if you want to work on the editor, it's essential to understand how block editing works at a fundamental level. diff --git a/packages/block-editor/src/components/alignment-control/README.md b/packages/block-editor/src/components/alignment-control/README.md index 5f52e19de8b97..c51da803c77ae 100644 --- a/packages/block-editor/src/components/alignment-control/README.md +++ b/packages/block-editor/src/components/alignment-control/README.md @@ -6,11 +6,6 @@ This component is mostly used for blocks that display text, such as Heading, Par ![Post Title block alignment options](https://make.wordpress.org/core/files/2020/09/post-title-block-alignment-options.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-alignment-control/README.md b/packages/block-editor/src/components/block-alignment-control/README.md index 14f08d1dda9ce..22b5df9af9bd4 100644 --- a/packages/block-editor/src/components/block-alignment-control/README.md +++ b/packages/block-editor/src/components/block-alignment-control/README.md @@ -4,11 +4,6 @@ The `BlockAlignmentToolbar` component is used to render block alignment options ![Image block alignment options](https://make.wordpress.org/core/files/2020/09/image-block-alignment-options.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md index 377f9f368dae4..dfb38e1596412 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/README.md +++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md @@ -4,16 +4,6 @@ The alignment matrix control allows users to quickly adjust inner block alignmen ![Button components](https://i.imgur.com/PxYkgL5.png) -## Table of contents - -- [Alignment Matrix Control](#alignment-matrix-control) - - [Table of contents](#table-of-contents) - - [Design guidelines](#design-guidelines) - - [Usage](#usage) - - [Development guidelines](#development-guidelines) - - [Usage](#usage-1) - - [Props](#props) - ## Design guidelines ### Usage diff --git a/packages/block-editor/src/components/block-breadcrumb/README.md b/packages/block-editor/src/components/block-breadcrumb/README.md index 298ff8fdf5ea6..c1ffe43472b0c 100644 --- a/packages/block-editor/src/components/block-breadcrumb/README.md +++ b/packages/block-editor/src/components/block-breadcrumb/README.md @@ -6,11 +6,6 @@ The block breadcrumb trail displays the hierarchy of the current block selection ![Image in column block breadcrumb](https://make.wordpress.org/core/files/2020/08/gutenberg-image-in-column-block-breadcrumb.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines #### Props diff --git a/packages/block-editor/src/components/block-caption/README.md b/packages/block-editor/src/components/block-caption/README.md index acb53fd4aa4c9..2d3bce1f6d2d4 100644 --- a/packages/block-editor/src/components/block-caption/README.md +++ b/packages/block-editor/src/components/block-caption/README.md @@ -4,11 +4,6 @@ The `BlockCaption` component renders block-level UI for adding and editing capti `BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc. -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-card/README.md b/packages/block-editor/src/components/block-card/README.md index 8aab2a45f612b..216cf4e3865a0 100644 --- a/packages/block-editor/src/components/block-card/README.md +++ b/packages/block-editor/src/components/block-card/README.md @@ -6,11 +6,6 @@ In the editor, this component is displayed in two different places: in the block ![Heading block card in the block inspector](https://make.wordpress.org/core/files/2020/09/screenshot-wordpress.org-2020.09.08-14_19_21.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index 4d7178032b366..638d795683198 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -6,11 +6,6 @@ The rendered an [Icon](https://github.com/WordPress/gutenberg/tree/HEAD/packages ![Image block icons in various places](https://make.wordpress.org/core/files/2020/08/image-block-icons-in-various-places.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-inspector/README.md b/packages/block-editor/src/components/block-inspector/README.md index 1f9d52482eb21..4c2fd2a06a61b 100644 --- a/packages/block-editor/src/components/block-inspector/README.md +++ b/packages/block-editor/src/components/block-inspector/README.md @@ -4,11 +4,6 @@ The Block inspector is one of the panels that is displayed in the editor; it is ![Paragraph block inspector](https://make.wordpress.org/core/files/2020/08/paragraph-block-inspector.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md index 3763b7dbada11..38520072b4ac8 100644 --- a/packages/block-editor/src/components/block-mover/README.md +++ b/packages/block-editor/src/components/block-mover/README.md @@ -4,11 +4,6 @@ Block movers allow moving blocks inside the editor using up and down buttons. ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-parent-selector/README.md b/packages/block-editor/src/components/block-parent-selector/README.md index 181e03a20800b..e16af799cb66a 100644 --- a/packages/block-editor/src/components/block-parent-selector/README.md +++ b/packages/block-editor/src/components/block-parent-selector/README.md @@ -8,11 +8,6 @@ In practice the BlockParentSelector component renders a compon ![Block parent selector test](https://make.wordpress.org/core/files/2020/09/block-parent-selector-test.gif) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md index 8b798f93b7190..f63ea44905957 100644 --- a/packages/block-editor/src/components/block-patterns-list/README.md +++ b/packages/block-editor/src/components/block-patterns-list/README.md @@ -6,11 +6,6 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor ![Block patterns sidebar in WordPress 5.5](https://make.wordpress.org/core/files/2020/09/blocks-patterns-sidebar-in-wordpress-5-5.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-toolbar/README.md b/packages/block-editor/src/components/block-toolbar/README.md index be4c8e15abe09..7a8a0543e179e 100644 --- a/packages/block-editor/src/components/block-toolbar/README.md +++ b/packages/block-editor/src/components/block-toolbar/README.md @@ -6,11 +6,6 @@ The `BlockToolbar` component is used to render a toolbar that serves as a wrappe ![Image block toolbar](https://make.wordpress.org/core/files/2020/09/image-block-toolbar.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-types-list/README.md b/packages/block-editor/src/components/block-types-list/README.md index 68e89573447db..8740cdbf2c774 100644 --- a/packages/block-editor/src/components/block-types-list/README.md +++ b/packages/block-editor/src/components/block-types-list/README.md @@ -10,11 +10,6 @@ This component is present in the block insertion tab, the reusable blocks tab an ![Block types list in the quick inserter modal](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-3.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-variation-picker/README.md b/packages/block-editor/src/components/block-variation-picker/README.md index 4816822e535a2..84aae55616066 100644 --- a/packages/block-editor/src/components/block-variation-picker/README.md +++ b/packages/block-editor/src/components/block-variation-picker/README.md @@ -10,11 +10,6 @@ This component is currently used by "Columns" and "Query Loop" blocks. ![Columns block variations](https://make.wordpress.org/core/files/2020/09/colums-block-variations.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/block-variation-transforms/README.md b/packages/block-editor/src/components/block-variation-transforms/README.md index 0eb016d493207..c9edc9dd1639f 100644 --- a/packages/block-editor/src/components/block-variation-transforms/README.md +++ b/packages/block-editor/src/components/block-variation-transforms/README.md @@ -4,11 +4,6 @@ This component allows to display the selected block's variations which have the By selecting such a variation an update to the selected block's attributes happen, based on the variation's attributes. -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/caption/README.md b/packages/block-editor/src/components/caption/README.md index d1f8bcddaaced..c8cf4ebe8701d 100644 --- a/packages/block-editor/src/components/caption/README.md +++ b/packages/block-editor/src/components/caption/README.md @@ -4,11 +4,6 @@ The `Caption` component renders the [caption part](https://wordpress.org/documen This component encapsulates the "caption" behaviour and styles over a `` so it can be used in other components such as the `BlockCaption` component. -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/contrast-checker/README.md b/packages/block-editor/src/components/contrast-checker/README.md index 6f3b41ecb7d0c..cb9d18252a04c 100644 --- a/packages/block-editor/src/components/contrast-checker/README.md +++ b/packages/block-editor/src/components/contrast-checker/README.md @@ -6,10 +6,6 @@ ContrastChecker also accounts for font sizes. A notice will be rendered if the color combination of text and background colors are low. -## Table of contents - -1. [Development guidelines](#development-guidelines) - ## Developer guidelines ### Usage diff --git a/packages/block-editor/src/components/copy-handler/README.md b/packages/block-editor/src/components/copy-handler/README.md index b70c841ce0ea5..1e9883d9a2b3b 100644 --- a/packages/block-editor/src/components/copy-handler/README.md +++ b/packages/block-editor/src/components/copy-handler/README.md @@ -8,16 +8,6 @@ Concretely, it handles the display of success messages and takes care of copying ![Copy/cut behaviours](https://user-images.githubusercontent.com/150562/81698101-6e341d80-945d-11ea-9bfb-b20781f55033.gif) -## Table of contents - -- [Copy Handler](#copy-handler) - - [Table of contents](#table-of-contents) - - [Development guidelines](#development-guidelines) - - [Usage](#usage) - - [Props](#props) - - [`children`](#children) - - [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/height-control/README.md b/packages/block-editor/src/components/height-control/README.md index 334829ea9cf51..8853f9ef89321 100644 --- a/packages/block-editor/src/components/height-control/README.md +++ b/packages/block-editor/src/components/height-control/README.md @@ -4,11 +4,6 @@ The `HeightControl` component adds a linked unit control and slider component fo _Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls) UI controls. -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/letter-spacing-control/README.md b/packages/block-editor/src/components/letter-spacing-control/README.md index fb4dd4fd23dac..4288f67a2aa99 100644 --- a/packages/block-editor/src/components/letter-spacing-control/README.md +++ b/packages/block-editor/src/components/letter-spacing-control/README.md @@ -5,11 +5,6 @@ The `LetterSpacingControl` component renders a [`UnitControl`](https://github.co This component is used for blocks that display text, commonly inside a [`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md). -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md index 36f9d17f15bd6..38ab5c3f779a7 100644 --- a/packages/block-editor/src/components/line-height-control/README.md +++ b/packages/block-editor/src/components/line-height-control/README.md @@ -6,11 +6,6 @@ The `LineHeightControl` component adds a lineHeight attribute to the core Paragr _Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available. -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/list-view/README.md b/packages/block-editor/src/components/list-view/README.md index da0a255d1ac97..0db077c641249 100644 --- a/packages/block-editor/src/components/list-view/README.md +++ b/packages/block-editor/src/components/list-view/README.md @@ -11,11 +11,6 @@ In addition to presenting the structure of the blocks in the editor, the ListVie ![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png) ![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/multi-selection-inspector/README.md b/packages/block-editor/src/components/multi-selection-inspector/README.md index e7edc7ef2f43d..726a4d72d6697 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/README.md +++ b/packages/block-editor/src/components/multi-selection-inspector/README.md @@ -6,11 +6,6 @@ This card contains information on the number of blocks selected, and in the case ![Multi selection inspector card](https://make.wordpress.org/core/files/2020/09/multi-selection-inspector-card.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/text-transform-control/README.md b/packages/block-editor/src/components/text-transform-control/README.md index 511b73b0ec696..2d40cc16ba86f 100644 --- a/packages/block-editor/src/components/text-transform-control/README.md +++ b/packages/block-editor/src/components/text-transform-control/README.md @@ -4,10 +4,6 @@ The `TextTransformControl` component is responsible for rendering a control elem ![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) -## Table of contents - -1. [Development guidelines](#development-guidelines) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/ungroup-button/README.md b/packages/block-editor/src/components/ungroup-button/README.md index e869e6266f5b8..fe1985535b103 100644 --- a/packages/block-editor/src/components/ungroup-button/README.md +++ b/packages/block-editor/src/components/ungroup-button/README.md @@ -6,11 +6,6 @@ This only happens in the mobile WordPress apps. ![Ungroup button icon](https://user-images.githubusercontent.com/21242757/65593577-11006000-df91-11e9-8460-1179e9ef46d2.png) -## Table of contents - -1. [Development guidelines](#development-guidelines) -2. [Related components](#related-components) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/unit-control/README.md b/packages/block-editor/src/components/unit-control/README.md index e5126e7bf4524..7cd5269f00d03 100644 --- a/packages/block-editor/src/components/unit-control/README.md +++ b/packages/block-editor/src/components/unit-control/README.md @@ -15,10 +15,6 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px } ``` -## Table of contents - -1. [Development guidelines](#development-guidelines) - ## Developer guidelines ### Usage diff --git a/packages/block-editor/src/components/use-resize-canvas/README.md b/packages/block-editor/src/components/use-resize-canvas/README.md index ce8f06adea5d8..a34958c56c454 100644 --- a/packages/block-editor/src/components/use-resize-canvas/README.md +++ b/packages/block-editor/src/components/use-resize-canvas/README.md @@ -6,10 +6,6 @@ On-page CSS media queries are also updated to match the width of the device. Note that this is currently experimental, and is available as `__experimentalUseResizeCanvas`. -## Table of contents - -1. [Development guidelines](#development-guidelines) - ## Development guidelines ### Usage diff --git a/packages/block-editor/src/components/use-settings/README.md b/packages/block-editor/src/components/use-settings/README.md index 83ab802edea83..68f580aa357be 100644 --- a/packages/block-editor/src/components/use-settings/README.md +++ b/packages/block-editor/src/components/use-settings/README.md @@ -9,10 +9,6 @@ It does the lookup of the settings in the following order: 3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store. 4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead. -## Table of contents - -1. [Development guidelines](#development-guidelines) - ## Development guidelines ### Usage diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md index 2135a027afa5b..5c0179d6877af 100644 --- a/packages/components/src/button-group/README.md +++ b/packages/components/src/button-group/README.md @@ -4,12 +4,6 @@ ButtonGroup can be used to group any related buttons together. To emphasize rela ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png) -## Table of contents - -1. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) - ## Design guidelines ### Usage diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index 3af46280b1bc9..cf2748d3846f7 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -4,12 +4,6 @@ Buttons let users take actions and make choices with a single click or tap. ![Button components](https://make.wordpress.org/design/files/2019/03/button.png) -## Table of contents - -1. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) - ## Design guidelines ### Usage diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md index 66f3cae2be379..8044cef0535ea 100644 --- a/packages/components/src/checkbox-control/README.md +++ b/packages/components/src/checkbox-control/README.md @@ -2,15 +2,7 @@ Checkboxes allow the user to select one or more items from a set. -![](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png) - -Selected and unselected checkboxes - -## Table of contents - -1. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) +![Selected and unselected checkboxes](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png) ## Design guidelines diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md index cc15248678d27..9b64076be3240 100644 --- a/packages/components/src/combobox-control/README.md +++ b/packages/components/src/combobox-control/README.md @@ -2,12 +2,6 @@ `ComboboxControl` is an enhanced version of a [`SelectControl`](/packages/components/src/select-control/README.md), with the addition of being able to search for options using a search input. -## Table of contents - -1. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) - ## Design guidelines These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/README.md#design-guidelines), but this component is better suited for when there are too many items to scroll through or load at once so you need to filter them based on user input. diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md index 696fca338e465..56f82f6ead84b 100644 --- a/packages/components/src/custom-select-control/README.md +++ b/packages/components/src/custom-select-control/README.md @@ -2,12 +2,6 @@ `CustomSelectControl` allows users to select an item from a single-option menu just like [`SelectControl`](/packages/components/src/select-control/readme.md), with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native `