diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js index 66d6b394a84f96..0aaf8e6963c40e 100644 --- a/packages/element/src/serialize.js +++ b/packages/element/src/serialize.js @@ -287,6 +287,17 @@ export function escapeLessThan( value ) { return value.replace( //g, '>' ); +} + /** * Returns an escaped attribute value. * @@ -295,6 +306,9 @@ export function escapeLessThan( value ) { * "[...] the text cannot contain an ambiguous ampersand [...] must not contain * any literal U+0022 QUOTATION MARK characters (")" * + * Additionally we escape the greater than symbol, as this is used by wptexturize to + * split HTML tags, and not escaping it can cause problems. + * * @param {string} value Attribute value. * * @return {string} Escaped attribute value. @@ -302,6 +316,7 @@ export function escapeLessThan( value ) { export const escapeAttribute = flowRight( [ escapeAmpersand, escapeQuotationMark, + escapeGreaterThan, ] ); /** diff --git a/packages/element/src/test/index.js b/packages/element/src/test/index.js index 5d8417859042df..ef5bd4bb87542b 100644 --- a/packages/element/src/test/index.js +++ b/packages/element/src/test/index.js @@ -53,7 +53,7 @@ describe( 'element', () => { }, '<"WordPress" & Friends>' ) ); expect( result ).toBe( - '' + + '' + '<"WordPress" & Friends>' + '' ); diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js index d170789a6794c8..6483319cb1d301 100644 --- a/packages/element/src/test/serialize.js +++ b/packages/element/src/test/serialize.js @@ -19,6 +19,7 @@ import serialize, { escapeQuotationMark, escapeLessThan, escapeAttribute, + escapeGreaterThan, escapeHTML, hasPrefix, isValidAttributeName, @@ -53,6 +54,14 @@ function testEscapeLessThan( implementation ) { } ); } +function testEscapeGreaterThan( implementation ) { + it( 'should escape greater than', () => { + const result = implementation( 'Chicken > Ribs' ); + + expect( result ).toBe( 'Chicken > Ribs' ); + } ); +} + describe( 'escapeAmpersand', () => { testEscapeAmpersand( escapeAmpersand ); } ); @@ -65,9 +74,14 @@ describe( 'escapeLessThan', () => { testEscapeLessThan( escapeLessThan ); } ); +describe( 'escapeGreaterThan', () => { + testEscapeGreaterThan( escapeGreaterThan ); +} ); + describe( 'escapeAttribute', () => { testEscapeAmpersand( escapeAttribute ); testEscapeQuotationMark( escapeAttribute ); + testEscapeGreaterThan( escapeAttribute ); } ); describe( 'escapeHTML', () => { @@ -606,7 +620,7 @@ describe( 'renderAttributes()', () => { href: '/index.php?foo=bar&qux=<"scary">', } ); - expect( result ).toBe( ' style="background:url("foo.png")" href="/index.php?foo=bar&qux=<"scary">"' ); + expect( result ).toBe( ' style="background:url("foo.png")" href="/index.php?foo=bar&qux=<"scary">"' ); } ); it( 'should render numeric attributes', () => {