Rich text: remove preserveWhiteSpace serialisation differences (#55999)

WordPress · Nov 10, 2023 · 8133186 · 8133186
1 parent 33153e7
commit 8133186
Show file tree

Hide file tree

Showing 29 changed files with 87 additions and 242 deletions.
diff --git a/packages/block-editor/src/components/editable-text/index.js b/packages/block-editor/src/components/editable-text/index.js
@@ -9,14 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {
- return (
- <RichText
- ref={ ref }
- { ...props }
- __unstableDisableFormats
- preserveWhiteSpace
- />
- );
+ return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
 } );
 
 EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {

diff --git a/packages/block-editor/src/components/rich-text/README.md b/packages/block-editor/src/components/rich-text/README.md
@@ -71,7 +71,8 @@ _Optional._ A list of autocompleters to use instead of the default.
 
 ### `preserveWhiteSpace: Boolean`
 
-_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space. If turned on, soft line breaks will be saved as newline characters, not as line break elements.
+_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space or
+trimmed.
 
 ## RichText.Content
 

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -348,7 +348,6 @@ export function RichTextWrapper(
  onReplace,
  onSplit,
  __unstableEmbedURLOnPaste,
- preserveWhiteSpace,
  pastePlainText,
  } ),
  useDelete( {

diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -35,7 +35,6 @@ export function usePasteHandler( props ) {
  onReplace,
  onSplit,
  __unstableEmbedURLOnPaste,
- preserveWhiteSpace,
  pastePlainText,
  } = propsRef.current;
 
@@ -63,10 +62,7 @@ export function usePasteHandler( props ) {
  // without filtering the data. The filters are only meant for externally
  // pasted content and remove inline styles.
  if ( isInternal ) {
- const pastedValue = create( {
- html,
- preserveWhiteSpace,
- } );
+ const pastedValue = create( { html } );
  addActiveFormats( pastedValue, value.activeFormats );
  onChange( insert( value, pastedValue ) );
  return;
@@ -136,7 +132,6 @@ export function usePasteHandler( props ) {
  plainText,
  mode,
  tagName,
- preserveWhiteSpace,
  } );
 
  if ( typeof content === 'string' ) {

diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -23,7 +23,6 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { mapRichTextSettings } from './utils';
 import {
  retrieveSelectedAttribute,
  START_OF_SELECTED_AREA,
@@ -759,43 +758,23 @@ export const __unstableDeleteSelection =
  const selectionB = selectionEnd;
 
  const blockA = select.getBlock( selectionA.clientId );
- const blockAType = getBlockType( blockA.name );
-
  const blockB = select.getBlock( selectionB.clientId );
- const blockBType = getBlockType( blockB.name );
 
  const htmlA = blockA.attributes[ selectionA.attributeKey ];
  const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
- const attributeDefinitionA =
- blockAType.attributes[ selectionA.attributeKey ];
- const attributeDefinitionB =
- blockBType.attributes[ selectionB.attributeKey ];
-
- let valueA = create( {
- html: htmlA,
- ...mapRichTextSettings( attributeDefinitionA ),
- } );
- let valueB = create( {
- html: htmlB,
- ...mapRichTextSettings( attributeDefinitionB ),
- } );
+ let valueA = create( { html: htmlA } );
+ let valueB = create( { html: htmlB } );
 
  valueA = remove( valueA, selectionA.offset, valueA.text.length );
  valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
  // Clone the blocks so we don't manipulate the original.
  const cloneA = cloneBlock( blockA, {
- [ selectionA.attributeKey ]: toHTMLString( {
- value: valueA,
- ...mapRichTextSettings( attributeDefinitionA ),
- } ),
+ [ selectionA.attributeKey ]: toHTMLString( { value: valueA } ),
  } );
  const cloneB = cloneBlock( blockB, {
- [ selectionB.attributeKey ]: toHTMLString( {
- value: valueB,
- ...mapRichTextSettings( attributeDefinitionB ),
- } ),
+ [ selectionB.attributeKey ]: toHTMLString( { value: valueB } ),
  } );
 
  const followingBlock = isForward ? cloneA : cloneB;
@@ -831,20 +810,10 @@ export const __unstableDeleteSelection =
  const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
  const convertedHtml = updatedAttributes[ newAttributeKey ];
- const convertedValue = create( {
- html: convertedHtml,
- ...mapRichTextSettings(
- targetBlockType.attributes[ newAttributeKey ]
- ),
- } );
+ const convertedValue = create( { html: convertedHtml } );
  const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
  const newValue = remove( convertedValue, newOffset, newOffset + 1 );
- const newHtml = toHTMLString( {
- value: newValue,
- ...mapRichTextSettings(
- targetBlockType.attributes[ newAttributeKey ]
- ),
- } );
+ const newHtml = toHTMLString( { value: newValue } );
 
  updatedAttributes[ newAttributeKey ] = newHtml;
 
@@ -931,27 +900,13 @@ export const __unstableSplitSelection =
  const selectionB = selectionEnd;
 
  const blockA = select.getBlock( selectionA.clientId );
- const blockAType = getBlockType( blockA.name );
-
  const blockB = select.getBlock( selectionB.clientId );
- const blockBType = getBlockType( blockB.name );
 
  const htmlA = blockA.attributes[ selectionA.attributeKey ];
  const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
- const attributeDefinitionA =
- blockAType.attributes[ selectionA.attributeKey ];
- const attributeDefinitionB =
- blockBType.attributes[ selectionB.attributeKey ];
-
- let valueA = create( {
- html: htmlA,
- ...mapRichTextSettings( attributeDefinitionA ),
- } );
- let valueB = create( {
- html: htmlB,
- ...mapRichTextSettings( attributeDefinitionB ),
- } );
+ let valueA = create( { html: htmlA } );
+ let valueB = create( { html: htmlB } );
 
  valueA = remove( valueA, selectionA.offset, valueA.text.length );
  valueB = remove( valueB, 0, selectionB.offset );
@@ -964,7 +919,6 @@ export const __unstableSplitSelection =
  ...blockA.attributes,
  [ selectionA.attributeKey ]: toHTMLString( {
  value: valueA,
- ...mapRichTextSettings( attributeDefinitionA ),
  } ),
  },
  },
@@ -975,7 +929,6 @@ export const __unstableSplitSelection =
  ...blockB.attributes,
  [ selectionB.attributeKey ]: toHTMLString( {
  value: valueB,
- ...mapRichTextSettings( attributeDefinitionB ),
  } ),
  },
  },
@@ -1143,18 +1096,14 @@ export const mergeBlocks =
  const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
  const html = selectedBlock.attributes[ attributeKey ];
  const value = insert(
- create( {
- html,
- ...mapRichTextSettings( attributeDefinition ),
- } ),
+ create( { html } ),
  START_OF_SELECTED_AREA,
  offset,
  offset
  );
 
  selectedBlock.attributes[ attributeKey ] = toHTMLString( {
  value,
- ...mapRichTextSettings( attributeDefinition ),
  } );
  }
 
