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

Jump to bottom

Block styles: remove __unstableElementContext in favour of useStyleOverride #54493

Merged
merged 7 commits into from
Nov 13, 2023
Merged

Block styles: remove __unstableElementContext in favour of useStyleOverride #54493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5aa02eb
Block styles: remove __unstableElementContext in favour of useStyleOv…
ellatrix Sep 15, 2023
0c071f8
Restore Platform.isWeb condition
ellatrix Sep 18, 2023
921462a
Guard for no id
ellatrix Sep 18, 2023
9a31c9a
use useId
ellatrix Sep 20, 2023
61fa259
Remove useId arg
ellatrix Sep 20, 2023
9c6c637
Restore instanceId and avoid passing id to useStyleOverride
ellatrix Oct 2, 2023
ffcb60c
memo style
ellatrix Oct 3, 2023
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
22 changes: 4 additions & 18 deletions packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@ import {
useMergeRefs,
useDebounce,
} from '@wordpress/compose';
import {
createContext,
useState,
useMemo,
useCallback,
} from '@wordpress/element';
import { createContext, useMemo, useCallback } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -40,13 +35,10 @@ import {
} from '../block-edit/context';
import { useTypingObserver } from '../observe-typing';

const elementContext = createContext();

export const IntersectionObserver = createContext();
const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();

function Root( { className, ...settings } ) {
const [ element, setElement ] = useState();
const isLargeViewport = useViewportMatch( 'medium' );
const { isOutlineMode, isFocusMode, editorMode } = useSelect(
( select ) => {
Expand Down Expand Up @@ -115,13 +107,9 @@ function Root( { className, ...settings } ) {
settings
);
return (
<elementContext.Provider value={ element }>
<IntersectionObserver.Provider value={ intersectionObserver }>
<div { ...innerBlocksProps } />
{ /* Ensure element and layout styles are always at the end of the document */ }
<div ref={ setElement } />
</IntersectionObserver.Provider>
</elementContext.Provider>
<IntersectionObserver.Provider value={ intersectionObserver }>
<div { ...innerBlocksProps } />
</IntersectionObserver.Provider>
);
}

Expand All @@ -133,8 +121,6 @@ export default function BlockList( settings ) {
);
}

BlockList.__unstableElementContext = elementContext;

function Items( {
placeholder,
rootClientId,
Expand Down
56 changes: 23 additions & 33 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 @@ -16,7 +16,6 @@ import {
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { useMemo, useEffect } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
Expand All @@ -34,12 +33,10 @@ import {
} from '../components/duotone/utils';
import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
import { scopeSelector } from '../components/global-styles/utils';
import { useBlockSettings } from './utils';
import { useBlockSettings, useStyleOverride } 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';
import { store as blockEditorStore } from '../store';
import { unlock } from '../lock-unlock';

const EMPTY_ARRAY = [];

Expand Down Expand Up @@ -291,28 +288,34 @@ function DuotoneStyles( {

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

const { setStyleOverride, deleteStyleOverride } = unlock(
useDispatch( blockEditorStore )
useStyleOverride(
isValidFilter
? {
css:
colors !== 'unset'
? getDuotoneStylesheet( selector, filterId )
: getDuotoneUnsetStylesheet( selector ),
__unstableType: 'presets',
}
: undefined
);
useStyleOverride(
isValidFilter
? {
assets:
colors !== 'unset'
? getDuotoneFilter( filterId, colors )
: '',
__unstableType: 'svgs',
}
: undefined
);

const blockElement = useBlockElement( clientId );

useEffect( () => {
if ( ! isValidFilter ) return;

setStyleOverride( filterId, {
css:
colors !== 'unset'
? getDuotoneStylesheet( selector, filterId )
: getDuotoneUnsetStylesheet( selector ),
__unstableType: 'presets',
} );
setStyleOverride( `duotone-${ filterId }`, {
assets:
colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
__unstableType: 'svgs',
} );

// Safari does not always update the duotone filter when the duotone colors
// are changed. When using Safari, force the block element to be repainted by
// the browser to ensure any changes are reflected visually. This logic matches
Expand All @@ -329,20 +332,7 @@ function DuotoneStyles( {
blockElement.offsetHeight;
blockElement.style.display = display;
}

return () => {
deleteStyleOverride( filterId );
deleteStyleOverride( `duotone-${ filterId }` );
};
}, [
isValidFilter,
blockElement,
colors,
selector,
filterId,
setStyleOverride,
deleteStyleOverride,
] );
}, [ isValidFilter, blockElement ] );

return null;
}
Expand Down
30 changes: 4 additions & 26 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@ import classnames from 'classnames';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import {
Button,
ButtonGroup,
ToggleControl,
PanelBody,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -29,8 +28,7 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
import { useBlockEditingMode } from '../components/block-editing-mode';
import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
import { kebabCase } from '../utils/object';
import { useBlockSettings } from './utils';
import { unlock } from '../lock-unlock';
import { useBlockSettings, useStyleOverride } from './utils';

const layoutBlockSupportKey = 'layout';

Expand Down Expand Up @@ -381,17 +379,7 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
layoutClasses
);

const { setStyleOverride, deleteStyleOverride } = unlock(
useDispatch( blockEditorStore )
);

useEffect( () => {
if ( ! css ) return;
setStyleOverride( selector, { css } );
return () => {
deleteStyleOverride( selector );
};
}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
useStyleOverride( { css } );

return (
<BlockListBlock
Expand Down Expand Up @@ -459,17 +447,7 @@ function BlockWithChildLayoutStyles( { block: BlockListBlock, props } ) {
[ `wp-container-content-${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
} );

const { setStyleOverride, deleteStyleOverride } = unlock(
useDispatch( blockEditorStore )
);

useEffect( () => {
if ( ! css ) return;
setStyleOverride( selector, { css } );
return () => {
deleteStyleOverride( selector );
};
}, [ selector, css, setStyleOverride, deleteStyleOverride ] );
useStyleOverride( { css } );

return <BlockListBlock { ...props } className={ className } />;
}
Expand Down
23 changes: 5 additions & 18 deletions packages/block-editor/src/hooks/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,16 @@ import {
} from '@wordpress/components';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import {
useContext,
useMemo,
createPortal,
Platform,
} from '@wordpress/element';
import { useMemo, Platform } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';

/**
* Internal dependencies
*/
import BlockList from '../components/block-list';
import { useSettings } from '../components/use-settings';
import InspectorControls from '../components/inspector-controls';
import useBlockDisplayInformation from '../components/use-block-display-information';
import { cleanEmptyObject } from './utils';
import { cleanEmptyObject, useStyleOverride } from './utils';
import { unlock } from '../lock-unlock';
import { store as blockEditorStore } from '../store';

Expand Down Expand Up @@ -368,7 +362,6 @@ export const withPositionStyles = createHigherOrderComponent(
hasPositionBlockSupport && ! isPositionDisabled;

const id = useInstanceId( BlockListBlock );
const element = useContext( BlockList.__unstableElementContext );

// Higher specificity to override defaults in editor UI.
const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
Expand All @@ -392,15 +385,9 @@ export const withPositionStyles = createHigherOrderComponent(
!! attributes?.style?.position?.type,
} );

return (
<>
{ allowPositionStyles &&
element &&
!! css &&
createPortal( <style>{ css }</style>, element ) }
<BlockListBlock { ...props } className={ className } />
</>
);
useStyleOverride( { css } );

return <BlockListBlock { ...props } className={ className } />;
},
'withPositionStyles'
);
Expand Down
42 changes: 14 additions & 28 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useContext, useMemo, createPortal } from '@wordpress/element';
import { useMemo } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import {
getBlockSupport,
Expand All @@ -19,7 +19,6 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
/**
* Internal dependencies
*/
import BlockList from '../components/block-list';
import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
Expand All @@ -34,7 +33,7 @@ import {
DimensionsPanel,
} from './dimensions';
import useDisplayBlockControls from '../components/use-display-block-controls';
import { shouldSkipSerialization } from './utils';
import { shouldSkipSerialization, useStyleOverride } from './utils';
import { scopeSelector } from '../components/global-styles/utils';
import { useBlockEditingMode } from '../components/block-editing-mode';

Expand Down Expand Up @@ -484,33 +483,20 @@ const withElementsStyles = createHigherOrderComponent(
: undefined;
}, [ baseElementSelector, blockElementStyles, props.name ] );

const element = useContext( BlockList.__unstableElementContext );
useStyleOverride( { css: styles } );

return (
<>
{ styles &&
element &&
createPortal(
<style
dangerouslySetInnerHTML={ {
__html: styles,
} }
/>,
element
) }

<BlockListBlock
{ ...props }
className={
props.attributes.style?.elements
? classnames(
props.className,
blockElementsContainerIdentifier
)
: props.className
}
/>
</>
<BlockListBlock
{ ...props }
className={
props.attributes.style?.elements
? classnames(
props.className,
blockElementsContainerIdentifier
)
: props.className
}
/>
);
},
'withElementsStyles'
Expand Down
34 changes: 33 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 @@ -2,14 +2,17 @@
* WordPress dependencies
*/
import { getBlockSupport } from '@wordpress/blocks';
import { useMemo } from '@wordpress/element';
import { useMemo, useEffect, useId } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { useSettings } from '../components';
import { useSettingsForBlockElement } from '../components/global-styles/hooks';
import { getValueFromObjectPath, setImmutably } from '../utils/object';
import { store as blockEditorStore } from '../store';
import { unlock } from '../lock-unlock';

/**
* Removed falsy values from nested object.
Expand Down Expand Up @@ -115,6 +118,35 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
return skipSerialization;
}

export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
const { setStyleOverride, deleteStyleOverride } = unlock(
useDispatch( blockEditorStore )
);
const fallbackId = useId();
useEffect( () => {
// Unmount if there is CSS and assets are empty.
if ( ! css && ! assets ) return;
const _id = id || fallbackId;
setStyleOverride( _id, {
id,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this line be referencing the fallback if present, too?

Suggested change
id,
id: _id,

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not sure? Why should we set the fallback id?

Copy link
Contributor

Choose a reason for hiding this comment

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

I wasn't too sure, but it looks like it works fine without setting the fallback id, so doesn't seem like we need to do anything here 🙂

css,
assets,
__unstableType,
} );
return () => {
deleteStyleOverride( _id );
};
}, [
id,
css,
assets,
__unstableType,
fallbackId,
setStyleOverride,
deleteStyleOverride,
] );
}

/**
* Based on the block and its context, returns an object of all the block settings.
* This object can be passed as a prop to all the Styles UI components
Expand Down
Loading
Loading