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', () => {