WordPress.org

Make WordPress Core

Changeset 46235


Ignore:
Timestamp:
09/22/2019 10:16:19 PM (4 weeks ago)
Author:
peterwilsoncc
Message:

KSES: Add support for modern layout techniques in style attribute.

Adds support for flex, grid and column layout techniques to the list of CSS attributes considered safe for inline CSS. The \ character and CSS functions, eg minmax() are not yet supported.

Extends support of border properties to include border-radius and individual background properties to include all those implicitly supported by the shorthand attribute.

Props mrahmadawais, marybaum, birgire, peterwilsoncc, azaozz.
Fixes #37248.
See #47367.

Location:
trunk
Files:
2 edited

Legend:

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

    r45997 r46235  
    20722072     * @since 5.1.0 Added support for `text-transform`.
    20732073     * @since 5.2.0 Added support for `background-position` and `grid-template-columns`
    2074      * @since 5.3.0 Added support for `flex`, `flex-grow`, `flex-shrink`, and `flex-basis`.
     2074     * @since 5.3.0 Added support for `grid`, `flex` and `column` layout properties.
     2075     *              Extend `background-*` support of individual properties.
    20752076     *
    20762077     * @param string[] $attr Array of allowed CSS attributes.
     
    20832084            'background-image',
    20842085            'background-position',
     2086            'background-size',
     2087            'background-attachment',
     2088            'background-blend-mode',
    20852089
    20862090            'border',
     2091            'border-radius',
    20872092            'border-width',
    20882093            'border-color',
     
    21092114            'caption-side',
    21102115
     2116            'columns',
     2117            'column-count',
     2118            'column-fill',
     2119            'column-gap',
     2120            'column-rule',
     2121            'column-span',
     2122            'column-width',
     2123
    21112124            'color',
    21122125            'font',
     
    21442157
    21452158            'flex',
     2159            'flex-basis',
     2160            'flex-direction',
     2161            'flex-flow',
    21462162            'flex-grow',
    21472163            'flex-shrink',
    2148             'flex-basis',
     2164
     2165            'grid-template-columns',
     2166            'grid-auto-columns',
     2167            'grid-column-start',
     2168            'grid-column-end',
     2169            'grid-column-gap',
     2170            'grid-template-rows',
     2171            'grid-auto-rows',
     2172            'grid-row-start',
     2173            'grid-row-end',
     2174            'grid-row-gap',
     2175            'grid-gap',
     2176
     2177            'justify-content',
     2178            'justify-items',
     2179            'justify-self',
     2180            'align-content',
     2181            'align-items',
     2182            'align-self',
    21492183
    21502184            'clear',
     
    21552189            'vertical-align',
    21562190            'list-style-type',
    2157             'grid-template-columns',
    21582191        )
    21592192    );
  • trunk/tests/phpunit/tests/kses.php

    r45997 r46235  
    840840                'expected' => 'background: green url("foo.jpg") no-repeat fixed center',
    841841            ),
     842            // Additional background attributes introduced in 5.3.
     843            array(
     844                'css'      => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
     845                'expected' => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
     846            ),
     847            // `border-radius` attribute introduced in 5.3.
     848            array(
     849                'css'      => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
     850                'expected' => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
     851            ),
    842852            // `flex` and related attributes introduced in 5.3.
    843853            array(
    844                 'css'      => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
    845                 'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
     854                'css'      => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
     855                'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
     856            ),
     857            // `grid` and related attributes introduced in 5.3.
     858            array(
     859                'css'      => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
     860                'expected' => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
     861            ),
     862            array(
     863                'css'      => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
     864                'expected' => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
     865            ),
     866            // `grid` does not yet support functions or `\`.
     867            array(
     868                'css'      => 'grid-template-columns: repeat(2, 50px 1fr);grid-template: 1em / 20% 20px 1fr',
     869                'expected' => '',
     870            ),
     871            // `flex` and `grid` alignments introduced in 5.3.
     872            array(
     873                'css'      => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
     874                'expected' => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
     875            ),
     876            // `columns` and related attributes introduced in 5.3.
     877            array(
     878                'css'      => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
     879                'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
    846880            ),
    847881        );
Note: See TracChangeset for help on using the changeset viewer.