Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract the pattern overrides toolbar indicator from the block-editor package #62514

Merged
merged 2 commits into from
Jun 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 6 additions & 22 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
@@ -35,9 +35,8 @@ import { store as blockEditorStore } from '../../store';
import __unstableBlockNameContext from './block-name-context';
import NavigableToolbar from '../navigable-toolbar';
import Shuffle from './shuffle';
import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator';
import { useHasBlockToolbar } from './use-has-block-toolbar';
import { canBindBlock } from '../../hooks/use-bindings-attributes';

/**
* Renders the block toolbar.
*
@@ -62,18 +61,15 @@ export function PrivateBlockToolbar( {
blockClientIds,
isDefaultEditingMode,
blockType,
blockName,
toolbarKey,
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
hasParentPattern,
} = useSelect( ( select ) => {
const {
getBlockName,
getBlockMode,
getBlockParents,
getBlockParentsByBlockName,
getSelectedBlockClientIds,
isBlockValid,
getBlockRootClientId,
@@ -96,18 +92,14 @@ export function PrivateBlockToolbar( {
const isVisual = selectedBlockClientIds.every(
( id ) => getBlockMode( id ) === 'visual'
);
const bindings = getBlockAttributes( selectedBlockClientId )?.metadata
?.bindings;
const parentPatternClientId = getBlockParentsByBlockName(
selectedBlockClientId,
'core/block',
true
)[ 0 ];
const _isUsingBindings = selectedBlockClientIds.every(
( clientId ) =>
!! getBlockAttributes( clientId )?.metadata?.bindings
);
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
isDefaultEditingMode: _isDefaultEditingMode,
blockName: _blockName,
blockType: selectedBlockClientId && getBlockType( _blockName ),
shouldShowVisualToolbar: isValid && isVisual,
rootClientId: blockRootClientId,
@@ -122,8 +114,7 @@ export function PrivateBlockToolbar( {
) &&
selectedBlockClientIds.length === 1 &&
_isDefaultEditingMode,
isUsingBindings: !! bindings,
hasParentPattern: !! parentPatternClientId,
isUsingBindings: _isUsingBindings,
};
}, [] );

@@ -176,13 +167,6 @@ export function PrivateBlockToolbar( {
{ ! isMultiToolbar &&
isLargeViewport &&
isDefaultEditingMode && <BlockParentSelector /> }
{ isUsingBindings &&
hasParentPattern &&
canBindBlock( blockName ) && (
<PatternOverridesToolbarIndicator
clientIds={ blockClientIds }
/>
) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
( isDefaultEditingMode || isSynced ) && (
<div
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to packages/patterns/src/components/pattern-overrides-block-controls.js.

This file was deleted.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to packages/patterns/src/components/style.scss.

This file was deleted.

2 changes: 2 additions & 0 deletions packages/block-editor/src/private-apis.js
Original file line number Diff line number Diff line change
@@ -43,6 +43,7 @@ import { PrivateBlockPopover } from './components/block-popover';
import { PrivateInserterLibrary } from './components/inserter/library';
import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
import useBlockDisplayTitle from './components/block-title/use-block-display-title';

/**
* Private @wordpress/block-editor APIs.
@@ -86,4 +87,5 @@ lock( privateApis, {
PrivateBlockPopover,
PrivatePublishDateTimePicker,
useSpacingSizes,
useBlockDisplayTitle,
} );
1 change: 0 additions & 1 deletion packages/block-editor/src/style.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "./autocompleters/style.scss";
@import "./components/block-alignment-control/style.scss";
@import "./components/pattern-overrides-toolbar-indicator/style.scss";
@import "./components/block-canvas/style.scss";
@import "./components/block-icon/style.scss";
@import "./components/block-inspector/style.scss";
2 changes: 2 additions & 0 deletions packages/editor/src/hooks/pattern-overrides.js
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import { unlock } from '../lock-unlock';
const {
PatternOverridesControls,
ResetOverridesControl,
PatternOverridesBlockControls,
PATTERN_TYPES,
PARTIAL_SYNCING_SUPPORTED_BLOCKS,
PATTERN_SYNC_TYPES,
@@ -43,6 +44,7 @@ const withPatternOverrideControls = createHigherOrderComponent(
{ props.isSelected && isSupportedBlock && (
<ControlsWithStoreSubscription { ...props } />
) }
{ isSupportedBlock && <PatternOverridesBlockControls /> }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a shame there's no way to add a condition like ( props.isSelected || props.isMultiselected ) here

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably add a comment there to avoid accidental regression.

</>
);
}
Loading

Unchanged files with check annotations Beta

.getByRole( 'toolbar', { name: 'Document tools' } )
.getByRole( 'button', { name: 'Undo' } )
.click();
await expect( headingBlock ).toHaveText( 'Heading (edited)' );

Check failure on line 607 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button

1) [chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) Expected string: "Heading (edited)" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 605 | .getByRole( 'button', { name: 'Undo' } ) 606 | .click(); > 607 | await expect( headingBlock ).toHaveText( 'Heading (edited)' ); | ^ 608 | 609 | // Reset the individual heading block. 610 | await editor.selectBlocks( headingBlock ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:607:32

Check failure on line 607 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button

1) [chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) Expected string: "Heading (edited)" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 605 | .getByRole( 'button', { name: 'Undo' } ) 606 | .click(); > 607 | await expect( headingBlock ).toHaveText( 'Heading (edited)' ); | ^ 608 | 609 | // Reset the individual heading block. 610 | await editor.selectBlocks( headingBlock ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:607:32

Check failure on line 607 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button

1) [chromium] › editor/various/pattern-overrides.spec.js:528:2 › Pattern Overrides › resets overrides after clicking the reset button Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) Expected string: "Heading (edited)" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Heading' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 605 | .getByRole( 'button', { name: 'Undo' } ) 606 | .click(); > 607 | await expect( headingBlock ).toHaveText( 'Heading (edited)' ); | ^ 608 | 609 | // Reset the individual heading block. 610 | await editor.selectBlocks( headingBlock ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:607:32
// Reset the individual heading block.
await editor.selectBlocks( headingBlock );
// Undo/Redo should work
await undoButton.click();
await expect( paragraphBlock ).toHaveText( 'Paragraph*' );

Check failure on line 678 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo

2) [chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) Expected string: "Paragraph*" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 676 | // Undo/Redo should work 677 | await undoButton.click(); > 678 | await expect( paragraphBlock ).toHaveText( 'Paragraph*' ); | ^ 679 | await redoButton.click(); 680 | await expect( paragraphBlock ).toHaveText( 'Paragraph' ); 681 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:678:34

Check failure on line 678 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo

2) [chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) Expected string: "Paragraph*" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 676 | // Undo/Redo should work 677 | await undoButton.click(); > 678 | await expect( paragraphBlock ).toHaveText( 'Paragraph*' ); | ^ 679 | await redoButton.click(); 680 | await expect( paragraphBlock ).toHaveText( 'Paragraph' ); 681 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:678:34

Check failure on line 678 in test/e2e/specs/editor/various/pattern-overrides.spec.js

GitHub Actions / Playwright - 4

[chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo

2) [chromium] › editor/various/pattern-overrides.spec.js:621:2 › Pattern Overrides › resets overrides immediately should not break undo/redo Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected) Locator: frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) Expected string: "Paragraph*" Received string: "This block has encountered an error and cannot be previewed." Call log: - expect.toHaveText with timeout 5000ms - waiting for frameLocator('[name="editor-canvas"]').getByRole('document', { name: 'Block: Pattern' }).getByRole('document', { name: 'Block: Paragraph' }) - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." - locator resolved to <div tabindex="0" inert="true" role="document" data-t…>…</div> - unexpected value "This block has encountered an error and cannot be previewed." 676 | // Undo/Redo should work 677 | await undoButton.click(); > 678 | await expect( paragraphBlock ).toHaveText( 'Paragraph*' ); | ^ 679 | await redoButton.click(); 680 | await expect( paragraphBlock ).toHaveText( 'Paragraph' ); 681 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/pattern-overrides.spec.js:678:34
await redoButton.click();
await expect( paragraphBlock ).toHaveText( 'Paragraph' );
} );