Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make useStyleOverride public #63656

Merged
merged 2 commits into from
Jul 30, 2024
Merged

Make useStyleOverride public #63656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d915908
Make useStyleOverride public
ellatrix Jul 17, 2024
8cea193
Fix doc
ellatrix Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_

- _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

A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/hooks/block-style-variation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -351,7 +351,7 @@ function useBlockProps( { name, className, clientId } ) {
);
}, [ variation, settings, styles, getBlockStyles, clientId ] );

useStyleOverride( {
usePrivateStyleOverride( {
id: `variation-${ clientId }`,
css: variationStyles,
__unstableType: 'variation',
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/hooks/duotone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -265,7 +265,7 @@ function useDuotoneStyles( {

const isValidFilter = Array.isArray( colors ) || colors === 'unset';

useStyleOverride(
usePrivateStyleOverride(
Copy link
Contributor

@andrewserong andrewserong Jul 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny nit about consistency:

I see Duotone and block style variations have been switched to use usePrivateStyleOverride instead of useStyleOverride. Is there a reason to switch these internal-to-the-block-editor instances to use the private one? If so, would it be worth updating the code in layout-child.js, layout.js, position.js and style.js, too? If not, then I was wondering if it would be better for these ones to use useStyleOverride instead of the private hook 🤔

Edit: ignore me, sorry! I only just noticed the __unstableType: 'presets' line here 🤦

I see now why a couple of these use the private version and the others continue to use the public one 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All good, I typed before thinking that comment through! 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the block style variations and duotone use the private version as they rely on the restricted parameters we're deliberately omitting from the public useStyleOverride e.g. clientId, __unstableType etc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for confirming!

isValidFilter
? {
css:
Expand All @@ -276,7 +276,7 @@ function useDuotoneStyles( {
}
: undefined
);
useStyleOverride(
usePrivateStyleOverride(
isValidFilter
? {
assets:
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
15 changes: 14 additions & 1 deletion packages/block-editor/src/hooks/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} 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 } );
}

export function usePrivateStyleOverride( {
id,
css,
assets,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export {
getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
useCachedTruthy,
useZoomOut,
useStyleOverride,
} from './hooks';
export * from './components';
export * from './elements';
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -68,7 +68,6 @@ lock( privateApis, {
BlockInfo,
useHasBlockToolbar,
cleanEmptyObject,
useStyleOverride,
BlockQuickNavigation,
LayoutStyle,
BlockRemovalWarningModal,
Expand Down
9 changes: 1 addition & 8 deletions packages/block-library/src/gallery/gap-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading