Make WordPress Core

Changeset 54101


Ignore:
Timestamp:
09/08/2022 02:32:07 PM (21 months ago)
Author:
SergeyBiryukov
Message:

Editor: Update duotone block supports to allow unset for preset colors.

This add the ability to unset duotone in themes with default duotone set.

This commit backports the original PRs from Gutenberg repository:

Follow-up to [50929], [52757].

Props ajlende, jorgefilipecosta, Joen, cbravobernal.
See #56467.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/duotone.php

    r53012 r54101  
    374374 *
    375375 * @since 5.9.0
     376 * @since 6.1.0 Allow unset for preset colors.
    376377 * @access private
    377378 *
     
    380381 */
    381382function wp_get_duotone_filter_property( $preset ) {
     383    if ( isset( $preset['colors'] ) && 'unset' === $preset['colors'] ) {
     384        return 'none';
     385    }
    382386    $filter_id = wp_get_duotone_filter_id( $preset );
    383387    return "url('#" . $filter_id . "')";
     
    459463        // Clean up the whitespace.
    460464        $svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
    461         $svg = preg_replace( '/> </', '><', $svg );
     465        $svg = str_replace( '> <', '><', $svg );
    462466        $svg = trim( $svg );
    463467    }
     
    497501 *
    498502 * @since 5.8.0
     503 * @since 6.1.0 Allow unset for preset colors.
    499504 * @access private
    500505 *
     
    520525    }
    521526
     527    $colors          = $block['attrs']['style']['color']['duotone'];
     528    $filter_key      = is_array( $colors ) ? implode( '-', $colors ) : $colors;
    522529    $filter_preset   = array(
    523         'slug'   => wp_unique_id( sanitize_key( implode( '-', $block['attrs']['style']['color']['duotone'] ) . '-' ) ),
    524         'colors' => $block['attrs']['style']['color']['duotone'],
     530        'slug'   => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
     531        'colors' => $colors,
    525532    );
    526533    $filter_property = wp_get_duotone_filter_property( $filter_preset );
    527534    $filter_id       = wp_get_duotone_filter_id( $filter_preset );
    528     $filter_svg      = wp_get_duotone_filter_svg( $filter_preset );
    529535
    530536    $scope     = '.' . $filter_id;
     
    546552    wp_enqueue_style( $filter_id );
    547553
    548     add_action(
    549         'wp_footer',
    550         static function () use ( $filter_svg, $selector ) {
    551             echo $filter_svg;
    552 
    553             /*
    554              * Safari renders elements incorrectly on first paint when the SVG
    555              * filter comes after the content that it is filtering, so we force
    556              * a repaint with a WebKit hack which solves the issue.
    557              */
    558             global $is_safari;
    559             if ( $is_safari ) {
    560                 printf(
    561                     // Simply accessing el.offsetHeight flushes layout and style
    562                     // changes in WebKit without having to wait for setTimeout.
    563                     '<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
    564                     wp_json_encode( $selector )
    565                 );
     554    if ( 'unset' !== $colors ) {
     555        $filter_svg = wp_get_duotone_filter_svg( $filter_preset );
     556        add_action(
     557            'wp_footer',
     558            static function () use ( $filter_svg, $selector ) {
     559                echo $filter_svg;
     560
     561                /*
     562                 * Safari renders elements incorrectly on first paint when the
     563                 * SVG filter comes after the content that it is filtering, so
     564                 * we force a repaint with a WebKit hack which solves the issue.
     565                 */
     566                global $is_safari;
     567                if ( $is_safari ) {
     568                    /*
     569                     * Simply accessing el.offsetHeight flushes layout and style
     570                     * changes in WebKit without having to wait for setTimeout.
     571                     */
     572                    printf(
     573                        '<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
     574                        wp_json_encode( $selector )
     575                    );
     576                }
    566577            }
    567         }
    568     );
     578        );
     579    }
    569580
    570581    // Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
Note: See TracChangeset for help on using the changeset viewer.