Skip to content

Commit

Permalink
Block styles: remove __unstableElementContext in favour of useStyleOv…
Browse files Browse the repository at this point in the history 
…erride (#54493)
  • Loading branch information
@ellatrix
ellatrix committed Nov 13, 2023
1 parent 890dc50 commit 4e26178
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 134 deletions.
22 changes: 4 additions & 18 deletions packages/block-editor/src/components/block-list/index.js
View file
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
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
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
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
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
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,
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

1 comment on commit 4e26178

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 4e26178.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6845737945
📝 Reported issues:

Please sign in to comment.