Code block: preserve newlines (#59627)

Unlinked contributors: oldrup. Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: timnolte <tnolte@git.wordpress.org> Co-authored-by: justintadlock <greenshady@git.wordpress.org> Co-authored-by: dmsnell <dmsnell@git.wordpress.org>
WordPress · Mar 11, 2024 · b78d306 · b78d306
1 parent 00fcb56
commit b78d306
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 10 deletions.
diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
@@ -16,7 +16,13 @@ export default function save( { attributes } ) {
  // To do: `escape` encodes characters in shortcodes and URLs to
  // prevent embedding in PHP. Ideally checks for the code block,
  // or pre/code tags, should be made on the PHP side?
- value={ escape( attributes.content.toString() ) }
+ value={ escape(
+ typeof attributes.content === 'string'
+ ? attributes.content
+ : attributes.content.toHTMLString( {
+ preserveWhiteSpace: true,
+ } )
+ ) }
  />
  </pre>
  );

diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
@@ -432,6 +432,7 @@ _Parameters_
 
 - _$1_ `Object`: Named argements.
 - _$1.value_ `RichTextValue`: Rich text value.
+- _$1.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
 
 _Returns_
 

diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -129,7 +129,10 @@ export function useRichText( {
  : newRecord.formats;
  newRecord = { ...newRecord, formats: newFormats };
  if ( typeof value === 'string' ) {
- _value.current = toHTMLString( { value: newRecord } );
+ _value.current = toHTMLString( {
+ value: newRecord,
+ preserveWhiteSpace,
+ } );
  } else {
  _value.current = new RichTextData( newRecord );
  }

diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
@@ -144,8 +144,11 @@ export class RichTextData {
  }
  // We could expose `toHTMLElement` at some point as well, but we'd only use
  // it internally.
- toHTMLString() {
- return this.originalHTML || toHTMLString( { value: this.#value } );
+ toHTMLString( { preserveWhiteSpace } = {} ) {
+ return (
+ this.originalHTML ||
+ toHTMLString( { value: this.#value, preserveWhiteSpace } )
+ );
  }
  valueOf() {
  return this.toHTMLString();

diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js
@@ -19,14 +19,16 @@ import { toTree } from './to-tree';
 /**
  * Create an HTML string from a Rich Text value.
  *
- * @param {Object} $1 Named argements.
- * @param {RichTextValue} $1.value Rich text value.
+ * @param {Object} $1 Named argements.
+ * @param {RichTextValue} $1.value Rich text value.
+ * @param {boolean} [$1.preserveWhiteSpace] Preserves newlines if true.
  *
  * @return {string} HTML string.
  */
-export function toHTMLString( { value } ) {
+export function toHTMLString( { value, preserveWhiteSpace } ) {
  const tree = toTree( {
  value,
+ preserveWhiteSpace,
  createEmpty,
  append,
  getLastChild,

diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
@@ -129,6 +129,7 @@ function isEqualUntil( a, b, index ) {
 
 export function toTree( {
  value,
+ preserveWhiteSpace,
  createEmpty,
  append,
  getLastChild,
@@ -267,7 +268,7 @@ export function toTree( {
  }
  // Ensure pointer is text node.
  pointer = append( getParent( pointer ), '' );
- } else if ( character === '\n' ) {
+ } else if ( ! preserveWhiteSpace && character === '\n' ) {
  pointer = append( getParent( pointer ), {
  type: 'br',
  attributes: isEditableTree

diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Code-should-paste-plain-text-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Code-should-paste-plain-text-1-chromium.txt
@@ -1,3 +1,4 @@
 <!-- wp:code -->
-<pre class="wp-block-code"><code>&lt;img /><br> &lt;br></code></pre>
+<pre class="wp-block-code"><code>&lt;img />
+ &lt;br></code></pre>
 <!-- /wp:code -->
diff --git a/...aste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt b/...aste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt
@@ -7,5 +7,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:code -->
-<pre class="wp-block-code"><code>ading<br><br>Paragra</code></pre>
+<pre class="wp-block-code"><code>ading
+
+Paragra</code></pre>
 <!-- /wp:code -->