Code block: allow HTML editing & rich text (#24689)

* Code block: allow HTML editing * Change to RichText * Fix integration test
WordPress · Sep 24, 2020 · f5c32f8 · f5c32f8
1 parent b18a2ff
commit f5c32f8
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 18 deletions.
diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
@@ -4,13 +4,12 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "text",
+			"source": "html",
 			"selector": "code"
 		}
 	},
 	"supports": {
 		"anchor": true,
-		"html": false,
 		"lightBlockWrapper": true
 	}
 }
diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
@@ -2,21 +2,16 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import {
-	PlainText,
+	RichText,
 	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 
 export default function CodeEdit( { attributes, setAttributes } ) {
 	const blockWrapperProps = useBlockWrapperProps();
 	return (
 		<pre { ...blockWrapperProps }>
-			<PlainText
-				__experimentalVersion={ 2 }
+			<RichText
 				tagName="code"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }

diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
@@ -6,7 +11,10 @@ import { escape } from './utils';
 export default function save( { attributes } ) {
 	return (
 		<pre>
-			<code>{ escape( attributes.content ) }</code>
+			<RichText.Content
+				tagName="code"
+				value={ escape( attributes.content ) }
+			/>
 		</pre>
 	);
 }
diff --git a/packages/block-library/src/code/utils.js b/packages/block-library/src/code/utils.js
@@ -3,11 +3,6 @@
  */
 import { flow } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { escapeEditableHTML } from '@wordpress/escape-html';
-
 /**
  * Escapes ampersands, shortcodes, and links.
  *
@@ -16,7 +11,6 @@ import { escapeEditableHTML } from '@wordpress/escape-html';
  */
 export function escape( content ) {
 	return flow(
-		escapeEditableHTML,
 		escapeOpeningSquareBrackets,
 		escapeProtocolInIsolatedUrls
 	)( content || '' );

diff --git a/packages/e2e-tests/fixtures/blocks/core__code.json b/packages/e2e-tests/fixtures/blocks/core__code.json
@@ -4,7 +4,7 @@
         "name": "core/code",
         "isValid": true,
         "attributes": {
-            "content": "export default function MyButton() {\n\treturn <Button>Click Me!</Button>;\n}"
+            "content": "export default function MyButton() {\n\treturn &lt;Button&gt;Click Me!&lt;/Button&gt;;\n}"
         },
         "innerBlocks": [],
         "originalContent": "<pre class=\"wp-block-code\"><code>export default function MyButton() {\n\treturn &lt;Button&gt;Click Me!&lt;/Button&gt;;\n}</code></pre>"

diff --git a/packages/e2e-tests/fixtures/blocks/core__code.serialized.html b/packages/e2e-tests/fixtures/blocks/core__code.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:code -->
 <pre class="wp-block-code"><code>export default function MyButton() {
-	return &lt;Button>Click Me!&lt;/Button>;
+	return &lt;Button&gt;Click Me!&lt;/Button&gt;;
 }</code></pre>
 <!-- /wp:code -->