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.

Sign up for GitHub

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

Jump to bottom

Patterns: Remove reusable text from menu once rename hint has been dismissed #52664

Merged
merged 11 commits into from
Jul 17, 2023
Merged

Patterns: Remove reusable text from menu once rename hint has been dismissed #52664

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9bb8b57
Remove `reusable` text from menu once rename hint has been dismissed
glendaviesnz Jul 16, 2023
c45e3f5
Fix e2e tests
glendaviesnz Jul 16, 2023
bfad338
Revert "Fix e2e tests"
glendaviesnz Jul 17, 2023
bd2d8fe
Fix doc comment
glendaviesnz Jul 17, 2023
8a94de4
Another attempt to fix e2e tests
glendaviesnz Jul 17, 2023
b48ecf1
Add doc comment to explain temporary nature of component and hook.
glendaviesnz Jul 17, 2023
772a412
Move to private API
glendaviesnz Jul 17, 2023
e026fa3
Rename file to lock-unlock and correct package name
glendaviesnz Jul 17, 2023
7a62ac7
Also use private API in post edit modal
glendaviesnz Jul 17, 2023
e619b30
Add reusable blocks module to list of core packages
glendaviesnz Jul 17, 2023
608836d
Commit updated package-lock.json after adding private apis to reusabl…
glendaviesnz Jul 17, 2023
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
4 changes: 0 additions & 4 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -680,10 +680,6 @@ _Related_

Private @wordpress/block-editor APIs.

### ReusableBlocksRenameHint

Undocumented declaration.

### RichText

_Related_
Expand Down
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,3 @@ 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';
17 changes: 17 additions & 0 deletions packages/block-editor/src/components/inserter/reusable-block-rename-hint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,24 @@ import { close } from '@wordpress/icons';
import { store as preferencesStore } from '@wordpress/preferences';

const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
/*
* This hook was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
* It is only exported for use in the reusable-blocks package as well as block-editor.
* It will be removed in 6.4. and should not be used in any new code.
*/
export function useReusableBlocksRenameHint() {
return useSelect(
( select ) =>
select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
[]
);
}

