diff --git a/packages/block-editor/src/private-apis.native.js b/packages/block-editor/src/private-apis.native.js index 5555e00477e7b5..7a0328eba2f6fb 100644 --- a/packages/block-editor/src/private-apis.native.js +++ b/packages/block-editor/src/private-apis.native.js @@ -3,6 +3,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'; /** @@ -12,4 +13,5 @@ export const privateApis = {}; lock( privateApis, { ...globalStyles, ExperimentalBlockEditorProvider, + getRichTextValues, } ); diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js index 724b79c1d85d74..0b719dd06609df 100644 --- a/packages/block-library/src/block/test/edit.native.js +++ b/packages/block-library/src/block/test/edit.native.js @@ -6,6 +6,8 @@ import { initializeEditor, fireEvent, within, + setupApiFetch, + triggerBlockListLayout, } from 'test/helpers'; /** @@ -42,6 +44,7 @@ const getMockedReusableBlock = ( id ) => ( { id, title: { raw: `Reusable block - ${ id }` }, type: 'wp_block', + meta: { footnotes: '' }, } ); beforeAll( () => { @@ -187,4 +190,68 @@ describe( 'Synced patterns', () => { expect( reusableBlock ).toBeDefined(); expect( headingInnerBlock ).toBeDefined(); } ); + + it( 'renders block after content is updated due to a side effect', async () => { + // We have to use different ids because entities are cached in memory. + const id = 5; + const initialHtml = ``; + const endpoint = `/wp/v2/blocks/${ id }`; + const fetchMedia = { + request: { + path: `/wp/v2/media/1?context=edit`, + }, + response: { + source_url: 'https://cldup.com/cXyG__fTLN.jpg', + id: 1, + // We need to include the sizes to trigger the side effect. + media_details: { + sizes: { + large: { + source_url: + 'https://cldup.com/cXyG__fTLN.jpg?w=500', + }, + }, + }, + }, + }; + + // Return mocked response for the block endpoint. + fetchRequest.mockImplementation( ( { path } ) => { + let response = {}; + if ( path.startsWith( endpoint ) ) { + response = getMockedReusableBlock( id ); + } + // Replace content with an Image block to trigger a side effect. + // The side effect will be produced when the `source` attribute is replaced + // with an URL that includes the width query parameter: + // https://cldup.com/cXyG__fTLN.jpg => https://cldup.com/cXyG__fTLN.jpg?w=500 + response.content.raw = ` +
+`; + return Promise.resolve( response ); + } ); + + const screen = await initializeEditor( { + initialHtml, + } ); + + const reusableBlock = await screen.findByLabelText( + /Pattern Block\. Row 1/ + ); + + // Mock media fetch requests + setupApiFetch( [ fetchMedia ] ); + + await triggerBlockListLayout( + within( reusableBlock ).getByTestId( 'block-list-wrapper' ) + ); + + const imageBlock = + await within( reusableBlock ).getByLabelText( + 'Image Block. Row 1' + ); + + expect( reusableBlock ).toBeDefined(); + expect( imageBlock ).toBeDefined(); + } ); } );