Skip to content

Commit

Permalink
Duotone: fix code typo (#62953)
Browse files Browse the repository at this point in the history
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
  • Loading branch information
4 people authored and gutenbergplugin committed Jul 1, 2024
1 parent 555a64e commit fe20128
Showing 1 changed file with 16 additions and 12 deletions.
28 changes: 16 additions & 12 deletions packages/block-editor/src/hooks/duotone.js
Original file line number Diff line number Diff line change
Expand Up @@ -295,26 +295,30 @@ function useDuotoneStyles( {
return;
}

// 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
// that used on the site frontend in `block-supports/duotone.php`.
// 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 that used on the site frontend in
// `block-supports/duotone.php`.
if ( blockElement && isSafari ) {
const display = blockElement.style.display;
// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
// is used instead of `none` to ensure that scroll position is not affected,
// as `none` results in the editor scrolling to the top of the block.
// Switch to `inline-block` to force a repaint. In the editor,
// `inline-block` is used instead of `none` to ensure that scroll
// position is not affected, as `none` results in the editor
// scrolling to the top of the block.
blockElement.style.display = 'inline-block';
// Simply accessing el.offsetHeight flushes layout and style
// changes in WebKit without having to wait for setTimeout.
// Simply accessing el.offsetHeight flushes layout and style changes
// in WebKit without having to wait for setTimeout.
// eslint-disable-next-line no-unused-expressions
blockElement.offsetHeight;
blockElement.style.display = display;
}
}, [ isValidFilter, blockElement ] );
// `colors` must be a dependency so this effect runs when the colors
// change in Safari.
}, [ isValidFilter, blockElement, colors ] );
}

function useBlockProps( { name, style } ) {
function useBlockProps( { clientId, name, style } ) {
const id = useInstanceId( useBlockProps );
const selector = useMemo( () => {
const blockType = getBlockType( name );
Expand Down Expand Up @@ -362,7 +366,7 @@ function useBlockProps( { name, style } ) {
const shouldRender = selector && attribute;

useDuotoneStyles( {
clientId: id,
clientId,
id: filterClass,
selector,
attribute,
Expand Down

1 comment on commit fe20128

@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 fe20128.
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/9740700729
📝 Reported issues:

Please sign in to comment.