From d9159083cbdfb43134b879195304e4fedf5bf991 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 17 Jul 2024 13:57:03 +0200 Subject: [PATCH 1/2] Make useStyleOverride public --- packages/block-editor/README.md | 10 ++++++++++ .../src/hooks/block-style-variation.js | 6 +++--- packages/block-editor/src/hooks/duotone.js | 6 +++--- packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/hooks/utils.js | 15 ++++++++++++++- packages/block-editor/src/index.js | 1 + packages/block-editor/src/private-apis.js | 3 +-- packages/block-library/src/gallery/gap-styles.js | 9 +-------- 8 files changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 00951fb94c4a77..598f0932c596ed 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1029,6 +1029,16 @@ _Returns_ - `any[]`: Returns the values defined for the settings. +### useStyleOverride + +Override a block editor settings style. Leave the ID blank to create a new style. + +_Parameters_ + +- _$0_ `Object`: Named parameters. +- _$0.id_ `string`: Id of the style override, leave blank to create a new style. +- _$0.css_ `string`: CSS to apply. + ### useZoomOut A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js index f302cf2aa3a2a2..65582d0c0cf948 100644 --- a/packages/block-editor/src/hooks/block-style-variation.js +++ b/packages/block-editor/src/hooks/block-style-variation.js @@ -13,7 +13,7 @@ import { toStyles, getBlockSelectors, } from '../components/global-styles'; -import { useStyleOverride } from './utils'; +import { usePrivateStyleOverride } from './utils'; import { getValueFromObjectPath } from '../utils/object'; import { store as blockEditorStore } from '../store'; import { globalStylesDataKey } from '../store/private-keys'; @@ -63,7 +63,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) { // A helper component to apply a style override using the useStyleOverride hook. function OverrideStyles( { override } ) { - useStyleOverride( override ); + usePrivateStyleOverride( override ); } /** @@ -351,7 +351,7 @@ function useBlockProps( { name, className, clientId } ) { ); }, [ variation, settings, styles, getBlockStyles, clientId ] ); - useStyleOverride( { + usePrivateStyleOverride( { id: `variation-${ clientId }`, css: variationStyles, __unstableType: 'variation', diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 88f2d6064046f9..0a1d630d00de59 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -32,7 +32,7 @@ import { } from '../components/duotone/utils'; import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector'; import { scopeSelector } from '../components/global-styles/utils'; -import { useBlockSettings, useStyleOverride } from './utils'; +import { useBlockSettings, usePrivateStyleOverride } from './utils'; import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel'; import { useBlockEditingMode } from '../components/block-editing-mode'; import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs'; @@ -265,7 +265,7 @@ function useDuotoneStyles( { const isValidFilter = Array.isArray( colors ) || colors === 'unset'; - useStyleOverride( + usePrivateStyleOverride( isValidFilter ? { css: @@ -276,7 +276,7 @@ function useDuotoneStyles( { } : undefined ); - useStyleOverride( + usePrivateStyleOverride( isValidFilter ? { assets: diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 2f74640ef4f633..66ff60b691b66f 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -91,3 +91,4 @@ export { useCachedTruthy } from './use-cached-truthy'; export { setBackgroundStyleDefaults } from './background'; export { useZoomOut } from './use-zoom-out'; export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation'; +export { useStyleOverride } from './utils'; diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 26700ecf7b3fab..c12a58aec9dd63 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -135,7 +135,20 @@ export function shouldSkipSerialization( const pendingStyleOverrides = new WeakMap(); -export function useStyleOverride( { +/** + * Override a block editor settings style. Leave the ID blank to create a new + * style. + * + * @param {Object} $0 Named parameters. + * @param {string} $0.id Id of the style override, leave blank to create a new + * style. + * @param {string} $0.css CSS to apply. + */ +export function useStyleOverride( { id, css } ) { + return usePrivateStyleOverride( { id, css } ); +} + +export function usePrivateStyleOverride( { id, css, assets, diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 53ae7dfeb778fc..db1bc0a06ec6d1 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -14,6 +14,7 @@ export { getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles, useCachedTruthy, useZoomOut, + useStyleOverride, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index eaf699d5e69399..cf464cedf04175 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -16,7 +16,7 @@ import { import { PrivateListView } from './components/list-view'; import BlockInfo from './components/block-info-slot-fill'; import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar'; -import { cleanEmptyObject, useStyleOverride } from './hooks/utils'; +import { cleanEmptyObject } from './hooks/utils'; import BlockQuickNavigation from './components/block-quick-navigation'; import { LayoutStyle } from './components/block-list/layout'; import { BlockRemovalWarningModal } from './components/block-removal-warning-modal'; @@ -68,7 +68,6 @@ lock( privateApis, { BlockInfo, useHasBlockToolbar, cleanEmptyObject, - useStyleOverride, BlockQuickNavigation, LayoutStyle, BlockRemovalWarningModal, diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js index 4c2002d4b7ddc8..a1ad61f02b9955 100644 --- a/packages/block-library/src/gallery/gap-styles.js +++ b/packages/block-library/src/gallery/gap-styles.js @@ -3,16 +3,9 @@ */ import { __experimentalGetGapCSSValue as getGapCSSValue, - privateApis as blockEditorPrivateApis, + useStyleOverride, } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import { unlock } from '../lock-unlock'; - -const { useStyleOverride } = unlock( blockEditorPrivateApis ); - export default function GapStyles( { blockGap, clientId } ) { // --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default // gap on the gallery. From 8cea19378c765437404e28b2f94e97c0f52e3985 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 30 Jul 2024 22:49:54 +0200 Subject: [PATCH 2/2] Fix doc --- packages/block-editor/README.md | 6 +++--- packages/block-editor/src/hooks/utils.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 598f0932c596ed..fec4f4c0dbe5c3 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1035,9 +1035,9 @@ Override a block editor settings style. Leave the ID blank to create a new style _Parameters_ -- _$0_ `Object`: Named parameters. -- _$0.id_ `string`: Id of the style override, leave blank to create a new style. -- _$0.css_ `string`: CSS to apply. +- _override_ `Object`: Override object. +- _override.id_ `?string`: Id of the style override, leave blank to create a new style. +- _override.css_ `string`: CSS to apply. ### useZoomOut diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index c12a58aec9dd63..fa710fa7f08eba 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -139,10 +139,10 @@ const pendingStyleOverrides = new WeakMap(); * Override a block editor settings style. Leave the ID blank to create a new * style. * - * @param {Object} $0 Named parameters. - * @param {string} $0.id Id of the style override, leave blank to create a new - * style. - * @param {string} $0.css CSS to apply. + * @param {Object} override Override object. + * @param {?string} override.id Id of the style override, leave blank to create + * a new style. + * @param {string} override.css CSS to apply. */ export function useStyleOverride( { id, css } ) { return usePrivateStyleOverride( { id, css } );