Skip to content

Commit

Permalink
Use context instead to filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix committed Aug 10, 2023
1 parent acfb4ac commit 935f69a
Show file tree
Hide file tree
Showing 10 changed files with 295 additions and 273 deletions.
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/block-preview/auto.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,10 @@ function ScaledBlockPreview( {
: minHeight,
} }
>
<EditorStyles styles={ editorStyles } />
{ contentResizeListener }
<MemoizedBlockList renderAppender={ false } />
<EditorStyles styles={ editorStyles }>
{ contentResizeListener }
<MemoizedBlockList renderAppender={ false } />
</EditorStyles>
</Iframe>
</Disabled>
);
Expand Down
64 changes: 47 additions & 17 deletions packages/block-editor/src/components/editor-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,23 @@ import a11yPlugin from 'colord/plugins/a11y';
* WordPress dependencies
*/
import { SVG } from '@wordpress/components';
import { useCallback, useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import {
useCallback,
useMemo,
createContext,
useState,
} from '@wordpress/element';

/**
* Internal dependencies
*/
import transformStyles from '../../utils/transform-styles';
import { store as blockEditorStore } from '../../store';

const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
extend( [ namesPlugin, a11yPlugin ] );

export const updateStyleContext = createContext();

function useDarkThemeBodyClassName( styles ) {
return useCallback(
( node ) => {
Expand Down Expand Up @@ -69,18 +74,42 @@ function useDarkThemeBodyClassName( styles ) {
);
}

export default function EditorStyles( { styles } ) {
const settings = useSelect(
( select ) => select( blockEditorStore ).getSettings().styles,
[]
);
const stylesArray = useMemo(
() => [
...Object.values( settings ?? [] ),
...Object.values( styles ?? [] ),
],
[ styles, settings ]
);
export default function EditorStyles( { styles, children } ) {
const [ overrides, setOverrides ] = useState( [] );
const updateStyle = useCallback( ( style ) => {
setOverrides( ( _overrides ) => {
const index = _overrides.findIndex(
( override ) => override.id === style.id
);
if ( index === -1 ) {
return [ ..._overrides, style ];
}
return [
..._overrides.slice( 0, index ),
style,
..._overrides.slice( index + 1 ),
];
} );
return () => {
setOverrides( ( _overrides ) =>
_overrides.filter( ( override ) => override.id !== style.id )
);
};
}, [] );
const stylesArray = useMemo( () => {
const _styles = Object.values( styles ?? [] );

for ( const override of overrides ) {
const index = _styles.findIndex( ( { id } ) => id === override.id );
if ( index === -1 ) {
_styles.push( override );
} else {
_styles[ index ] = override;
}
}

return _styles;
}, [ styles, overrides ] );
const transformedStyles = useMemo(
() =>
transformStyles(
Expand All @@ -100,7 +129,7 @@ export default function EditorStyles( { styles } ) {
);

return (
<>
<updateStyleContext.Provider value={ updateStyle }>
{ /* Use an empty style element to have a document reference,
but this could be any element. */ }
<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
Expand All @@ -121,6 +150,7 @@ export default function EditorStyles( { styles } ) {
} }
dangerouslySetInnerHTML={ { __html: transformedSvgs } }
/>
</>
{ children }
</updateStyleContext.Provider>
);
}
47 changes: 12 additions & 35 deletions packages/block-editor/src/hooks/duotone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
} from '@wordpress/blocks';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { useMemo, useEffect } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { useMemo, useEffect, useContext } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -37,7 +36,7 @@ import { scopeSelector } from '../components/global-styles/utils';
import { useBlockSettings } from './utils';
import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
import { useBlockEditingMode } from '../components/block-editing-mode';
import { store as blockEditorStore } from '../store';
import { updateStyleContext } from '../components/editor-styles';

const EMPTY_ARRAY = [];

Expand Down Expand Up @@ -221,27 +220,11 @@ const withDuotoneControls = createHigherOrderComponent(
'withDuotoneControls'
);

function addStyle( styles, style ) {
let i = styles.length;
while ( i-- ) {
if ( styles[ i ].id === style.id ) {
styles[ i ] = style;
return styles;
}
}

styles.push( style );
return styles;
}

function DuotoneStyles( {
id: filterId,
selector: duotoneSelector,
attribute: duotoneAttr,
} ) {
const { getSettings } = useSelect( blockEditorStore );
const { updateSettings } = useDispatch( blockEditorStore );

const duotonePalette = useMultiOriginPresets( {
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone',
Expand Down Expand Up @@ -289,37 +272,31 @@ function DuotoneStyles( {

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

const updateStyle = useContext( updateStyleContext );

useEffect( () => {
const settings = getSettings();
const styles = [ ...settings.styles ];
if ( ! isValidFilter ) return;

addStyle( styles, {
const clearStyle = updateStyle( {
id: filterId,
css:
colors !== 'unset'
? getDuotoneStylesheet( selector, filterId )
: getDuotoneUnsetStylesheet( selector ),
__unstableType: 'presets',
} );
addStyle( styles, {
const clearFilter = updateStyle( {
id: `duotone-${ filterId }`,
assets:
colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
__unstableType: 'svgs',
} );

updateSettings( {
...settings,
styles,
} );
}, [
getSettings,
updateSettings,
isValidFilter,
selector,
filterId,
colors,
] );
return () => {
clearStyle();
clearFilter();
};
}, [ isValidFilter, colors, selector, filterId, updateStyle ] );

return null;
}
Expand Down
21 changes: 11 additions & 10 deletions packages/customize-widgets/src/components/sidebar-block-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,16 +115,17 @@ export default function SidebarBlockEditor( {

<CopyHandler>
<BlockTools>
<EditorStyles styles={ settings.defaultEditorStyles } />
<BlockSelectionClearer>
<WritingFlow className="editor-styles-wrapper">
<ObserveTyping>
<BlockList
renderAppender={ BlockAppender }
/>
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
<EditorStyles styles={ settings.defaultEditorStyles }>
<BlockSelectionClearer>
<WritingFlow className="editor-styles-wrapper">
<ObserveTyping>
<BlockList
renderAppender={ BlockAppender }
/>
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
</EditorStyles>
</BlockTools>
</CopyHandler>

Expand Down
29 changes: 15 additions & 14 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,16 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
if ( ! shouldIframe ) {
return (
<>
<EditorStyles styles={ styles } />
<WritingFlow
ref={ contentRef }
className="editor-styles-wrapper"
style={ { flex: '1', ...style } }
tabIndex={ -1 }
>
{ children }
</WritingFlow>
<EditorStyles styles={ styles }>
<WritingFlow
ref={ contentRef }
className="editor-styles-wrapper"
style={ { flex: '1', ...style } }
tabIndex={ -1 }
>
{ children }
</WritingFlow>
</EditorStyles>
</>
);
}
Expand All @@ -69,8 +70,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
style={ { width: '100%', height: '100%', display: 'block' } }
name="editor-canvas"
>
<EditorStyles styles={ styles } />
{ children }
<EditorStyles styles={ styles }>{ children }</EditorStyles>
</Iframe>
);
}
Expand Down Expand Up @@ -101,7 +101,7 @@ function getPostContentAttributes( blocks ) {
}
}

export default function VisualEditor() {
export default function VisualEditor( { styles } ) {
const {
deviceType,
isWelcomeGuideVisible,
Expand Down Expand Up @@ -313,8 +313,9 @@ export default function VisualEditor() {
titleRef?.current?.focus();
}, [ isWelcomeGuideVisible, isCleanNewPost ] );

const styles = useMemo(
styles = useMemo(
() => [
...styles,
{
// We should move this in to future to the body.
css:
Expand All @@ -324,7 +325,7 @@ export default function VisualEditor() {
: '' ),
},
],
[ paddingBottom ]
[ styles, paddingBottom ]
);

// Add some styles for alignwide/alignfull Post Content and its children.
Expand Down
31 changes: 16 additions & 15 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,21 +78,22 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
{ ...props }
{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
>
<EditorStyles styles={ settings.styles } />
<style>{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
`.is-root-container{display:flow-root;${
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
enableResizing ? 'min-height:0!important;' : ''
}}body{position:relative; ${
canvasMode === 'view'
? 'cursor: pointer; min-height: 100vh;'
: ''
}}}`
}</style>
{ children }
<EditorStyles styles={ settings.styles }>
<style>{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
`.is-root-container{display:flow-root;${
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
enableResizing ? 'min-height:0!important;' : ''
}}body{position:relative; ${
canvasMode === 'view'
? 'cursor: pointer; min-height: 100vh;'
: ''
}}}`
}</style>
{ children }
</EditorStyles>
</Iframe>
);
}
Expand Down
Loading

0 comments on commit 935f69a

Please sign in to comment.