-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Query Loop: Add useBlockPreview, fix Query Loop wide alignment in the…
… editor (#36431) * Add useBlockPreview, fix Query Loop wide alignment in the editor * Add test for useDisabled * Add minimal test for useBlockPreview hook * Add useDisabled test to cover updates to a component * Update useBlockPreview test to ensure elements within the block content are disabled * Switch queryBy to getBy to ensure check for block is stricter * Remove comment * Export useBlockPreview as __experimentalUseBlockPreview * Optimise block preview via memoizing the component, and always rendering a preview for each block context * Tidy up settings useMemo Co-authored-by: Ramon <[email protected]> * Add documentation for useDisabled hook * Move documentation to the hook Co-authored-by: Ramon <[email protected]>
- Loading branch information
1 parent
80ce42f
commit 7a050db
Showing
8 changed files
with
459 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
packages/block-editor/src/components/block-preview/test/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen, waitFor } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| registerBlockType, | ||
| unregisterBlockType, | ||
| createBlock, | ||
| } from '@wordpress/blocks'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { useBlockPreview } from '../'; | ||
|
|
||
| jest.mock( '@wordpress/dom', () => { | ||
| const focus = jest.requireActual( '../../../../../dom/src' ).focus; | ||
|
|
||
| return { | ||
| focus: { | ||
| ...focus, | ||
| focusable: { | ||
| ...focus.focusable, | ||
| find( context ) { | ||
| // In JSDOM, all elements have zero'd widths and height. | ||
| // This is a metric for focusable's `isVisible`, so find | ||
| // and apply an arbitrary non-zero width. | ||
| Array.from( context.querySelectorAll( '*' ) ).forEach( | ||
| ( element ) => { | ||
| Object.defineProperties( element, { | ||
| offsetWidth: { | ||
| get: () => 1, | ||
| configurable: true, | ||
| }, | ||
| } ); | ||
| } | ||
| ); | ||
|
|
||
| return focus.focusable.find( ...arguments ); | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| } ); | ||
|
|
||
| describe( 'useBlockPreview', () => { | ||
| beforeAll( () => { | ||
| registerBlockType( 'core/test-block', { | ||
| save: () => ( | ||
| <div> | ||
| Test block save view | ||
| <button>Button</button> | ||
| </div> | ||
| ), | ||
| edit: () => ( | ||
| <div> | ||
| Test block edit view | ||
| <button>Button</button> | ||
| </div> | ||
| ), | ||
| category: 'text', | ||
| title: 'test block', | ||
| } ); | ||
| } ); | ||
|
|
||
| afterAll( () => { | ||
| unregisterBlockType( 'core/test-block' ); | ||
| } ); | ||
|
|
||
| function BlockPreviewComponent( { blocks, className } ) { | ||
| const blockPreviewProps = useBlockPreview( { | ||
| blocks, | ||
| props: { className }, | ||
| } ); | ||
| return <div { ...blockPreviewProps } />; | ||
| } | ||
|
|
||
| it( 'will render a block preview with minimal nesting', async () => { | ||
| const blocks = []; | ||
| blocks.push( createBlock( 'core/test-block' ) ); | ||
|
|
||
| const { container } = render( | ||
| <BlockPreviewComponent | ||
| className="test-container-classname" | ||
| blocks={ blocks } | ||
| /> | ||
| ); | ||
|
|
||
| // Test block and block contents are rendered. | ||
| const previewedBlock = screen.getByLabelText( 'Block: test block' ); | ||
| const previewedBlockContents = screen.getByText( | ||
| 'Test block edit view' | ||
| ); | ||
| expect( previewedBlockContents ).toBeInTheDocument(); | ||
|
|
||
| // Test elements within block contents are disabled. | ||
| await waitFor( () => { | ||
| const button = screen.getByText( 'Button' ); | ||
| expect( button.hasAttribute( 'disabled' ) ).toBe( true ); | ||
| } ); | ||
|
|
||
| // Ensure the block preview class names are merged with the component's class name. | ||
| expect( container.firstChild.className ).toBe( | ||
| 'test-container-classname block-editor-block-preview__live-content components-disabled' | ||
| ); | ||
|
|
||
| // Ensure there is no nesting between the parent component and rendered blocks. | ||
| expect( container.firstChild.firstChild ).toBe( previewedBlock ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.