Skip to content

Commit

Permalink
Patterns: add a hint about the rename of reusable blocks to menu and …
Browse files Browse the repository at this point in the history
…inserter (#51771)

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
  • Loading branch information
2 people authored and tellthemachines committed Jul 7, 2023
1 parent f060b18 commit 14bb146
Show file tree
Hide file tree
Showing 10 changed files with 103 additions and 10 deletions.
4 changes: 4 additions & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -680,6 +680,10 @@ _Related_

Private @wordpress/block-editor APIs.

### ReusableBlocksRenameHint

Undocumented declaration.

### RichText

_Related_
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,8 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop

export { default as BlockEditorProvider } from './provider';
export { default as useSetting } from './use-setting';

/*
* The following rename hint component can be removed in 6.4.
*/
export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
import { useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { close } from '@wordpress/icons';
import { store as preferencesStore } from '@wordpress/preferences';

const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';

export default function ReusableBlocksRenameHint() {
const isReusableBlocksRenameHint = useSelect(
( select ) =>
select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
[]
);

const ref = useRef();

const { set: setPreference } = useDispatch( preferencesStore );
if ( ! isReusableBlocksRenameHint ) {
return null;
}

return (
<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
<div className="reusable-blocks-menu-items__rename-hint-content">
{ __(
'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
) }
</div>
<Button
className="reusable-blocks-menu-items__rename-hint-dismiss"
icon={ close }
iconSize="16"
label={ __( 'Dismiss hint' ) }
onClick={ () => {
// Retain focus when dismissing the element.
const previousElement = focus.tabbable.findPrevious(
ref.current
);
previousElement?.focus();
setPreference( 'core', PREFERENCE_NAME, false );
} }
showTooltip={ false }
/>
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import BlockTypesList from '../block-types-list';
import InserterPanel from './panel';
import InserterNoResults from './no-results';
import useBlockTypesState from './hooks/use-block-types-state';
import ReusableBlocksRenameHint from './reusable-block-rename-hint';

function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
const [ items, , , onSelectItem ] = useBlockTypesState(
Expand Down Expand Up @@ -54,6 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
return (
<>
<div className="block-editor-inserter__hint">
<ReusableBlocksRenameHint />
</div>
<ReusableBlocksList
onHover={ onHover }
onInsert={ onInsert }
Expand Down
28 changes: 28 additions & 0 deletions packages/block-editor/src/components/inserter/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -711,3 +711,31 @@ $block-inserter-tabs-height: 44px;
margin: 0;
}
}

.block-editor-inserter__hint {
margin: $grid-unit-20 $grid-unit-20 0;
}

.reusable-blocks-menu-items__rename-hint {
align-items: top;
background: $gray-100;
border-radius: $radius-block-ui;
color: $gray-900;
display: flex;
flex-direction: row;
max-width: 380px;
}

.reusable-blocks-menu-items__rename-hint-content {
margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
}

.reusable-blocks-menu-items__rename-hint-dismiss {
// The dismiss button has a lot of empty space through its padding.
// Apply margin to visually align the icon with the top of the text to its left.
margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
}

.components-menu-group .reusable-blocks-menu-items__rename-hint {
margin: 0;
}
2 changes: 1 addition & 1 deletion packages/e2e-test-utils/src/create-reusable-block.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const createReusableBlock = async ( content, title ) => {
await page.keyboard.type( content );

await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Create pattern' );
await clickMenuItem( 'Create pattern/reusable block' );
const nameInput = await page.waitForSelector(
reusableBlockNameInputSelector
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => {
} );
it( 'should prevent deleting multiple selected blocks from inputs', async () => {
await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Create pattern' );
await clickMenuItem( 'Create pattern/reusable block' );
const reusableBlockNameInputSelector =
'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
const nameInput = await page.waitForSelector(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ describe( 'Reusable blocks', () => {

// Convert block to a reusable block.
await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Create pattern' );
await clickMenuItem( 'Create pattern/reusable block' );

// Set title.
const nameInput = await page.waitForSelector(
Expand Down Expand Up @@ -383,7 +383,7 @@ describe( 'Reusable blocks', () => {

// Convert to reusable.
await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Create pattern' );
await clickMenuItem( 'Create pattern/reusable block' );
const nameInput = await page.waitForSelector(
reusableBlockNameInputSelector
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function PatternsList( { categoryId, type } ) {
<Grid
icon={ symbol }
categoryId={ categoryId }
label={ __( 'Synced patterns' ) }
label={ __( 'Synced' ) }
items={ syncedPatterns }
/>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
import {
BlockSettingsMenuControls,
store as blockEditorStore,
ReusableBlocksRenameHint,
} from '@wordpress/block-editor';
import { useCallback, useState } from '@wordpress/element';
import {
Expand Down Expand Up @@ -140,7 +141,7 @@ export default function ReusableBlockConvertButton( {
icon={ symbol }
onClick={ () => setIsModalOpen( true ) }
>
{ __( 'Create pattern' ) }
{ __( 'Create pattern/reusable block' ) }
</MenuItem>
{ isModalOpen && (
<Modal
Expand All @@ -161,6 +162,7 @@ export default function ReusableBlockConvertButton( {
} }
>
<VStack spacing="5">
<ReusableBlocksRenameHint />
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
Expand All @@ -170,11 +172,9 @@ export default function ReusableBlockConvertButton( {
/>

<ToggleControl
label={ __(
'Keep all pattern instances in sync'
) }
label={ __( 'Synced' ) }
help={ __(
'Editing the original pattern will also update anywhere the pattern is used.'
'Editing the pattern will update it anywhere it is used.'
) }
checked={ syncType === 'fully' }
onChange={ () => {
Expand Down

0 comments on commit 14bb146

Please sign in to comment.