Skip to content

Commit

Permalink
Revert "Try rendering SVGs from server"
Browse files Browse the repository at this point in the history 
This reverts commit a493443.
  • Loading branch information
Alex Lende committed Feb 21, 2022
1 parent a5a6ff6 commit a86ce38
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 79 deletions.
10 changes: 0 additions & 10 deletions lib/full-site-editing/edit-site-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,16 +165,6 @@ static function( $classes ) {
)
);

add_action(
'admin_head',
function() {
$filters = wp_get_global_styles_svg_filters();
if ( ! empty( $filters ) ) {
printf( '<script>window._wpSvgFilters = %s</script>', wp_json_encode( $filters ) );
}
}
);

wp_add_inline_script(
'wp-blocks',
sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $post ) ) ),
Expand Down
174 changes: 112 additions & 62 deletions packages/block-editor/src/hooks/duotone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,82 +60,109 @@ export function getValuesFromColors( colors = [] ) {
*/

/**
* SVG and stylesheet needed for rendering the duotone filter.
* Stylesheet for rendering the duotone filter.
*
* @param {Object} props Duotone props.
* @param {string} props.selector Selector to apply the filter to.
* @param {string} props.id Unique id for this duotone filter.
* @param {Values} props.values R, G, B, and A values to filter with.
*
* @return {WPElement} Duotone element.
*/
function DuotoneFilter( { selector, id, values } ) {
const stylesheet = `
function DuotoneStylesheet( { selector, id } ) {
const css = `
${ selector } {
filter: url( #${ id } );
}
`;
return <style>{ css }</style>;
}

/**
* SVG for rendering the duotone filter.
*
* @param {Object} props Duotone props.
* @param {string} props.id Unique id for this duotone filter.
* @param {Values} props.values R, G, B, and A values to filter with.
*
* @return {WPElement} Duotone element.
*/
function DuotoneFilter( { id, values } ) {
return (
<>
<SVG
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 0 0"
width="0"
height="0"
focusable="false"
role="none"
style={ {
visibility: 'hidden',
position: 'absolute',
left: '-9999px',
overflow: 'hidden',
} }
>
<defs>
<filter id={ id }>
<feColorMatrix
// Use sRGB instead of linearRGB so transparency looks correct.
colorInterpolationFilters="sRGB"
type="matrix"
// Use perceptual brightness to convert to grayscale.
values="
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
"
<SVG
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 0 0"
width="0"
height="0"
focusable="false"
role="none"
style={ {
visibility: 'hidden',
position: 'absolute',
left: '-9999px',
overflow: 'hidden',
} }
>
<defs>
<filter id={ id }>
<feColorMatrix
// Use sRGB instead of linearRGB so transparency looks correct.
colorInterpolationFilters="sRGB"
type="matrix"
// Use perceptual brightness to convert to grayscale.
values="
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
.299 .587 .114 0 0
"
/>
<feComponentTransfer
// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
colorInterpolationFilters="sRGB"
>
<feFuncR
type="table"
tableValues={ values.r.join( ' ' ) }
/>
<feComponentTransfer
// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
colorInterpolationFilters="sRGB"
>
<feFuncR
type="table"
tableValues={ values.r.join( ' ' ) }
/>
<feFuncG
type="table"
tableValues={ values.g.join( ' ' ) }
/>
<feFuncB
type="table"
tableValues={ values.b.join( ' ' ) }
/>
<feFuncA
type="table"
tableValues={ values.a.join( ' ' ) }
/>
</feComponentTransfer>
<feComposite
// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
in2="SourceGraphic"
operator="in"
<feFuncG
type="table"
tableValues={ values.g.join( ' ' ) }
/>
</filter>
</defs>
</SVG>
<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
<feFuncB
type="table"
tableValues={ values.b.join( ' ' ) }
/>
<feFuncA
type="table"
tableValues={ values.a.join( ' ' ) }
/>
</feComponentTransfer>
<feComposite
// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
in2="SourceGraphic"
operator="in"
/>
</filter>
</defs>
</SVG>
);
}

/**
* SVG and stylesheet needed for rendering the duotone filter.
*
* @param {Object} props Duotone props.
* @param {string} props.selector Selector to apply the filter to.
* @param {string} props.id Unique id for this duotone filter.
* @param {Values} props.values R, G, B, and A values to filter with.
*
* @return {WPElement} Duotone element.
*/
function InlineDuotone( { selector, id, values } ) {
return (
<>
<DuotoneFilter id={ id } values={ values } />
<DuotoneStylesheet id={ id } selector={ selector } />
</>
);
}
Expand Down Expand Up @@ -297,7 +324,7 @@ const withDuotoneStyles = createHigherOrderComponent(
<>
{ element &&
createPortal(
<DuotoneFilter
<InlineDuotone
selector={ selectorsGroup }
id={ id }
values={ getValuesFromColors( values ) }
Expand All @@ -311,6 +338,24 @@ const withDuotoneStyles = createHigherOrderComponent(
'withDuotoneStyles'
);

const withDuotoneFilter = createHigherOrderComponent(
( PresetSvgFilter ) => ( { metadata, preset } ) => {
if ( metadata.svgFilter !== 'duotone' ) {
return <PresetSvgFilter />;
}
return (
<>
<PresetSvgFilter />
<DuotoneFilter
id={ `wp-duotone-${ preset.slug }` }
values={ getValuesFromColors( preset.colors ) }
/>
</>
);
},
'withDuotoneFilter'
);

addFilter(
'blocks.registerBlockType',
'core/editor/duotone/add-attributes',
Expand All @@ -326,3 +371,8 @@ addFilter(
'core/editor/duotone/with-styles',
withDuotoneStyles
);
addFilter(
'editor.PresetSvgFilter',
'core/editor/duotone/with-svg-filter',
withDuotoneFilter
);
6 changes: 1 addition & 5 deletions packages/edit-site/src/components/block-editor/resizable-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,11 +183,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
className="edit-site-visual-editor__editor-canvas"
{ ...props }
>
<span
dangerouslySetInnerHTML={ {
__html: window._wpSvgFilters,
} }
/>
{ settings.svgFilters }
{ children }
</Iframe>
</ResizableBox>
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/editor/global-styles-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { store as editSiteStore } from '../../store';
import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';

function useGlobalStylesRenderer() {
const [ styles, settings ] = useGlobalStylesOutput();
const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
const { getSettings } = useSelect( editSiteStore );
const { updateSettings } = useDispatch( editSiteStore );

Expand All @@ -31,6 +31,7 @@ function useGlobalStylesRenderer() {
updateSettings( {
...currentStoreSettings,
styles: [ ...nonGlobalStyles, ...styles ],
svgFilters,
__experimentalFeatures: settings,
} );
}, [ styles, settings ] );
Expand Down
34 changes: 33 additions & 1 deletion packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
__EXPERIMENTAL_ELEMENTS as ELEMENTS,
getBlockTypes,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { useEffect, useState, useContext } from '@wordpress/element';
import { getCSSRules } from '@wordpress/style-engine';

Expand Down Expand Up @@ -134,6 +135,27 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
);
}

const PresetSvgFilter = withFilters( 'editor.PresetSvgFilter' )( () => null );

function getPresetsSvgFilters( blockPresets = {} ) {
return PRESET_METADATA.filter( ( metadata ) => metadata.svgFilter ).flatMap(
( metadata ) => {
const presetByOrigin = get( blockPresets, metadata.path, {} );
return [ 'default', 'theme' ]
.filter( ( origin ) => presetByOrigin[ origin ] )
.flatMap( ( origin ) =>
presetByOrigin[ origin ].map( ( preset ) => (
<PresetSvgFilter
metadata={ metadata }
preset={ preset }
key={ preset.slug }
/>
) )
);
}
);
}

function flattenTree( input = {}, prefix, token ) {
let result = [];
Object.keys( input ).forEach( ( key ) => {
Expand Down Expand Up @@ -371,6 +393,13 @@ export const toStyles = ( tree, blockSelectors ) => {
return ruleset;
};

export function toSvgFilters( tree, blockSelectors ) {
const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
return nodesWithSettings.flatMap( ( { presets } ) => {
return getPresetsSvgFilters( presets );
} );
}

const getBlockSelectors = ( blockTypes ) => {
const result = {};
blockTypes.forEach( ( blockType ) => {
Expand All @@ -390,6 +419,7 @@ const getBlockSelectors = ( blockTypes ) => {
export function useGlobalStylesOutput() {
const [ stylesheets, setStylesheets ] = useState( [] );
const [ settings, setSettings ] = useState( {} );
const [ svgFilters, setSvgFilters ] = useState( {} );
const { merged: mergedConfig } = useContext( GlobalStylesContext );

useEffect( () => {
Expand All @@ -403,6 +433,7 @@ export function useGlobalStylesOutput() {
blockSelectors
);
const globalStyles = toStyles( mergedConfig, blockSelectors );
const filters = toSvgFilters( mergedConfig, blockSelectors );
setStylesheets( [
{
css: customProperties,
Expand All @@ -414,7 +445,8 @@ export function useGlobalStylesOutput() {
},
] );
setSettings( mergedConfig.settings );
setSvgFilters( filters );
}, [ mergedConfig ] );

return [ stylesheets, settings ];
return [ stylesheets, settings, svgFilters ];
}
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const PRESET_METADATA = [
path: [ 'color', 'duotone' ],
cssVarInfix: 'duotone',
valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
svgFilter: 'duotone',
},
{
path: [ 'typography', 'fontSizes' ],
Expand Down

0 comments on commit a86ce38

Please sign in to comment.