From 45b965e64e289ffea4c9d2bb70f5e6ee7ccf601f Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 28 Dec 2023 17:03:20 +1100 Subject: [PATCH] Refactor to use a hook so that we can get the blockNames via getBlockTypes and use useMemo Change function signature to something like getGlobalStylesChangelist( next, previous, options = {} ) Move max-length functionality from the revision buttons to the util. --- .../src/components/global-styles/index.js | 2 +- ...ist.js => use-global-styles-changelist.js} | 10 ++--- ...ist.js => use-global-styles-changelist.js} | 38 ++++++++++++++++--- .../screen-revisions/revisions-buttons.js | 35 +++-------------- 4 files changed, 44 insertions(+), 41 deletions(-) rename packages/block-editor/src/components/global-styles/test/{get-global-styles-changelist.js => use-global-styles-changelist.js} (92%) rename packages/block-editor/src/components/global-styles/{get-global-styles-changelist.js => use-global-styles-changelist.js} (79%) diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js index 89c3525397374..cf523fa6c9871 100644 --- a/packages/block-editor/src/components/global-styles/index.js +++ b/packages/block-editor/src/components/global-styles/index.js @@ -29,4 +29,4 @@ export { } from './image-settings-panel'; export { default as AdvancedPanel } from './advanced-panel'; export { areGlobalStyleConfigsEqual } from './utils'; -export { default as getGlobalStylesChangelist } from './get-global-styles-changelist'; +export { default as useGlobalStylesChangelist } from './use-global-styles-changelist'; diff --git a/packages/block-editor/src/components/global-styles/test/get-global-styles-changelist.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-changelist.js similarity index 92% rename from packages/block-editor/src/components/global-styles/test/get-global-styles-changelist.js rename to packages/block-editor/src/components/global-styles/test/use-global-styles-changelist.js index 523dd8aa7700b..322307874b903 100644 --- a/packages/block-editor/src/components/global-styles/test/get-global-styles-changelist.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-changelist.js @@ -1,9 +1,9 @@ /** * Internal dependencies */ -import getGlobalStylesChangelist from '../get-global-styles-changelist'; +import useGlobalStylesChangelist from '../get-global-styles-changelist'; -describe( 'getGlobalStylesChangelist', () => { +describe( 'useGlobalStylesChangelist', () => { const revision = { id: 10, styles: { @@ -130,7 +130,7 @@ describe( 'getGlobalStylesChangelist', () => { 'core/paragraph': 'Paragraph', }; it( 'returns a list of changes and caches them', () => { - const resultA = getGlobalStylesChangelist( + const resultA = useGlobalStylesChangelist( revision, previousRevision, blockNames @@ -144,7 +144,7 @@ describe( 'getGlobalStylesChangelist', () => { 'Color settings', ] ); - const resultB = getGlobalStylesChangelist( + const resultB = useGlobalStylesChangelist( revision, previousRevision, blockNames @@ -154,7 +154,7 @@ describe( 'getGlobalStylesChangelist', () => { } ); it( 'skips unknown and unchanged keys', () => { - const result = getGlobalStylesChangelist( + const result = useGlobalStylesChangelist( { styles: { frogs: { diff --git a/packages/block-editor/src/components/global-styles/get-global-styles-changelist.js b/packages/block-editor/src/components/global-styles/use-global-styles-changelist.js similarity index 79% rename from packages/block-editor/src/components/global-styles/get-global-styles-changelist.js rename to packages/block-editor/src/components/global-styles/use-global-styles-changelist.js index d4e36c4046be4..77c9194c048b5 100644 --- a/packages/block-editor/src/components/global-styles/get-global-styles-changelist.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-changelist.js @@ -1,7 +1,9 @@ /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; +import { getBlockTypes } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; const globalStylesChangesCache = new Map(); const EMPTY_ARRAY = []; @@ -102,17 +104,24 @@ function deepCompare( changedObject, originalObject, parentPath = '' ) { * Returns an array of translated summarized global styles changes. * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`. * - * @param {Object} next The changed object to compare. - * @param {Object} previous The original object to compare against. - * @param {Record} blockNames A key/value pair object of block names and their rendered titles. + * @param {Object} next The changed object to compare. + * @param {Object} previous The original object to compare against. + * @param {{maxResults:number}} options An object of options. * @return {string[]} An array of translated changes. */ -export default function getGlobalStylesChangelist( +export default function useGlobalStylesChangelist( next, previous, - blockNames + options = {} ) { const cacheKey = JSON.stringify( { next, previous } ); + const blockNames = useMemo( () => { + const blockTypes = getBlockTypes(); + return blockTypes.reduce( ( accumulator, { name, title } ) => { + accumulator[ name ] = title; + return accumulator; + }, {} ); + }, [] ); if ( globalStylesChangesCache.has( cacheKey ) ) { return globalStylesChangesCache.get( cacheKey ); @@ -167,5 +176,22 @@ export default function getGlobalStylesChangelist( globalStylesChangesCache.set( cacheKey, result ); + const changesLength = result.length; + + // Truncate to `n` results if necessary. + if ( + !! options?.maxResults && + changesLength && + changesLength > options.maxResults + ) { + const deleteCount = changesLength - options.maxResults; + const andMoreText = sprintf( + // translators: %d: number of global styles changes that are not displayed in the UI. + _n( '…and %d more change.', '…and %d more changes.', deleteCount ), + deleteCount + ); + result.splice( options.maxResults, deleteCount, andMoreText ); + } + return result; } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index f3c17f69446e3..a61e8ebdd0776 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -6,13 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __, _n, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useMemo } from '@wordpress/element'; -import { getBlockTypes } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** @@ -22,31 +20,18 @@ import { unlock } from '../../../lock-unlock'; const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24; const MAX_CHANGES = 7; -const { getGlobalStylesChangelist } = unlock( blockEditorPrivateApis ); +const { useGlobalStylesChangelist } = unlock( blockEditorPrivateApis ); -function ChangesSummary( { revision, previousRevision, blockNames } ) { - const changes = getGlobalStylesChangelist( - revision, - previousRevision, - blockNames - ); +function ChangesSummary( { revision, previousRevision } ) { + const changes = useGlobalStylesChangelist( revision, previousRevision, { + maxResults: MAX_CHANGES, + } ); const changesLength = changes.length; if ( ! changesLength ) { return null; } - // Truncate to `n` results if necessary. - if ( changesLength > MAX_CHANGES ) { - const deleteCount = changesLength - MAX_CHANGES; - const andMoreText = sprintf( - // translators: %d: number of global styles changes that are not displayed in the UI. - _n( '…and %d more change.', '…and %d more changes.', deleteCount ), - deleteCount - ); - changes.splice( MAX_CHANGES, deleteCount, andMoreText ); - } - return ( { - const blockTypes = getBlockTypes(); - return blockTypes.reduce( ( accumulator, { name, title } ) => { - accumulator[ name ] = title; - return accumulator; - }, {} ); - }, [] ); const dateNowInMs = getDate().getTime(); const { datetimeAbbreviated } = getSettings().formats; @@ -221,7 +199,6 @@ function RevisionsButtons( { { isSelected && (