Refactor to use a hook so that we can get the blockNames via getBlock…

…Types and use useMemo Change function signature to something like getGlobalStylesChangelist( next, previous, options = {} ) Move max-length functionality from the revision buttons to the util.
WordPress · Dec 28, 2023 · 45b965e · 45b965e
1 parent cd91214
commit 45b965e
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 41 deletions.
diff --git 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/...yles/test/get-global-styles-changelist.js → ...yles/test/use-global-styles-changelist.js b/...yles/test/get-global-styles-changelist.js → ...yles/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/...al-styles/get-global-styles-changelist.js → ...al-styles/use-global-styles-changelist.js b/...al-styles/get-global-styles-changelist.js → ...al-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<string,string>} 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
@@ -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 (
  <span
  data-testid="global-styles-revision-changes"
@@ -128,13 +113,6 @@ function RevisionsButtons( {
  currentUser: getCurrentUser(),
  };
  }, [] );
- const blockNames = useMemo( () => {
- 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( {
  </span>
  { isSelected && (
  <ChangesSummary
- blockNames={ blockNames }
  revision={ revision }
  previousRevision={
  index < userRevisions.length