From 482e28c93b3379781e94e06c123902350289bd38 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 18 Jul 2023 11:12:44 +1200 Subject: [PATCH] Patterns: Remove `reusable` text from menu once rename hint has been dismissed (#52664) --- package-lock.json | 25 ++++++++++--------- packages/block-editor/README.md | 4 --- packages/block-editor/src/components/index.js | 5 ---- .../inserter/reusable-block-rename-hint.js | 17 +++++++++++++ packages/block-editor/src/private-apis.js | 6 +++++ .../src/create-reusable-block.js | 4 --- .../editor/various/reusable-blocks.test.js | 6 ----- .../src/components/post-sync-status/index.js | 5 ++-- packages/private-apis/src/implementation.js | 1 + packages/reusable-blocks/package.json | 1 + .../reusable-block-convert-button.js | 21 ++++++++++------ packages/reusable-blocks/src/lock-unlock.js | 9 +++++++ packages/reusable-blocks/src/store/actions.js | 6 ++--- 13 files changed, 67 insertions(+), 43 deletions(-) create mode 100644 packages/reusable-blocks/src/lock-unlock.js diff --git a/package-lock.json b/package-lock.json index 3c96f25259cbc..42ace4e6e0d7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18572,6 +18572,7 @@ "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", "@wordpress/notices": "file:packages/notices", + "@wordpress/private-apis": "^0.19.0", "@wordpress/url": "file:packages/url" } }, @@ -25919,7 +25920,7 @@ "array-ify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz", - "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==", + "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=", "dev": true }, "array-includes": { @@ -31074,7 +31075,7 @@ "debuglog": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==", + "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=", "dev": true }, "decache": { @@ -35920,7 +35921,7 @@ "git-remote-origin-url": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz", - "integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==", + "integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=", "dev": true, "requires": { "gitconfiglocal": "^1.0.0", @@ -35967,7 +35968,7 @@ "gitconfiglocal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz", - "integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==", + "integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=", "dev": true, "requires": { "ini": "^1.3.2" @@ -37215,7 +37216,7 @@ "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", + "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", "dev": true, "requires": { "ms": "^2.0.0" @@ -38231,7 +38232,7 @@ "is-text-path": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz", - "integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==", + "integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=", "dev": true, "requires": { "text-extensions": "^1.0.0" @@ -40004,7 +40005,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==", + "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", "dev": true }, "jsprim": { @@ -41110,7 +41111,7 @@ "lodash.ismatch": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz", - "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==", + "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", "dev": true }, "lodash.isplainobject": { @@ -48716,7 +48717,7 @@ "promzard": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz", - "integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==", + "integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=", "dev": true, "requires": { "read": "1" @@ -48750,7 +48751,7 @@ "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", - "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=", "dev": true }, "protocols": { @@ -50367,7 +50368,7 @@ "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", - "integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==", + "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=", "dev": true, "requires": { "mute-stream": "~0.0.4" @@ -55757,7 +55758,7 @@ "temp-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz", - "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==", + "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=", "dev": true }, "terminal-link": { diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 937bfea2f4965..2c42b42afc442 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -680,10 +680,6 @@ _Related_ Private @wordpress/block-editor APIs. -### ReusableBlocksRenameHint - -Undocumented declaration. - ### RichText _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index db93f112a366d..5876eb4ec01e9 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -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'; diff --git a/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js index d4702eb137283..6a3a3d1eec260 100644 --- a/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js +++ b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js @@ -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 ) => diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 453fbd7ce63eb..20aeaa2a79040 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -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. @@ -43,4 +47,6 @@ lock( privateApis, { useLayoutStyles, DimensionsTool, ResolutionTool, + ReusableBlocksRenameHint, + useReusableBlocksRenameHint, } ); diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js index 9714638154403..860b5ac5660eb 100644 --- a/packages/e2e-test-utils/src/create-reusable-block.js +++ b/packages/e2e-test-utils/src/create-reusable-block.js @@ -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 @@ -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' ); diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 2f237822b1ccc..1fc9217b4a77c 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -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'; @@ -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' ); @@ -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( diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index 8219ef7c0e4f5..bbc8cd0cfe974 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -12,12 +12,13 @@ import { ToggleControl, } from '@wordpress/components'; import { useEffect, useState } from '@wordpress/element'; -import { ReusableBlocksRenameHint } from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; export default function PostSyncStatus() { const { syncStatus, postType, meta } = useSelect( ( select ) => { @@ -81,7 +82,7 @@ export function PostSyncStatusModal() { if ( postType !== 'wp_block' || ! isNewPost ) { return null; } - + const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis ); return ( <> { isModalOpen && ( diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js index 31936fba5ad51..2c9fdadb27c57 100644 --- a/packages/private-apis/src/implementation.js +++ b/packages/private-apis/src/implementation.js @@ -23,6 +23,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [ '@wordpress/edit-site', '@wordpress/edit-widgets', '@wordpress/editor', + '@wordpress/reusable-blocks', '@wordpress/router', ]; diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json index a15e98ac1a906..81bd9f5424572 100644 --- a/packages/reusable-blocks/package.json +++ b/packages/reusable-blocks/package.json @@ -37,6 +37,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/notices": "file:../notices", + "@wordpress/private-apis": "^0.19.0", "@wordpress/url": "file:../url" }, "peerDependencies": { diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index 981776880a137..2dfd635e2963a 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -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 { @@ -27,6 +27,7 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { store } from '../../store'; +import { unlock } from '../../lock-unlock'; /** * Menu control to convert block(s) to reusable block. @@ -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( @@ -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' ), @@ -141,7 +146,9 @@ export default function ReusableBlockConvertButton( { icon={ symbol } onClick={ () => setIsModalOpen( true ) } > - { __( 'Create pattern/reusable block' ) } + { showRenameHint + ? __( 'Create pattern/reusable block' ) + : __( 'Create pattern' ) } { isModalOpen && ( { setSyncType( - syncType === 'fully' + ! syncType ? 'unsynced' - : 'fully' + : undefined ); } } /> diff --git a/packages/reusable-blocks/src/lock-unlock.js b/packages/reusable-blocks/src/lock-unlock.js new file mode 100644 index 0000000000000..c33f209c9d76a --- /dev/null +++ b/packages/reusable-blocks/src/lock-unlock.js @@ -0,0 +1,9 @@ +/** + * WordPress dependencies + */ +import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis'; + +export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules( + 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.', + '@wordpress/reusable-blocks' +); diff --git a/packages/reusable-blocks/src/store/actions.js b/packages/reusable-blocks/src/store/actions.js index 17a2e83d5e776..292a3082146aa 100644 --- a/packages/reusable-blocks/src/store/actions.js +++ b/packages/reusable-blocks/src/store/actions.js @@ -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 ) =>