Make WordPress Core

Changeset 46793 for trunk


Ignore:
Timestamp:
11/28/2019 12:27:21 AM (5 years ago)
Author:
SergeyBiryukov
Message:

KSES: Add support for gradient backgrounds.

Props jorgefilipecosta.
Fixes #48376.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/kses.php

    r46660 r46793  
    20742074     * @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties.
    20752075     *              Extend `background-*` support of individual properties.
     2076     * @since 5.3.1 Added support for gradient backgrounds.
    20762077     *
    20772078     * @param string[] $attr Array of allowed CSS attributes.
     
    22102211    );
    22112212
     2213    /*
     2214     * CSS attributes that accept gradient data types.
     2215     *
     2216     */
     2217    $css_gradient_data_types = array(
     2218        'background',
     2219        'background-image',
     2220    );
     2221
    22122222    if ( empty( $allowed_attr ) ) {
    22132223        return $css;
     
    22242234        $found           = false;
    22252235        $url_attr        = false;
     2236        $gradient_attr   = false;
    22262237
    22272238        if ( strpos( $css_item, ':' ) === false ) {
     
    22322243
    22332244            if ( in_array( $css_selector, $allowed_attr, true ) ) {
    2234                 $found    = true;
    2235                 $url_attr = in_array( $css_selector, $css_url_data_types, true );
     2245                $found         = true;
     2246                $url_attr      = in_array( $css_selector, $css_url_data_types, true );
     2247                $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true );
    22362248            }
    22372249        }
     
    22592271                    $css_test_string = str_replace( $url_match, '', $css_test_string );
    22602272                }
     2273            }
     2274        }
     2275
     2276        if ( $found && $gradient_attr ) {
     2277            $css_value = trim( $parts[1] );
     2278            if ( preg_match( '/^(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)$/', $css_value ) ) {
     2279                // Remove the whole `gradient` bit that was matched above from the CSS.
     2280                $css_test_string = str_replace( $css_value, '', $css_test_string );
    22612281            }
    22622282        }
  • trunk/tests/phpunit/tests/kses.php

    r46586 r46793  
    753753     * Testing the safecss_filter_attr() function.
    754754     *
     755     * @ticket 37248
    755756     * @ticket 42729
     757     * @ticket 48376
    756758     * @dataProvider data_test_safecss_filter_attr
    757759     *
     
    879881                'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
    880882            ),
     883            // Gradients introduced in 5.3.
     884            array(
     885                'css'      => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     886                'expected' => 'background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     887            ),
     888            array(
     889                'css'      => 'background: linear-gradient(135deg,rgba(6,147,227,1) ) (0%,rgb(155,81,224) 100%)',
     890                'expected' => '',
     891            ),
     892            array(
     893                'css'      => 'background-image: linear-gradient(red,yellow);',
     894                'expected' => 'background-image: linear-gradient(red,yellow)',
     895            ),
     896            array(
     897                'css'      => 'color: linear-gradient(red,yellow);',
     898                'expected' => '',
     899            ),
     900            array(
     901                'css'      => 'background-image: linear-gradient(red,yellow); background: prop( red,yellow); width: 100px;',
     902                'expected' => 'background-image: linear-gradient(red,yellow);width: 100px',
     903            ),
     904            array(
     905                'css'      => 'background: unknown-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     906                'expected' => '',
     907            ),
     908            array(
     909                'css'      => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     910                'expected' => 'background: repeating-linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
     911            ),
     912            array(
     913                'css'      => 'width: 100px; height: 100px; background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);',
     914                'expected' => 'width: 100px;height: 100px;background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
     915            ),
     916            array(
     917                'css'      => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);',
     918                'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)',
     919            ),
     920            array(
     921                'css'      => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%);',
     922                'expected' => 'background: radial-gradient(#ff0, red, yellow, green, rgba(6,147,227,1), rgb(155,81,224) 90%)',
     923            ),
     924            array(
     925                'css'      => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)',
     926                'expected' => 'background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%)',
     927            ),
     928
    881929        );
    882930    }
Note: See TracChangeset for help on using the changeset viewer.