Skip to content

Commit

Permalink
Try rendering SVGs from server
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Lende committed Feb 1, 2022
1 parent 59b4151 commit a493443
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 149 deletions.
10 changes: 10 additions & 0 deletions lib/full-site-editing/edit-site-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,16 @@ 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: 62 additions & 112 deletions packages/block-editor/src/hooks/duotone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,109 +60,82 @@ export function getValuesFromColors( colors = [] ) {
*/

/**
* Stylesheet for rendering the duotone filter.
* 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 DuotoneStylesheet( { selector, id } ) {
const css = `
function DuotoneFilter( { selector, id, values } ) {
const stylesheet = `
${ 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
"
/>
<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( ' ' ) }
<>
<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
"
/>
<feFuncA
type="table"
tableValues={ values.a.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"
/>
</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 } />
</filter>
</defs>
</SVG>
<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
</>
);
}
Expand Down Expand Up @@ -324,7 +297,7 @@ const withDuotoneStyles = createHigherOrderComponent(
<>
{ element &&
createPortal(
<InlineDuotone
<DuotoneFilter
selector={ selectorsGroup }
id={ id }
values={ getValuesFromColors( values ) }
Expand All @@ -338,24 +311,6 @@ 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 @@ -371,8 +326,3 @@ addFilter(
'core/editor/duotone/with-styles',
withDuotoneStyles
);
addFilter(
'editor.PresetSvgFilter',
'core/editor/duotone/with-svg-filter',
withDuotoneFilter
);
6 changes: 5 additions & 1 deletion 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,7 +183,11 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
className="edit-site-visual-editor__editor-canvas"
{ ...props }
>
{ settings.svgFilters }
<span
dangerouslySetInnerHTML={ {
__html: window._wpSvgFilters,
} }
/>
{ children }
</Iframe>
</ResizableBox>
Expand Down
3 changes: 1 addition & 2 deletions 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, svgFilters ] = useGlobalStylesOutput();
const [ styles, settings ] = useGlobalStylesOutput();
const { getSettings } = useSelect( editSiteStore );
const { updateSettings } = useDispatch( editSiteStore );

Expand All @@ -31,7 +31,6 @@ function useGlobalStylesRenderer() {
updateSettings( {
...currentStoreSettings,
styles: [ ...nonGlobalStyles, ...styles ],
svgFilters,
__experimentalFeatures: settings,
} );
}, [ styles, settings ] );
Expand Down
34 changes: 1 addition & 33 deletions 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,7 +22,6 @@ import {
__EXPERIMENTAL_ELEMENTS as ELEMENTS,
getBlockTypes,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { useEffect, useState, useContext } from '@wordpress/element';

/**
Expand Down Expand Up @@ -134,27 +133,6 @@ 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 @@ -377,13 +355,6 @@ 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 @@ -403,7 +374,6 @@ 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 @@ -417,7 +387,6 @@ export function useGlobalStylesOutput() {
blockSelectors
);
const globalStyles = toStyles( mergedConfig, blockSelectors );
const filters = toSvgFilters( mergedConfig, blockSelectors );
setStylesheets( [
{
css: customProperties,
Expand All @@ -429,8 +398,7 @@ export function useGlobalStylesOutput() {
},
] );
setSettings( mergedConfig.settings );
setSvgFilters( filters );
}, [ mergedConfig ] );

return [ stylesheets, settings, svgFilters ];
return [ stylesheets, settings ];
}
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ 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 a493443

Please sign in to comment.