Make useStyleOverride public

WordPress · Jul 17, 2024 · df6ca27 · df6ca27
1 parent 8112ec2
commit df6ca27
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 17 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -1033,6 +1033,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
@@ -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
@@ -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 { __unstableUseBlockElement as 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
@@ -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
@@ -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
@@ -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
@@ -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';
@@ -72,7 +72,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
@@ -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.