From 4e90f5f0ff7a87395d5cb97aa26f6820c7e3ec98 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 23 May 2022 12:24:36 -0300 Subject: [PATCH 01/10] rendering duotone presets in pattern preview --- .../src/components/block-preview/auto.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index d2eca43010a7c0..6a147d2ed59fc3 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element'; import BlockList from '../block-list'; import Iframe from '../iframe'; import EditorStyles from '../editor-styles'; +import { PresetDuotoneFilter } from '../../hooks/duotone'; import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change. @@ -32,11 +33,12 @@ function AutoBlockPreview( { contentResizeListener, { height: contentHeight }, ] = useResizeObserver(); - const { styles, assets } = useSelect( ( select ) => { + const { styles, assets, duotone } = useSelect( ( select ) => { const settings = select( store ).getSettings(); return { styles: settings.styles, assets: settings.__unstableResolvedAssets, + duotone: settings.__experimentalFeatures?.color?.duotone, }; }, [] ); @@ -55,11 +57,14 @@ function AutoBlockPreview( { return styles; }, [ styles ] ); + const duotonePresets = useMemo( () => { + return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ]; + }, [ duotone ] ); + // Initialize on render instead of module top level, to avoid circular dependency issues. MemoizedBlockList = MemoizedBlockList || pure( BlockList ); const scale = containerWidth / viewportWidth; - return (
{ containerResizeListener } @@ -110,6 +115,12 @@ function AutoBlockPreview( { } } > { contentResizeListener } + { duotonePresets.map( ( preset ) => ( + + ) ) } From bdcd12703c58f33b35ddc8b2049170d7065c802d Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Tue, 24 May 2022 09:44:14 -0300 Subject: [PATCH 02/10] adding commet regarding svgFilters rendering --- .../src/components/block-preview/auto.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index 6a147d2ed59fc3..b6e6d5615f287b 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -115,12 +115,15 @@ function AutoBlockPreview( { } } > { contentResizeListener } - { duotonePresets.map( ( preset ) => ( - - ) ) } + { + /* Filters need to be rendered before children to avoid Safari rendering issues. */ + duotonePresets.map( ( preset ) => ( + + ) ) + } From 2e0f0987c4850b69849657f12710d21f27328405 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Tue, 24 May 2022 09:45:19 -0300 Subject: [PATCH 03/10] renaming variable containing duotone svg filter presets --- packages/block-editor/src/components/block-preview/auto.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index b6e6d5615f287b..6e49f7909a93d8 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -57,7 +57,7 @@ function AutoBlockPreview( { return styles; }, [ styles ] ); - const duotonePresets = useMemo( () => { + const svgFilters = useMemo( () => { return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ]; }, [ duotone ] ); @@ -117,7 +117,7 @@ function AutoBlockPreview( { { contentResizeListener } { /* Filters need to be rendered before children to avoid Safari rendering issues. */ - duotonePresets.map( ( preset ) => ( + svgFilters.map( ( preset ) => ( Date: Thu, 9 Jun 2022 13:28:52 -0300 Subject: [PATCH 04/10] Duotone: moving components away from duotone hook file --- packages/block-editor/README.md | 54 +++++++ .../src/components/block-preview/auto.js | 2 +- .../src/components/duotone/components.js | 144 +++++++++++++++++ .../src/components/duotone/index.js | 2 + .../src/components/duotone/utils.js | 25 +++ packages/block-editor/src/components/index.js | 1 + packages/block-editor/src/hooks/duotone.js | 152 +----------------- packages/block-editor/src/hooks/index.js | 1 - packages/block-editor/src/index.js | 2 +- 9 files changed, 230 insertions(+), 153 deletions(-) create mode 100644 packages/block-editor/src/components/duotone/components.js create mode 100644 packages/block-editor/src/components/duotone/index.js create mode 100644 packages/block-editor/src/components/duotone/utils.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 57820884bb20da..f68c151ef9fa88 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -347,6 +347,20 @@ _Returns_ Undocumented declaration. +### DuotoneFilter + +SVG for rendering the duotone filter. + +_Parameters_ + +- _props_ `Object`: Duotone props. +- _props.id_ `string`: Unique id for this duotone filter. +- _props.values_ `Values`: R, G, B, and A values to filter with. + +_Returns_ + +- `WPElement`: Duotone element. + ### FontSizePicker _Related_ @@ -473,6 +487,33 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. +### getValuesFromColors + +Convert a list of colors to an object of R, G, and B values. + +_Parameters_ + +- _colors_ `string[]`: Array of RBG color strings. + +_Returns_ + +- `Object`: R, G, and B values. + +### InlineDuotone + +SVG and stylesheet needed for rendering the duotone filter. + +_Parameters_ + +- _props_ `Object`: Duotone props. +- _props.selector_ `string`: Selector to apply the filter to. +- _props.id_ `string`: Unique id for this duotone filter. +- _props.values_ `Values`: R, G, B, and A values to filter with. + +_Returns_ + +- `WPElement`: Duotone element. + ### InnerBlocks _Related_ @@ -562,6 +603,19 @@ _Related_ - +### PresetDuotoneFilter + +SVG filter from on a duotone preset. + +_Parameters_ + +- _props_ `Object`: Preset props. +- _props.preset_ `Object`: Duotone preset. + +_Returns_ + +- `WPElement`: Duotone element. + ### RichText _Related_ diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index 6e49f7909a93d8..e3281f77998c38 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element'; import BlockList from '../block-list'; import Iframe from '../iframe'; import EditorStyles from '../editor-styles'; -import { PresetDuotoneFilter } from '../../hooks/duotone'; +import { PresetDuotoneFilter } from '../../components/duotone/index'; import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change. diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js new file mode 100644 index 00000000000000..3703983a422959 --- /dev/null +++ b/packages/block-editor/src/components/duotone/components.js @@ -0,0 +1,144 @@ +/** + * WordPress dependencies + */ +import { SVG } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { getValuesFromColors } from './index'; + +/** + * Values for the SVG `feComponentTransfer`. + * + * @typedef Values {Object} + * @property {number[]} r Red values. + * @property {number[]} g Green values. + * @property {number[]} b Blue values. + * @property {number[]} a Alpha values. + */ + +/** + * 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. + * + * @return {WPElement} Duotone element. + */ +function DuotoneStylesheet( { selector, id } ) { + const css = ` +${ selector } { + filter: url( #${ id } ); +} +`; + return ; +} + +/** + * 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. + */ +export function DuotoneFilter( { id, values } ) { + return ( + + + + + + + + + + + + + + + ); +} + +/** + * 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. + */ +export function InlineDuotone( { selector, id, values } ) { + return ( + <> + + + + ); +} + +/** + * SVG filter from on a duotone preset. + * + * @param {Object} props Preset props. + * @param {Object} props.preset Duotone preset. + * + * @return {WPElement} Duotone element. + */ +export function PresetDuotoneFilter( { preset } ) { + return ( + + ); +} diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js new file mode 100644 index 00000000000000..6ed8b54965dbf3 --- /dev/null +++ b/packages/block-editor/src/components/duotone/index.js @@ -0,0 +1,2 @@ +export * from './utils'; +export * from './components'; diff --git a/packages/block-editor/src/components/duotone/utils.js b/packages/block-editor/src/components/duotone/utils.js new file mode 100644 index 00000000000000..d7cbd0ccba26e9 --- /dev/null +++ b/packages/block-editor/src/components/duotone/utils.js @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { colord } from 'colord'; + +/** + * Convert a list of colors to an object of R, G, and B values. + * + * @param {string[]} colors Array of RBG color strings. + * + * @return {Object} R, G, and B values. + */ +export function getValuesFromColors( colors = [] ) { + const values = { r: [], g: [], b: [], a: [] }; + + colors.forEach( ( color ) => { + const rgbColor = colord( color ).toRgb(); + values.r.push( rgbColor.r / 255 ); + values.g.push( rgbColor.g / 255 ); + values.b.push( rgbColor.b / 255 ); + values.a.push( rgbColor.a ); + } ); + + return values; +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 28f65deed4118a..89af773394aa06 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -5,6 +5,7 @@ export * from './colors'; export * from './gradients'; export * from './font-sizes'; +export * from './duotone'; export { AlignmentControl, AlignmentToolbar } from './alignment-control'; export { default as Autocomplete } from './autocomplete'; export { diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 27866f580d7373..11aeec9460792b 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -2,14 +2,13 @@ * External dependencies */ import classnames from 'classnames'; -import { colord, extend } from 'colord'; +import { extend } from 'colord'; import namesPlugin from 'colord/plugins/names'; /** * WordPress dependencies */ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; -import { SVG } from '@wordpress/components'; import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; import { useMemo, useContext, createPortal } from '@wordpress/element'; @@ -23,150 +22,12 @@ import { useSetting, } from '../components'; import BlockList from '../components/block-list'; +import { getValuesFromColors, InlineDuotone } from '../components/duotone'; const EMPTY_ARRAY = []; extend( [ namesPlugin ] ); -/** - * Convert a list of colors to an object of R, G, and B values. - * - * @param {string[]} colors Array of RBG color strings. - * - * @return {Object} R, G, and B values. - */ -export function getValuesFromColors( colors = [] ) { - const values = { r: [], g: [], b: [], a: [] }; - - colors.forEach( ( color ) => { - const rgbColor = colord( color ).toRgb(); - values.r.push( rgbColor.r / 255 ); - values.g.push( rgbColor.g / 255 ); - values.b.push( rgbColor.b / 255 ); - values.a.push( rgbColor.a ); - } ); - - return values; -} - -/** - * Values for the SVG `feComponentTransfer`. - * - * @typedef Values {Object} - * @property {number[]} r Red values. - * @property {number[]} g Green values. - * @property {number[]} b Blue values. - * @property {number[]} a Alpha values. - */ - -/** - * 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. - * - * @return {WPElement} Duotone element. - */ -function DuotoneStylesheet( { selector, id } ) { - const css = ` -${ selector } { - filter: url( #${ id } ); -} -`; - return ; -} - -/** - * 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 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 ( - <> - - - - ); -} - function useMultiOriginPresets( { presetSetting, defaultSetting } ) { const disableDefault = ! useSetting( defaultSetting ); const userPresets = @@ -362,15 +223,6 @@ const withDuotoneStyles = createHigherOrderComponent( 'withDuotoneStyles' ); -export function PresetDuotoneFilter( { preset } ) { - return ( - - ); -} - addFilter( 'blocks.registerBlockType', 'core/editor/duotone/add-attributes', diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 36c3181092a17a..f95d4771a1c3b9 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -20,4 +20,3 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { useCachedTruthy } from './use-cached-truthy'; -export { PresetDuotoneFilter } from './duotone'; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 594c78859b25c8..1bbd3cf139fa90 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -3,7 +3,6 @@ */ import './hooks'; export { - PresetDuotoneFilter as __unstablePresetDuotoneFilter, getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, @@ -17,3 +16,4 @@ export * from './elements'; export * from './utils'; export { storeConfig, store } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; +export { PresetDuotoneFilter as __unstablePresetDuotoneFilter } from './components/duotone'; From a82602f931c253d8134c80d1621663243a35d257 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 9 Jun 2022 15:31:51 -0300 Subject: [PATCH 05/10] Reveting docs changes --- packages/block-editor/README.md | 53 --------------------------------- 1 file changed, 53 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index f68c151ef9fa88..765bb1af4bc22b 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -347,20 +347,6 @@ _Returns_ Undocumented declaration. -### DuotoneFilter - -SVG for rendering the duotone filter. - -_Parameters_ - -- _props_ `Object`: Duotone props. -- _props.id_ `string`: Unique id for this duotone filter. -- _props.values_ `Values`: R, G, B, and A values to filter with. - -_Returns_ - -- `WPElement`: Duotone element. - ### FontSizePicker _Related_ @@ -487,32 +473,6 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. -### getValuesFromColors - -Convert a list of colors to an object of R, G, and B values. - -_Parameters_ - -- _colors_ `string[]`: Array of RBG color strings. - -_Returns_ - -- `Object`: R, G, and B values. - -### InlineDuotone - -SVG and stylesheet needed for rendering the duotone filter. - -_Parameters_ - -- _props_ `Object`: Duotone props. -- _props.selector_ `string`: Selector to apply the filter to. -- _props.id_ `string`: Unique id for this duotone filter. -- _props.values_ `Values`: R, G, B, and A values to filter with. - -_Returns_ - -- `WPElement`: Duotone element. ### InnerBlocks @@ -603,19 +563,6 @@ _Related_ - -### PresetDuotoneFilter - -SVG filter from on a duotone preset. - -_Parameters_ - -- _props_ `Object`: Preset props. -- _props.preset_ `Object`: Duotone preset. - -_Returns_ - -- `WPElement`: Duotone element. - ### RichText _Related_ From 052c459e248a988fbf175a4824a48205437094dd Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 9 Jun 2022 15:38:54 -0300 Subject: [PATCH 06/10] exporting components as __unstable --- .../src/components/block-preview/auto.js | 2 +- .../src/components/duotone/components.js | 42 ++++++------------- .../src/components/duotone/index.js | 8 +++- packages/block-editor/src/hooks/duotone.js | 35 +++++++++++++++- packages/block-editor/src/index.js | 1 - 5 files changed, 53 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index e3281f77998c38..b4ac3a58a19e37 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element'; import BlockList from '../block-list'; import Iframe from '../iframe'; import EditorStyles from '../editor-styles'; -import { PresetDuotoneFilter } from '../../components/duotone/index'; +import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone'; import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change. diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js index 3703983a422959..7a4f4a65ad9ad9 100644 --- a/packages/block-editor/src/components/duotone/components.js +++ b/packages/block-editor/src/components/duotone/components.js @@ -6,17 +6,8 @@ import { SVG } from '@wordpress/components'; /** * Internal dependencies */ -import { getValuesFromColors } from './index'; +import { __unstableGetValuesFromColors as getValuesFromColors } from './index'; -/** - * Values for the SVG `feComponentTransfer`. - * - * @typedef Values {Object} - * @property {number[]} r Red values. - * @property {number[]} g Green values. - * @property {number[]} b Blue values. - * @property {number[]} a Alpha values. - */ /** * Stylesheet for rendering the duotone filter. @@ -27,7 +18,7 @@ import { getValuesFromColors } from './index'; * * @return {WPElement} Duotone element. */ -function DuotoneStylesheet( { selector, id } ) { +export function DuotoneStylesheet( { selector, id } ) { const css = ` ${ selector } { filter: url( #${ id } ); @@ -36,6 +27,16 @@ ${ selector } { return ; } +/** + * Values for the SVG `feComponentTransfer`. + * + * @typedef Values {Object} + * @property {number[]} r Red values. + * @property {number[]} g Green values. + * @property {number[]} b Blue values. + * @property {number[]} a Alpha values. + */ + /** * SVG for rendering the duotone filter. * @@ -107,25 +108,6 @@ export function DuotoneFilter( { id, values } ) { ); } -/** - * 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. - */ -export function InlineDuotone( { selector, id, values } ) { - return ( - <> - - - - ); -} - /** * SVG filter from on a duotone preset. * diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js index 6ed8b54965dbf3..cf097fef84ad85 100644 --- a/packages/block-editor/src/components/duotone/index.js +++ b/packages/block-editor/src/components/duotone/index.js @@ -1,2 +1,6 @@ -export * from './utils'; -export * from './components'; +export { getValuesFromColors as __unstableGetValuesFromColors } from './utils'; +export { + DuotoneFilter as __unstableDuotoneFilter, + PresetDuotoneFilter as __unstablePresetDuotoneFilter, + DuotoneStylesheet as __unstableDuotoneStylesheet, +} from './components'; diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 11aeec9460792b..2c07ae677dde33 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -22,7 +22,11 @@ import { useSetting, } from '../components'; import BlockList from '../components/block-list'; -import { getValuesFromColors, InlineDuotone } from '../components/duotone'; +import { + __unstableGetValuesFromColors as getValuesFromColors, + __unstableDuotoneFilter as DuotoneFilter, + __unstableDuotoneStylesheet as DuotoneStylesheet, +} from '../components/duotone'; const EMPTY_ARRAY = []; @@ -172,6 +176,35 @@ function scopeSelector( scope, selector ) { return selectorsScoped.join( ', ' ); } +/** + * Values for the SVG `feComponentTransfer`. + * + * @typedef Values {Object} + * @property {number[]} r Red values. + * @property {number[]} g Green values. + * @property {number[]} b Blue values. + * @property {number[]} a Alpha values. + */ + +/** + * 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. + */ + export function InlineDuotone( { selector, id, values } ) { + return ( + <> + + + + ); +} + /** * Override the default block element to include duotone styles. * diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 1bbd3cf139fa90..b2fe8aec5e1ff0 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -16,4 +16,3 @@ export * from './elements'; export * from './utils'; export { storeConfig, store } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; -export { PresetDuotoneFilter as __unstablePresetDuotoneFilter } from './components/duotone'; From 5e72aa41e7aff746e5ab63ffa0c0936a05ea8a31 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 9 Jun 2022 15:59:36 -0300 Subject: [PATCH 07/10] removing not needed change --- packages/block-editor/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 765bb1af4bc22b..57820884bb20da 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -473,7 +473,6 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. - ### InnerBlocks _Related_ From 45d4662228519aebcdb3f0048489f110cac0554a Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 9 Jun 2022 16:07:13 -0300 Subject: [PATCH 08/10] lint --- packages/block-editor/src/components/duotone/components.js | 7 +++---- packages/block-editor/src/hooks/duotone.js | 4 ++-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js index 7a4f4a65ad9ad9..273ada5db272eb 100644 --- a/packages/block-editor/src/components/duotone/components.js +++ b/packages/block-editor/src/components/duotone/components.js @@ -8,7 +8,6 @@ import { SVG } from '@wordpress/components'; */ import { __unstableGetValuesFromColors as getValuesFromColors } from './index'; - /** * Stylesheet for rendering the duotone filter. * @@ -109,10 +108,10 @@ export function DuotoneFilter( { id, values } ) { } /** - * SVG filter from on a duotone preset. + * SVG from a duotone preset * - * @param {Object} props Preset props. - * @param {Object} props.preset Duotone preset. + * @param {Object} props Duotone props. + * @param {Object} props.preset Duotone preset settings. * * @return {WPElement} Duotone element. */ diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 2c07ae677dde33..2397c6a4c7d980 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -22,7 +22,7 @@ import { useSetting, } from '../components'; import BlockList from '../components/block-list'; -import { +import { __unstableGetValuesFromColors as getValuesFromColors, __unstableDuotoneFilter as DuotoneFilter, __unstableDuotoneStylesheet as DuotoneStylesheet, @@ -196,7 +196,7 @@ function scopeSelector( scope, selector ) { * * @return {WPElement} Duotone element. */ - export function InlineDuotone( { selector, id, values } ) { +export function InlineDuotone( { selector, id, values } ) { return ( <> From db3d248a7a662e71b32befaa202a0709f6fbb43d Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 10 Jun 2022 09:26:39 -0300 Subject: [PATCH 09/10] lint --- packages/block-editor/src/components/duotone/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js index cf097fef84ad85..22379cd44e0be4 100644 --- a/packages/block-editor/src/components/duotone/index.js +++ b/packages/block-editor/src/components/duotone/index.js @@ -1,6 +1,6 @@ export { getValuesFromColors as __unstableGetValuesFromColors } from './utils'; export { - DuotoneFilter as __unstableDuotoneFilter, - PresetDuotoneFilter as __unstablePresetDuotoneFilter, - DuotoneStylesheet as __unstableDuotoneStylesheet, + DuotoneFilter as __unstableDuotoneFilter, + PresetDuotoneFilter as __unstablePresetDuotoneFilter, + DuotoneStylesheet as __unstableDuotoneStylesheet, } from './components'; From 51a09b2cd983409257e187e6c5fdc3117563d593 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Mon, 20 Jun 2022 12:07:39 -0300 Subject: [PATCH 10/10] lint --- .../src/components/block-preview/auto.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index d919e35ae7535c..5a78e7abeb3b4c 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -25,14 +25,10 @@ function AutoBlockPreview( { __experimentalPadding, __experimentalMinHeight, } ) { - const [ - containerResizeListener, - { width: containerWidth }, - ] = useResizeObserver(); - const [ - contentResizeListener, - { height: contentHeight }, - ] = useResizeObserver(); + const [ containerResizeListener, { width: containerWidth } ] = + useResizeObserver(); + const [ contentResizeListener, { height: contentHeight } ] = + useResizeObserver(); const { styles, assets, duotone } = useSelect( ( select ) => { const settings = select( store ).getSettings(); return {