WordPress.org

Make WordPress Core

Changeset 50977


Ignore:
Timestamp:
05/24/2021 06:56:09 PM (4 months ago)
Author:
jorgefilipecosta
Message:

Block Editor: Update color merging algorithm.

The npm packages in use were published a few hours ago, which include some changes to how we manage colors. This commit adds the corresponding PHP changes.

Props nosolosw.
See #53175.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-theme-json.php

    r50973 r50977  
    10181018     * @param WP_Theme_JSON $incoming Data to merge.
    10191019     */
    1020     public function merge( $incoming ) {
     1020    public function merge( $incoming, $update_or_remove = 'remove' ) {
    10211021        $incoming_data    = $incoming->get_raw_data();
     1022        $existing_data = $this->theme_json;
     1023
     1024        // The array_replace_recursive algorithm merges at the leaf level.
     1025        // For leaf values that are arrays it will use the numeric indexes for replacement.
    10221026        $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
    10231027
    1024         /*
    1025          * The array_replace_recursive algorithm merges at the leaf level.
    1026          * For leaf values that are arrays it will use the numeric indexes for replacement.
    1027          * In those cases, what we want is to use the incoming value, if it exists.
    1028          *
    1029          * These are the cases that have array values at the leaf levels.
    1030          */
    1031         $properties   = array();
    1032         $properties[] = array( 'color', 'palette' );
    1033         $properties[] = array( 'color', 'gradients' );
    1034         $properties[] = array( 'custom' );
    1035         $properties[] = array( 'spacing', 'units' );
    1036         $properties[] = array( 'typography', 'fontSizes' );
    1037         $properties[] = array( 'typography', 'fontFamilies' );
     1028        // There are a few cases in which we want to merge things differently
     1029        // from what array_replace_recursive does.
     1030
     1031        // Some incoming properties should replace the existing.
     1032        $to_replace   = array();
     1033        $to_replace[] = array( 'custom' );
     1034        $to_replace[] = array( 'spacing', 'units' );
     1035        $to_replace[] = array( 'typography', 'fontSizes' );
     1036        $to_replace[] = array( 'typography', 'fontFamilies' );
     1037
     1038        // Some others should be appended to the existing.
     1039        // If the slug is the same than an existing element,
     1040        // the $update_or_remove param is used to decide
     1041        // what to do with the existing element:
     1042        // either remove it and append the incoming,
     1043        // or update it with the incoming.
     1044        $to_append   = array();
     1045        $to_append[] = array( 'color', 'duotone' );
     1046        $to_append[] = array( 'color', 'gradients' );
     1047        $to_append[] = array( 'color', 'palette' );
    10381048
    10391049        $nodes = self::get_setting_nodes( $this->theme_json );
    10401050        foreach ( $nodes as $metadata ) {
    1041             foreach ( $properties as $property_path ) {
    1042                 $path = array_merge( $metadata['path'], $property_path );
     1051            foreach ( $to_replace as $path_to_replace ) {
     1052                $path = array_merge( $metadata['path'], $path_to_replace );
    10431053                $node = _wp_array_get( $incoming_data, $path, array() );
    10441054                if ( ! empty( $node ) ) {
    10451055                    _wp_array_set( $this->theme_json, $path, $node );
    10461056                }
     1057            }
     1058            foreach ( $to_append as $path_to_append ) {
     1059                $path          = array_merge( $metadata['path'], $path_to_append );
     1060                $incoming_node = _wp_array_get( $incoming_data, $path, array() );
     1061                $existing_node = _wp_array_get( $existing_data, $path, array() );
     1062
     1063                if ( empty( $incoming_node ) && empty( $existing_node ) ) {
     1064                    continue;
     1065                }
     1066
     1067                $index_table    = array();
     1068                $existing_slugs = array();
     1069                $merged         = array();
     1070                foreach ( $existing_node as $key => $value ) {
     1071                    $index_table[ $value['slug'] ] = $key;
     1072                    $existing_slugs[]              = $value['slug'];
     1073                    $merged[ $key ]                = $value;
     1074                }
     1075
     1076                $to_remove = array();
     1077                foreach ( $incoming_node as $value ) {
     1078                    if ( ! in_array( $value['slug'], $existing_slugs, true ) ) {
     1079                        $merged[] = $value;
     1080                    } elseif ( 'update' === $update_or_remove ) {
     1081                        $merged[ $index_table[ $value['slug'] ] ] = $value;
     1082                    } else {
     1083                        $merged[]    = $value;
     1084                        $to_remove[] = $index_table[ $value['slug'] ];
     1085                    }
     1086                }
     1087
     1088                // Remove the duplicated values and pack the sparsed array.
     1089                foreach ( $to_remove as $index ) {
     1090                    unset( $merged[ $index ] );
     1091                }
     1092                $merged = array_values( $merged );
     1093
     1094                _wp_array_set( $this->theme_json, $path, $merged );
    10471095            }
    10481096        }
  • trunk/src/wp-includes/theme.json

    r50959 r50977  
    5151                    "name": "Vivid cyan blue to vivid purple",
    5252                    "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
    53                     "slug": "vivid-cyan-blue-to-vivid-purple"
     53                    "slug": "vivid-cyan-blue-to-vivid-purple",
     54                    "origin": "core"
    5455                },
    5556                {
    5657                    "name": "Light green cyan to vivid green cyan",
    5758                    "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
    58                     "slug": "light-green-cyan-to-vivid-green-cyan"
     59                    "slug": "light-green-cyan-to-vivid-green-cyan",
     60                    "origin": "core"
    5961                },
    6062                {
    6163                    "name": "Luminous vivid amber to luminous vivid orange",
    6264                    "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
    63                     "slug": "luminous-vivid-amber-to-luminous-vivid-orange"
     65                    "slug": "luminous-vivid-amber-to-luminous-vivid-orange",
     66                    "origin": "core"
    6467                },
    6568                {
    6669                    "name": "Luminous vivid orange to vivid red",
    6770                    "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
    68                     "slug": "luminous-vivid-orange-to-vivid-red"
     71                    "slug": "luminous-vivid-orange-to-vivid-red",
     72                    "origin": "core"
    6973                },
    7074                {
    7175                    "name": "Very light gray to cyan bluish gray",
    7276                    "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
    73                     "slug": "very-light-gray-to-cyan-bluish-gray"
     77                    "slug": "very-light-gray-to-cyan-bluish-gray",
     78                    "origin": "core"
    7479                },
    7580                {
    7681                    "name": "Cool to warm spectrum",
    7782                    "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
    78                     "slug": "cool-to-warm-spectrum"
     83                    "slug": "cool-to-warm-spectrum",
     84                    "origin": "core"
    7985                },
    8086                {
    8187                    "name": "Blush light purple",
    8288                    "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
    83                     "slug": "blush-light-purple"
     89                    "slug": "blush-light-purple",
     90                    "origin": "core"
    8491                },
    8592                {
    8693                    "name": "Blush bordeaux",
    8794                    "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
    88                     "slug": "blush-bordeaux"
     95                    "slug": "blush-bordeaux",
     96                    "origin": "core"
    8997                },
    9098                {
    9199                    "name": "Luminous dusk",
    92100                    "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
    93                     "slug": "luminous-dusk"
     101                    "slug": "luminous-dusk",
     102                    "origin": "core"
    94103                },
    95104                {
    96105                    "name": "Pale ocean",
    97106                    "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
    98                     "slug": "pale-ocean"
     107                    "slug": "pale-ocean",
     108                    "origin": "core"
    99109                },
    100110                {
    101111                    "name": "Electric grass",
    102112                    "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
    103                     "slug": "electric-grass"
     113                    "slug": "electric-grass",
     114                    "origin": "core"
    104115                },
    105116                {
    106117                    "name": "Midnight",
    107118                    "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
    108                     "slug": "midnight"
     119                    "slug": "midnight",
     120                    "origin": "core"
    109121                }
    110122            ],
     
    114126                    "name": "Black",
    115127                    "slug": "black",
    116                     "color": "#000000"
     128                    "color": "#000000",
     129                    "origin": "core"
    117130                },
    118131                {
    119132                    "name": "Cyan bluish gray",
    120133                    "slug": "cyan-bluish-gray",
    121                     "color": "#abb8c3"
     134                    "color": "#abb8c3",
     135                    "origin": "core"
    122136                },
    123137                {
    124138                    "name": "White",
    125139                    "slug": "white",
    126                     "color": "#ffffff"
     140                    "color": "#ffffff",
     141                    "origin": "core"
    127142                },
    128143                {
    129144                    "name": "Pale pink",
    130145                    "slug": "pale-pink",
    131                     "color": "#f78da7"
     146                    "color": "#f78da7",
     147                    "origin": "core"
    132148                },
    133149                {
    134150                    "name": "Vivid red",
    135151                    "slug": "vivid-red",
    136                     "color": "#cf2e2e"
     152                    "color": "#cf2e2e",
     153                    "origin": "core"
    137154                },
    138155                {
    139156                    "name": "Luminous vivid orange",
    140157                    "slug": "luminous-vivid-orange",
    141                     "color": "#ff6900"
     158                    "color": "#ff6900",
     159                    "origin": "core"
    142160                },
    143161                {
    144162                    "name": "Luminous vivid amber",
    145163                    "slug": "luminous-vivid-amber",
    146                     "color": "#fcb900"
     164                    "color": "#fcb900",
     165                    "origin": "core"
    147166                },
    148167                {
    149168                    "name": "Light green cyan",
    150169                    "slug": "light-green-cyan",
    151                     "color": "#7bdcb5"
     170                    "color": "#7bdcb5",
     171                    "origin": "core"
    152172                },
    153173                {
    154174                    "name": "Vivid green cyan",
    155175                    "slug": "vivid-green-cyan",
    156                     "color": "#00d084"
     176                    "color": "#00d084",
     177                    "origin": "core"
    157178                },
    158179                {
    159180                    "name": "Pale cyan blue",
    160181                    "slug": "pale-cyan-blue",
    161                     "color": "#8ed1fc"
     182                    "color": "#8ed1fc",
     183                    "origin": "core"
    162184                },
    163185                {
    164186                    "name": "Vivid cyan blue",
    165187                    "slug": "vivid-cyan-blue",
    166                     "color": "#0693e3"
     188                    "color": "#0693e3",
     189                    "origin": "core"
    167190                },
    168191                {
    169192                    "name": "Vivid purple",
    170193                    "slug": "vivid-purple",
    171                     "color": "#9b51e0"
     194                    "color": "#9b51e0",
     195                    "origin": "core"
    172196                }
    173197            ]
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r50973 r50977  
    410410                    'palette'        => array(
    411411                        array(
     412                            'slug'  => 'red',
     413                            'color' => 'red',
     414                        ),
     415                        array(
     416                            'slug'  => 'green',
     417                            'color' => 'green',
     418                        ),
     419                        array(
    412420                            'slug'  => 'blue',
    413421                            'color' => 'blue',
Note: See TracChangeset for help on using the changeset viewer.