/*
* This component was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
* It is only exported for use in the reusable-blocks package as well as block-editor.
* It will be removed in 6.4. and should not be used in any new code.
*/
export default function ReusableBlocksRenameHint() {
const isReusableBlocksRenameHint = useSelect(
( select ) =>
Expand Down
6 changes: 6 additions & 0 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
import { useLayoutClasses, useLayoutStyles } from './hooks';
import DimensionsTool from './components/dimensions-tool';
import ResolutionTool from './components/resolution-tool';
import {
default as ReusableBlocksRenameHint,
useReusableBlocksRenameHint,
} from './components/inserter/reusable-block-rename-hint';

/**
* Private @wordpress/block-editor APIs.
Expand All @@ -43,4 +47,6 @@ lock( privateApis, {
useLayoutStyles,
DimensionsTool,
ResolutionTool,
ReusableBlocksRenameHint,
useReusableBlocksRenameHint,
} );
4 changes: 0 additions & 4 deletions packages/e2e-test-utils/src/create-reusable-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { canvas } from './canvas';
export const createReusableBlock = async ( content, title ) => {
const reusableBlockNameInputSelector =
'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
const syncToggleSelector =
'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
const syncToggleSelectorChecked =
'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
// Insert a paragraph block
Expand All @@ -31,8 +29,6 @@ export const createReusableBlock = async ( content, title ) => {
await nameInput.click();
await page.keyboard.type( title );

const syncToggle = await page.waitForSelector( syncToggleSelector );
syncToggle.click();
await page.waitForSelector( syncToggleSelectorChecked );
await page.keyboard.press( 'Enter' );

Expand Down
6 changes: 0 additions & 6 deletions packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ const reusableBlockNameInputSelector =
'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
const reusableBlockInspectorNameInputSelector =
'.block-editor-block-inspector .components-text-control__input';
const syncToggleSelector =
'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
const syncToggleSelectorChecked =
'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';

Expand Down Expand Up @@ -205,8 +203,6 @@ describe( 'Reusable blocks', () => {
);
await nameInput.click();
await page.keyboard.type( 'Multi-selection reusable block' );
const syncToggle = await page.waitForSelector( syncToggleSelector );
syncToggle.click();
await page.waitForSelector( syncToggleSelectorChecked );
await page.keyboard.press( 'Enter' );

Expand Down Expand Up @@ -389,8 +385,6 @@ describe( 'Reusable blocks', () => {
);
await nameInput.click();
await page.keyboard.type( 'Block with styles' );
const syncToggle = await page.waitForSelector( syncToggleSelector );
syncToggle.click();
await page.waitForSelector( syncToggleSelectorChecked );
await page.keyboard.press( 'Enter' );
const reusableBlock = await canvas().waitForSelector(
Expand Down
1 change: 1 addition & 0 deletions packages/reusable-blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/notices": "file:../notices",
"@wordpress/private-apis": "^0.19.0",
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
"@wordpress/url": "file:../url"
},
"peerDependencies": {
Expand Down
21 changes: 14 additions & 7 deletions ...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
import {
BlockSettingsMenuControls,
store as blockEditorStore,
ReusableBlocksRenameHint,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { useCallback, useState } from '@wordpress/element';
import {
Expand All @@ -27,6 +27,7 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import { store } from '../../store';
import { unlock } from '../../private-apis';

/**
* Menu control to convert block(s) to reusable block.
Expand All @@ -40,7 +41,11 @@ export default function ReusableBlockConvertButton( {
clientIds,
rootClientId,
} ) {
const [ syncType, setSyncType ] = useState( 'unsynced' );
const { useReusableBlocksRenameHint, ReusableBlocksRenameHint } = unlock(
blockEditorPrivateApis
);
const showRenameHint = useReusableBlocksRenameHint();
const [ syncType, setSyncType ] = useState( undefined );
const [ isModalOpen, setIsModalOpen ] = useState( false );
const [ title, setTitle ] = useState( '' );
const canConvert = useSelect(
Expand Down Expand Up @@ -97,7 +102,7 @@ export default function ReusableBlockConvertButton( {
syncType
);
createSuccessNotice(
syncType === 'fully'
! syncType
? sprintf(
// translators: %s: the name the user has given to the pattern.
__( 'Synced Pattern created: %s' ),
Expand Down Expand Up @@ -141,7 +146,9 @@ export default function ReusableBlockConvertButton( {
icon={ symbol }
onClick={ () => setIsModalOpen( true ) }
>
{ __( 'Create pattern/reusable block' ) }
{ showRenameHint
? __( 'Create pattern/reusable block' )
: __( 'Create pattern' ) }
</MenuItem>
{ isModalOpen && (
<Modal
Expand Down Expand Up @@ -176,12 +183,12 @@ export default function ReusableBlockConvertButton( {
help={ __(
'Editing the pattern will update it anywhere it is used.'
) }
checked={ syncType === 'fully' }
checked={ ! syncType }
onChange={ () => {
setSyncType(
syncType === 'fully'
! syncType
? 'unsynced'
: 'fully'
: undefined
);
} }
/>
Expand Down
10 changes: 10 additions & 0 deletions packages/reusable-blocks/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';

export const { lock, unlock } =
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
'@wordpress/edit-site'
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
);
6 changes: 3 additions & 3 deletions packages/reusable-blocks/src/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ export const __experimentalConvertBlockToStatic =
/**
* Returns a generator converting one or more static blocks into a pattern.
*
* @param {string[]} clientIds The client IDs of the block to detach.
* @param {string} title Pattern title.
* @param {'fully'|'unsynced'} syncType They way block is synced, current 'fully' and 'unsynced'.
* @param {string[]} clientIds The client IDs of the block to detach.
* @param {string} title Pattern title.
* @param {undefined|'unsynced'} syncType They way block is synced, current undefined (synced) and 'unsynced'.
*/
export const __experimentalConvertBlocksToReusable =
( clientIds, title, syncType ) =>
Expand Down
Loading