From 53ca9a654397a072894ce91b00beead24b9e3f63 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 15 Feb 2024 13:44:00 +0100 Subject: [PATCH 01/14] Quote block: button for cite add/remove --- packages/block-library/src/quote/edit.js | 52 +++++++++------------ packages/block-library/src/utils/caption.js | 21 +++++---- 2 files changed, 33 insertions(+), 40 deletions(-) diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index a801459432ffa..f85cb04ef8171 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -10,14 +10,12 @@ import { __ } from '@wordpress/i18n'; import { AlignmentControl, BlockControls, - RichText, useBlockProps, useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; import { BlockQuotation } from '@wordpress/components'; import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; -import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { Platform, useEffect } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -25,6 +23,7 @@ import deprecated from '@wordpress/deprecated'; * Internal dependencies */ import { migrateToQuoteV2 } from './deprecated'; +import { Caption } from '../utils/caption'; const isWebPlatform = Platform.OS === 'web'; @@ -74,7 +73,7 @@ export default function QuoteEdit( { className, style, } ) { - const { textAlign, citation } = attributes; + const { textAlign } = attributes; useMigrateOnLoad( attributes, clientId ); @@ -114,33 +113,26 @@ export default function QuoteEdit( { { innerBlocksProps.children } - { ( ! RichText.isEmpty( citation ) || hasSelection ) && ( - { - setAttributes( { - citation: nextCitation, - } ); - } } - __unstableMobileNoFocusOnMount - aria-label={ __( 'Quote citation' ) } - placeholder={ - // translators: placeholder text used for the - // citation - __( 'Add citation' ) - } - className="wp-block-quote__citation" - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( - createBlock( getDefaultBlockName() ) - ) - } - { ...( ! isWebPlatform ? { textAlign } : {} ) } - /> - ) } + ); diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js index 57f034c76c6ed..6c1a0fde3bda8 100644 --- a/packages/block-library/src/utils/caption.js +++ b/packages/block-library/src/utils/caption.js @@ -26,7 +26,7 @@ import { unlock } from '../lock-unlock'; const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis ); export function Caption( { - key = 'caption', + attributeKey = 'caption', attributes, setAttributes, isSelected, @@ -36,8 +36,12 @@ export function Caption( { showToolbarButton = true, className, disableEditing, + tagName = 'figcaption', + addLabel, + removeLabel, + ...props } ) { - const caption = attributes[ key ]; + const caption = attributes[ attributeKey ]; const prevCaption = usePrevious( caption ); const isCaptionEmpty = RichText.isEmpty( caption ); const isPrevCaptionEmpty = RichText.isEmpty( prevCaption ); @@ -79,19 +83,15 @@ export function Caption( { } } icon={ captionIcon } isPressed={ showCaption } - label={ - showCaption - ? __( 'Remove caption' ) - : __( 'Add caption' ) - } + label={ showCaption ? removeLabel : addLabel } /> ) } { showCaption && ( ! RichText.isEmpty( caption ) || isSelected ) && ( - setAttributes( { caption: value } ) + setAttributes( { [ attributeKey ]: value } ) } inlineToolbar __unstableOnSplitAtEnd={ () => @@ -110,6 +110,7 @@ export function Caption( { ) } disableEditing={ disableEditing } + { ...props } /> ) } From f0da0efa544f94668b82c00e9348d871ce2cb63a Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 15 Feb 2024 13:51:22 +0100 Subject: [PATCH 02/14] Same for pull quote --- packages/block-library/src/pullquote/edit.js | 50 ++++++++------------ packages/block-library/src/quote/edit.js | 17 ++----- packages/block-library/src/utils/caption.js | 4 +- 3 files changed, 27 insertions(+), 44 deletions(-) diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js index 637d83d5b4289..96efb4985520e 100644 --- a/packages/block-library/src/pullquote/edit.js +++ b/packages/block-library/src/pullquote/edit.js @@ -13,7 +13,6 @@ import { RichText, useBlockProps, } from '@wordpress/block-editor'; -import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; /** @@ -21,6 +20,7 @@ import { Platform } from '@wordpress/element'; */ import { Figure } from './figure'; import { BlockQuote } from './blockquote'; +import { Caption } from '../utils/caption'; const isWebPlatform = Platform.OS === 'web'; @@ -30,13 +30,12 @@ function PullQuoteEdit( { isSelected, insertBlocksAfter, } ) { - const { textAlign, citation, value } = attributes; + const { textAlign, value } = attributes; const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), } ); - const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected; return ( <> @@ -66,32 +65,25 @@ function PullQuoteEdit( { } textAlign="center" /> - { shouldShowCitation && ( - - setAttributes( { - citation: nextCitation, - } ) - } - className="wp-block-pullquote__citation" - __unstableMobileNoFocusOnMount - textAlign="center" - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( - createBlock( getDefaultBlockName() ) - ) - } - /> - ) } + diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index f85cb04ef8171..cc1ae41f802a0 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -15,7 +15,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { BlockQuotation } from '@wordpress/components'; -import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; +import { useDispatch, useRegistry } from '@wordpress/data'; import { Platform, useEffect } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -72,23 +72,12 @@ export default function QuoteEdit( { clientId, className, style, + isSelected, } ) { const { textAlign } = attributes; useMigrateOnLoad( attributes, clientId ); - const hasSelection = useSelect( - ( select ) => { - const { isBlockSelected, hasSelectedInnerBlock } = - select( blockEditorStore ); - return ( - hasSelectedInnerBlock( clientId, true ) || - isBlockSelected( clientId ) - ); - }, - [ clientId ] - ); - const blockProps = useBlockProps( { className: classNames( className, { [ `has-text-align-${ textAlign }` ]: textAlign, @@ -117,7 +106,7 @@ export default function QuoteEdit( { attributeKey="citation" tagName={ isWebPlatform ? 'cite' : undefined } style={ { display: 'block' } } - isSelected={ hasSelection } + isSelected={ isSelected } attributes={ attributes } setAttributes={ setAttributes } __unstableMobileNoFocusOnMount diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js index 6c1a0fde3bda8..f2eff6094b905 100644 --- a/packages/block-library/src/utils/caption.js +++ b/packages/block-library/src/utils/caption.js @@ -78,7 +78,9 @@ export function Caption( { onClick={ () => { setShowCaption( ! showCaption ); if ( showCaption && caption ) { - setAttributes( { caption: undefined } ); + setAttributes( { + [ attributeKey ]: undefined, + } ); } } } icon={ captionIcon } From 2cdfe114c86e8dcc1864279de3a5ef4e2336c4d9 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 15 Feb 2024 13:56:08 +0100 Subject: [PATCH 03/14] Forgot default props --- packages/block-library/src/utils/caption.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js index f2eff6094b905..ca32e0920a1c0 100644 --- a/packages/block-library/src/utils/caption.js +++ b/packages/block-library/src/utils/caption.js @@ -37,8 +37,8 @@ export function Caption( { className, disableEditing, tagName = 'figcaption', - addLabel, - removeLabel, + addLabel = __( 'Add caption' ), + removeLabel = __( 'Remove caption' ), ...props } ) { const caption = attributes[ attributeKey ]; From cf89990306005176b434acbfbdc5e78b698e1e15 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 20 Feb 2024 15:27:02 +0100 Subject: [PATCH 04/14] Fix icon --- packages/block-library/src/pullquote/edit.js | 2 ++ packages/block-library/src/quote/edit.js | 2 ++ packages/block-library/src/utils/caption.js | 3 ++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js index 96efb4985520e..f0d82ee4856d3 100644 --- a/packages/block-library/src/pullquote/edit.js +++ b/packages/block-library/src/pullquote/edit.js @@ -14,6 +14,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { Platform } from '@wordpress/element'; +import { verse } from '@wordpress/icons'; /** * Internal dependencies @@ -72,6 +73,7 @@ function PullQuoteEdit( { isSelected={ isSelected } attributes={ attributes } setAttributes={ setAttributes } + icon={ verse } label={ __( 'Pullquote citation text' ) } placeholder={ // translators: placeholder text used for the citation diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index cc1ae41f802a0..e3339951d66c4 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -18,6 +18,7 @@ import { BlockQuotation } from '@wordpress/components'; import { useDispatch, useRegistry } from '@wordpress/data'; import { Platform, useEffect } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; +import { verse } from '@wordpress/icons'; /** * Internal dependencies @@ -110,6 +111,7 @@ export default function QuoteEdit( { attributes={ attributes } setAttributes={ setAttributes } __unstableMobileNoFocusOnMount + icon={ verse } label={ __( 'Quote citation' ) } placeholder={ // translators: placeholder text used for the diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js index ca32e0920a1c0..b4f1788a47672 100644 --- a/packages/block-library/src/utils/caption.js +++ b/packages/block-library/src/utils/caption.js @@ -39,6 +39,7 @@ export function Caption( { tagName = 'figcaption', addLabel = __( 'Add caption' ), removeLabel = __( 'Remove caption' ), + icon = captionIcon, ...props } ) { const caption = attributes[ attributeKey ]; @@ -83,7 +84,7 @@ export function Caption( { } ); } } } - icon={ captionIcon } + icon={ icon } isPressed={ showCaption } label={ showCaption ? removeLabel : addLabel } /> From b89050147a1b5c7154e12fdd2ddf9bc9848b1534 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 20 Feb 2024 17:42:25 +0100 Subject: [PATCH 05/14] Revert pullquote --- packages/block-library/src/pullquote/edit.js | 52 +++++++++++--------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js index f0d82ee4856d3..637d83d5b4289 100644 --- a/packages/block-library/src/pullquote/edit.js +++ b/packages/block-library/src/pullquote/edit.js @@ -13,15 +13,14 @@ import { RichText, useBlockProps, } from '@wordpress/block-editor'; +import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; -import { verse } from '@wordpress/icons'; /** * Internal dependencies */ import { Figure } from './figure'; import { BlockQuote } from './blockquote'; -import { Caption } from '../utils/caption'; const isWebPlatform = Platform.OS === 'web'; @@ -31,12 +30,13 @@ function PullQuoteEdit( { isSelected, insertBlocksAfter, } ) { - const { textAlign, value } = attributes; + const { textAlign, citation, value } = attributes; const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), } ); + const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected; return ( <> @@ -66,26 +66,32 @@ function PullQuoteEdit( { } textAlign="center" /> - + { shouldShowCitation && ( + + setAttributes( { + citation: nextCitation, + } ) + } + className="wp-block-pullquote__citation" + __unstableMobileNoFocusOnMount + textAlign="center" + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( + createBlock( getDefaultBlockName() ) + ) + } + /> + ) } From 4193c3a5d2e565d6aa98c05c763f3b4cc22adff3 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 20 Feb 2024 17:50:49 +0100 Subject: [PATCH 06/14] Fix e2e tests --- test/e2e/specs/editor/blocks/quote.spec.js | 19 ++++++++++++------- .../editor/various/style-variation.spec.js | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js index d25dedd4a0a39..4f8385e92d829 100644 --- a/test/e2e/specs/editor/blocks/quote.spec.js +++ b/test/e2e/specs/editor/blocks/quote.spec.js @@ -147,7 +147,7 @@ test.describe( 'Quote', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); // Navigate to the citation to select the block. - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); expect( await editor.getEditedPostContent() ).toBe( ` @@ -168,7 +168,8 @@ test.describe( 'Quote', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( 'cite' ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); expect( await editor.getEditedPostContent() ).toBe( @@ -191,7 +192,8 @@ test.describe( 'Quote', () => { page, } ) => { await editor.insertBlock( { name: 'core/quote' } ); - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( 'cite' ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); expect( await editor.getEditedPostContent() ).toBe( @@ -211,7 +213,7 @@ test.describe( 'Quote', () => { } ) => { await editor.insertBlock( { name: 'core/quote' } ); // Select the quote - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); expect( await editor.getEditedPostContent() ).toBe( '' ); } ); @@ -238,7 +240,8 @@ test.describe( 'Quote', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( 'cite' ); await editor.transformBlockTo( 'core/pullquote' ); expect( await editor.getEditedPostContent() ).toBe( @@ -301,7 +304,8 @@ test.describe( 'Quote', () => { } ) => { await editor.insertBlock( { name: 'core/quote' } ); await page.keyboard.type( '1' ); - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( '2' ); expect( await editor.getEditedPostContent() ).toBe( ` @@ -331,7 +335,8 @@ test.describe( 'Quote', () => { } ) => { await editor.insertBlock( { name: 'core/quote' } ); await page.keyboard.type( '1' ); - await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( '2' ); await pageUtils.pressKeys( 'Shift+ArrowUp' ); let error; diff --git a/test/e2e/specs/editor/various/style-variation.spec.js b/test/e2e/specs/editor/various/style-variation.spec.js index cc13dd1ad9238..79b35c4b4a0c9 100644 --- a/test/e2e/specs/editor/various/style-variation.spec.js +++ b/test/e2e/specs/editor/various/style-variation.spec.js @@ -18,7 +18,7 @@ test.describe( 'adding blocks', () => { } ); // Select the quote block. - await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'ArrowUp' ); await editor.clickBlockToolbarButton( 'Quote' ); From dbe31899b5497eb06279a638618a7679f70d89f8 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 21 Feb 2024 12:16:30 +0100 Subject: [PATCH 07/14] Fix tests --- test/e2e/specs/editor/blocks/quote.spec.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js index 4f8385e92d829..0e0cb61781a28 100644 --- a/test/e2e/specs/editor/blocks/quote.spec.js +++ b/test/e2e/specs/editor/blocks/quote.spec.js @@ -146,8 +146,9 @@ test.describe( 'Quote', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); - // Navigate to the citation to select the block. - await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( + 'Select parent block: Quote' + ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); expect( await editor.getEditedPostContent() ).toBe( ` @@ -168,7 +169,9 @@ test.describe( 'Quote', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); - await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( + 'Select parent block: Quote' + ); await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( 'cite' ); await editor.clickBlockOptionsMenuItem( 'Ungroup' ); @@ -240,7 +243,7 @@ test.describe( 'Quote', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'two' ); - await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Select parent block: Quote' ); await editor.clickBlockToolbarButton( 'Add citation' ); await page.keyboard.type( 'cite' ); await editor.transformBlockTo( 'core/pullquote' ); From c11e78713bad9d8eb65e036bfe142e131a3d035a Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 27 Mar 2024 20:08:35 +0200 Subject: [PATCH 08/14] Fix e2e --- test/e2e/specs/editor/plugins/block-variations.spec.js | 2 +- test/e2e/specs/editor/various/style-variation.spec.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js index 9f12c987efd39..4c5488af4443f 100644 --- a/test/e2e/specs/editor/plugins/block-variations.spec.js +++ b/test/e2e/specs/editor/plugins/block-variations.spec.js @@ -133,7 +133,7 @@ test.describe( 'Block variations', () => { await page.keyboard.press( 'Enter' ); // Select the quote block. - await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'ArrowUp' ); await expect( page diff --git a/test/e2e/specs/editor/various/style-variation.spec.js b/test/e2e/specs/editor/various/style-variation.spec.js index 79b35c4b4a0c9..136b8284b1ecf 100644 --- a/test/e2e/specs/editor/various/style-variation.spec.js +++ b/test/e2e/specs/editor/various/style-variation.spec.js @@ -17,9 +17,6 @@ test.describe( 'adding blocks', () => { attributes: { value: '

Quote content

' }, } ); - // Select the quote block. - await page.keyboard.press( 'ArrowUp' ); - await editor.clickBlockToolbarButton( 'Quote' ); await page.click( 'role=menuitem[name="Plain"i]' ); From 5a24ce37e897922a5dc2c21e695dd12c03e68274 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 27 Mar 2024 20:48:24 +0200 Subject: [PATCH 09/14] Try to stabilise test --- .../inner-blocks-render-appender.spec.js | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js index 9886bd00fe2b6..f2c68281a36f4 100644 --- a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js +++ b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js @@ -71,41 +71,52 @@ test.describe( 'RenderAppender prop of InnerBlocks', () => { name: 'test/inner-blocks-render-appender-dynamic', } ); - const dynamimcAppender = page.locator( '.my-dynamic-blocks-appender' ); - const addBlockBtn = dynamimcAppender.getByRole( 'button', { - name: 'Add block', - } ); + const addBlockBtn = page + .locator( '.my-dynamic-blocks-appender' ) + .getByRole( 'button', { + name: 'Add block', + } ); // Verify if the custom block appender text is the expected one. - await expect( dynamimcAppender ).toContainText( - 'Empty Blocks Appender' - ); + await expect( + page.locator( '.my-dynamic-blocks-appender' ) + ).toContainText( 'Empty Blocks Appender' ); // Open the inserter of our custom block appender. await addBlockBtn.click(); // Verify if the blocks the custom inserter is rendering are the expected ones. - const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } ); - await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [ - 'Quote', - 'Video', - ] ); + await expect( + page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option' ) + ).toHaveText( [ 'Quote', 'Video' ] ); // Insert a quote block. - await blockListBox.getByRole( 'option', { name: 'Quote' } ).click(); + await page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option', { name: 'Quote' } ) + .click(); // Verify if the custom block appender text changed as expected. await expect( - dynamimcAppender.getByText( 'Single Blocks Appender' ) + page + .locator( '.my-dynamic-blocks-appender' ) + .getByText( 'Single Blocks Appender' ) ).toBeVisible(); // Insert a video block. await addBlockBtn.click(); - await blockListBox.getByRole( 'option', { name: 'Video' } ).click(); + await page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option', { name: 'Video' } ) + .click(); // Verify if the custom block appender text changed as expected. await expect( - dynamimcAppender.getByText( 'Multiple Blocks Appender' ) + page + .locator( '.my-dynamic-blocks-appender' ) + .getByText( 'Multiple Blocks Appender' ) ).toBeVisible(); // Verify that the custom appender button is now not being rendered. From 21befde55a4950eb3896cb7c92a9dc9c1d811dc3 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 28 Mar 2024 07:37:00 +0200 Subject: [PATCH 10/14] Avoid native circular dependency --- packages/block-library/src/utils/caption.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js index b4f1788a47672..394e032291c6e 100644 --- a/packages/block-library/src/utils/caption.js +++ b/packages/block-library/src/utils/caption.js @@ -23,8 +23,6 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; */ import { unlock } from '../lock-unlock'; -const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis ); - export function Caption( { attributeKey = 'caption', attributes, @@ -44,6 +42,7 @@ export function Caption( { } ) { const caption = attributes[ attributeKey ]; const prevCaption = usePrevious( caption ); + const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis ); const isCaptionEmpty = RichText.isEmpty( caption ); const isPrevCaptionEmpty = RichText.isEmpty( prevCaption ); const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty ); From d2433cfaba84800b49674d1c4d0cee2d336ca194 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 28 Mar 2024 08:09:30 +0200 Subject: [PATCH 11/14] Try again to stabilise test --- .../inner-blocks-render-appender.spec.js | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js index f2c68281a36f4..08173f810c3c3 100644 --- a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js +++ b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js @@ -71,19 +71,18 @@ test.describe( 'RenderAppender prop of InnerBlocks', () => { name: 'test/inner-blocks-render-appender-dynamic', } ); - const addBlockBtn = page - .locator( '.my-dynamic-blocks-appender' ) - .getByRole( 'button', { - name: 'Add block', - } ); - // Verify if the custom block appender text is the expected one. await expect( page.locator( '.my-dynamic-blocks-appender' ) ).toContainText( 'Empty Blocks Appender' ); // Open the inserter of our custom block appender. - await addBlockBtn.click(); + await page + .locator( '.my-dynamic-blocks-appender' ) + .getByRole( 'button', { + name: 'Add block', + } ) + .click(); // Verify if the blocks the custom inserter is rendering are the expected ones. await expect( @@ -106,7 +105,12 @@ test.describe( 'RenderAppender prop of InnerBlocks', () => { ).toBeVisible(); // Insert a video block. - await addBlockBtn.click(); + await page + .locator( '.my-dynamic-blocks-appender' ) + .getByRole( 'button', { + name: 'Add block', + } ) + .click(); await page .getByRole( 'listbox', { name: 'Blocks' } ) .getByRole( 'option', { name: 'Video' } ) @@ -120,7 +124,11 @@ test.describe( 'RenderAppender prop of InnerBlocks', () => { ).toBeVisible(); // Verify that the custom appender button is now not being rendered. - await expect( addBlockBtn ).toBeHidden(); + await expect( + page.locator( '.my-dynamic-blocks-appender' ).getByRole( 'button', { + name: 'Add block', + } ) + ).toBeHidden(); // Verify if the post content is the expected one. await expect.poll( editor.getBlocks ).toMatchObject( [ From 2bf1dbd58e8d9104057afd6fea697046cbddf488 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 28 Mar 2024 18:31:01 +0200 Subject: [PATCH 12/14] Re-merged change by @dcalhoun from #59097 --- .../block-editor/src/components/rich-text/index.js | 1 - .../src/components/rich-text/index.native.js | 12 ++++++------ .../src/components/rich-text/native/index.native.js | 4 ++-- packages/block-library/src/button/edit.native.js | 2 +- packages/block-library/src/quote/edit.js | 2 +- packages/block-library/src/quote/test/edit.native.js | 10 ++++------ .../editor/src/components/post-title/index.native.js | 2 +- 7 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 3d1725c54fe71..91fa3bfd9aaad 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -75,7 +75,6 @@ function removeNativeProps( props ) { fontStyle, minWidth, maxWidth, - setRef, disableSuggestions, disableAutocorrection, ...restProps diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 7739fcf357c90..41e5a7635d2f0 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -94,14 +94,13 @@ export function RichTextWrapper( minWidth, maxWidth, onBlur, - setRef, disableSuggestions, disableAutocorrection, containerWidth, onEnter: onCustomEnter, ...props }, - forwardedRef + providedRef ) { const instanceId = useInstanceId( RichTextWrapper ); @@ -529,13 +528,13 @@ export function RichTextWrapper( [ onReplace, __unstableMarkAutomaticChange ] ); - const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] ); + const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] ); return ( ( + +) ); /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md 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 7a775cad34648..8b4c871bda7bb 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 @@ -1222,8 +1222,8 @@ export class RichText extends Component { ref={ ( ref ) => { this._editor = ref; - if ( this.props.setRef ) { - this.props.setRef( ref ); + if ( this.props.nativeEditorRef ) { + this.props.nativeEditorRef( ref ); } } } style={ { diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 214be33c7df2e..e975710f821e1 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -494,7 +494,7 @@ function ButtonEdit( props ) { ) } { }, } ); - // Await inner blocks to be rendered - const citationBlock = await waitFor( () => - screen.getByPlaceholderText( 'Add citation' ) - ); // Act fireEvent.press( quoteBlock ); - // screen.debug(); let quoteTextInput = within( quoteBlock ).getByPlaceholderText( 'Start writing…' ); typeInRichText( quoteTextInput, 'A great statement.' ); @@ -61,6 +55,10 @@ describe( 'Quote', () => { 'Start writing…' )[ 1 ]; typeInRichText( quoteTextInput, 'Again.' ); + fireEvent.press( screen.getByLabelText( 'Navigate Up' ) ); + fireEvent.press( screen.getByLabelText( 'Add citation' ) ); + const citationBlock = + await screen.findByPlaceholderText( 'Add citation' ); const citationTextInput = within( citationBlock ).getByPlaceholderText( 'Add citation' ); typeInRichText( citationTextInput, 'A person' ); diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index 2d90472af7200..dc7534c28a79f 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -164,7 +164,7 @@ class PostTitle extends Component { accessibilityHint={ __( 'Updates the title.' ) } > Date: Thu, 28 Mar 2024 12:58:58 -0500 Subject: [PATCH 13/14] test: Fix Rich Text failures (#60290) * test: Define missing `logException` native module mock Prevent cryptic test failure messages originating from invoking this undefined method, which prevented the original error message from surfacing in the test failure log. * refactor: Export private API Rich Text module This export was added for interoperability with the web version modified in https://github.com/WordPress/gutenberg/pull/58916. --- .../src/components/rich-text/index.native.js | 15 +++++++++------ packages/block-editor/src/private-apis.native.js | 2 ++ test/native/setup.js | 1 + 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 41e5a7635d2f0..1be6551302edf 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -655,29 +655,32 @@ export function RichTextWrapper( ); } -const ForwardedRichTextContainer = withDeprecations( +// This export does not actually implement a private API, but was exported +// under this name for interoperability with the web version of the RichText +// component. +export const PrivateRichText = withDeprecations( forwardRef( RichTextWrapper ) ); -ForwardedRichTextContainer.Content = Content; +PrivateRichText.Content = Content; -ForwardedRichTextContainer.isEmpty = ( value ) => { +PrivateRichText.isEmpty = ( value ) => { return ! value || value.length === 0; }; -ForwardedRichTextContainer.Content.defaultProps = { +PrivateRichText.Content.defaultProps = { format: 'string', value: '', }; -ForwardedRichTextContainer.Raw = forwardRef( ( props, ref ) => ( +PrivateRichText.Raw = forwardRef( ( props, ref ) => ( ) ); /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md */ -export default ForwardedRichTextContainer; +export default PrivateRichText; export { RichTextShortcut } from './shortcut'; export { RichTextToolbarButton } from './toolbar-button'; export { __unstableRichTextInputEvent } from './input-event'; diff --git a/packages/block-editor/src/private-apis.native.js b/packages/block-editor/src/private-apis.native.js index 7a0328eba2f6f..f99d523933106 100644 --- a/packages/block-editor/src/private-apis.native.js +++ b/packages/block-editor/src/private-apis.native.js @@ -5,6 +5,7 @@ import * as globalStyles from './components/global-styles'; import { ExperimentalBlockEditorProvider } from './components/provider'; import { getRichTextValues } from './components/rich-text/get-rich-text-values'; import { lock } from './lock-unlock'; +import { PrivateRichText } from './components/rich-text/'; /** * Private @wordpress/block-editor APIs. @@ -14,4 +15,5 @@ lock( privateApis, { ...globalStyles, ExperimentalBlockEditorProvider, getRichTextValues, + PrivateRichText, } ); diff --git a/test/native/setup.js b/test/native/setup.js index 54a416bd43660..4fd511f38e91b 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -81,6 +81,7 @@ jest.mock( '@wordpress/api-fetch', () => { jest.mock( '@wordpress/react-native-bridge', () => { return { addEventListener: jest.fn(), + logException: jest.fn(), mediaUploadSync: jest.fn(), removeEventListener: jest.fn(), requestBlockTypeImpressions: jest.fn( ( callback ) => { From 52b566ad88c0ca09b98223529f07f80c63d3f19b Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 29 Mar 2024 18:45:58 +0200 Subject: [PATCH 14/14] Fix e2e test --- .../inner-blocks-render-appender.spec.js | 62 +++++++------------ 1 file changed, 23 insertions(+), 39 deletions(-) diff --git a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js index 08173f810c3c3..a76d6c6439e2e 100644 --- a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js +++ b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js @@ -71,64 +71,48 @@ test.describe( 'RenderAppender prop of InnerBlocks', () => { name: 'test/inner-blocks-render-appender-dynamic', } ); + const dynamimcAppender = page.locator( '.my-dynamic-blocks-appender' ); + const addBlockBtn = dynamimcAppender.getByRole( 'button', { + name: 'Add block', + } ); + // Verify if the custom block appender text is the expected one. - await expect( - page.locator( '.my-dynamic-blocks-appender' ) - ).toContainText( 'Empty Blocks Appender' ); + await expect( dynamimcAppender ).toContainText( + 'Empty Blocks Appender' + ); // Open the inserter of our custom block appender. - await page - .locator( '.my-dynamic-blocks-appender' ) - .getByRole( 'button', { - name: 'Add block', - } ) - .click(); + await addBlockBtn.click(); // Verify if the blocks the custom inserter is rendering are the expected ones. - await expect( - page - .getByRole( 'listbox', { name: 'Blocks' } ) - .getByRole( 'option' ) - ).toHaveText( [ 'Quote', 'Video' ] ); + const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } ); + await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [ + 'Quote', + 'Video', + ] ); // Insert a quote block. - await page - .getByRole( 'listbox', { name: 'Blocks' } ) - .getByRole( 'option', { name: 'Quote' } ) - .click(); + await blockListBox.getByRole( 'option', { name: 'Quote' } ).click(); + + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.press( 'ArrowUp' ); // Verify if the custom block appender text changed as expected. await expect( - page - .locator( '.my-dynamic-blocks-appender' ) - .getByText( 'Single Blocks Appender' ) + dynamimcAppender.getByText( 'Single Blocks Appender' ) ).toBeVisible(); // Insert a video block. - await page - .locator( '.my-dynamic-blocks-appender' ) - .getByRole( 'button', { - name: 'Add block', - } ) - .click(); - await page - .getByRole( 'listbox', { name: 'Blocks' } ) - .getByRole( 'option', { name: 'Video' } ) - .click(); + await addBlockBtn.click(); + await blockListBox.getByRole( 'option', { name: 'Video' } ).click(); // Verify if the custom block appender text changed as expected. await expect( - page - .locator( '.my-dynamic-blocks-appender' ) - .getByText( 'Multiple Blocks Appender' ) + dynamimcAppender.getByText( 'Multiple Blocks Appender' ) ).toBeVisible(); // Verify that the custom appender button is now not being rendered. - await expect( - page.locator( '.my-dynamic-blocks-appender' ).getByRole( 'button', { - name: 'Add block', - } ) - ).toBeHidden(); + await expect( addBlockBtn ).toBeHidden(); // Verify if the post content is the expected one. await expect.poll( editor.getBlocks ).toMatchObject( [