@@ -1180,22 +1129,12 @@ export const mergeBlocks =
  const newAttributeKey =
  retrieveSelectedAttribute( updatedAttributes );
  const convertedHtml = updatedAttributes[ newAttributeKey ];
- const convertedValue = create( {
- html: convertedHtml,
- ...mapRichTextSettings(
- blockAType.attributes[ newAttributeKey ]
- ),
- } );
+ const convertedValue = create( { html: convertedHtml } );
  const newOffset = convertedValue.text.indexOf(
  START_OF_SELECTED_AREA
  );
  const newValue = remove( convertedValue, newOffset, newOffset + 1 );
- const newHtml = toHTMLString( {
- value: newValue,
- ...mapRichTextSettings(
- blockAType.attributes[ newAttributeKey ]
- ),
- } );
+ const newHtml = toHTMLString( { value: newValue } );
 
  updatedAttributes[ newAttributeKey ] = newHtml;
 

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -26,7 +26,6 @@ import { createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { mapRichTextSettings } from './utils';
 import { orderBy } from '../utils/sorting';
 
 /**
@@ -1114,27 +1113,13 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
  : [ selectionAnchor, selectionFocus ];
 
  const blockA = getBlock( state, selectionStart.clientId );
- const blockAType = getBlockType( blockA.name );
-
  const blockB = getBlock( state, selectionEnd.clientId );
- const blockBType = getBlockType( blockB.name );
 
  const htmlA = blockA.attributes[ selectionStart.attributeKey ];
  const htmlB = blockB.attributes[ selectionEnd.attributeKey ];
 
- const attributeDefinitionA =
- blockAType.attributes[ selectionStart.attributeKey ];
- const attributeDefinitionB =
- blockBType.attributes[ selectionEnd.attributeKey ];
-
- let valueA = create( {
- html: htmlA,
- ...mapRichTextSettings( attributeDefinitionA ),
- } );
- let valueB = create( {
- html: htmlB,
- ...mapRichTextSettings( attributeDefinitionB ),
- } );
+ let valueA = create( { html: htmlA } );
+ let valueB = create( { html: htmlB } );
 
  valueA = remove( valueA, 0, selectionStart.offset );
  valueB = remove( valueB, selectionEnd.offset, valueB.text.length );
@@ -1146,7 +1131,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
  ...blockA.attributes,
  [ selectionStart.attributeKey ]: toHTMLString( {
  value: valueA,
- ...mapRichTextSettings( attributeDefinitionA ),
  } ),
  },
  },
@@ -1156,7 +1140,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
  ...blockB.attributes,
  [ selectionEnd.attributeKey ]: toHTMLString( {
  value: valueB,
- ...mapRichTextSettings( attributeDefinitionB ),
  } ),
  },
  },

diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
diff --git a/packages/block-library/src/code/transforms.js b/packages/block-library/src/code/transforms.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create, toHTMLString } from '@wordpress/rich-text';
 
 const transforms = {
  from: [
@@ -12,10 +13,18 @@ const transforms = {
  },
  {
  type: 'block',
- blocks: [ 'core/html', 'core/paragraph' ],
- transform: ( { content } ) => {
+ blocks: [ 'core/paragraph' ],
+ transform: ( { content } ) =>
+ createBlock( 'core/code', { content } ),
+ },
+ {
+ type: 'block',
+ blocks: [ 'core/html' ],
+ transform: ( { content: text } ) => {
  return createBlock( 'core/code', {
- content,
+ // The HTML is plain text (with plain line breaks), so
+ // convert it to rich text.
+ content: toHTMLString( { value: create( { text } ) } ),
  } );
  },
  },
@@ -42,11 +51,8 @@ const transforms = {
  {
  type: 'block',
  blocks: [ 'core/paragraph' ],
- transform: ( { content } ) => {
- return createBlock( 'core/paragraph', {
- content: content.replace( /\n/g, '<br>' ),
- } );
- },
+ transform: ( { content } ) =>
+ createBlock( 'core/paragraph', { content } ),
  },
  ],
 };

diff --git a/packages/block-library/src/html/transforms.js b/packages/block-library/src/html/transforms.js
@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create } from '@wordpress/rich-text';
 
 const transforms = {
  from: [
  {
  type: 'block',
  blocks: [ 'core/code' ],
- transform: ( { content } ) => {
+ transform: ( { content: html } ) => {
  return createBlock( 'core/html', {
- content,
+ // The code block may output HTML formatting, so convert it
+ // to plain text.
+ content: create( { html } ).text,
  } );
  },
  },

diff --git a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Example text</code></pre>
+<!-- /wp:code -->"
+`;
+
 exports[`Paragraph block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->

diff --git a/packages/block-library/src/paragraph/test/transforms.native.js b/packages/block-library/src/paragraph/test/transforms.native.js
@@ -23,6 +23,7 @@ const blockTransforms = [
  'Preformatted',
  'Pullquote',
  'Verse',
+ 'Code',
  ...transformsWithInnerBlocks,
 ];
 

diff --git a/packages/block-library/src/preformatted/transforms.js b/packages/block-library/src/preformatted/transforms.js
@@ -34,10 +34,7 @@ const transforms = {
  type: 'block',
  blocks: [ 'core/paragraph' ],
  transform: ( attributes ) =>
- createBlock( 'core/paragraph', {
- ...attributes,
- content: attributes.content.replace( /\n/g, '<br>' ),
- } ),
+ createBlock( 'core/paragraph', attributes ),
  },
  {
  type: 'block',