Skip to content

Commit

Permalink
RichText: pass value to store (#43204)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Dec 7, 2023
1 parent a9cbc06 commit 6a42225
Show file tree
Hide file tree
Showing 41 changed files with 380 additions and 145 deletions.
2 changes: 2 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 27 additions & 20 deletions packages/block-editor/src/components/rich-text/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,43 @@ import { RawHTML } from '@wordpress/element';
import { children as childrenSource } from '@wordpress/blocks';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import RichText from './';

/**
* Internal dependencies
*/
import { getMultilineTag } from './utils';

export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
// Handle deprecated `children` and `node` sources.
if ( Array.isArray( value ) ) {
export function Content( {
value,
tagName: Tag,
multiline,
format,
...props
} ) {
if ( RichText.isEmpty( value ) ) {
const MultilineTag = getMultilineTag( multiline );
value = MultilineTag ? <MultilineTag /> : null;
} else if ( Array.isArray( value ) ) {
deprecated( 'wp.blockEditor.RichText value prop as children type', {
since: '6.1',
version: '6.3',
alternative: 'value prop as string',
link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
} );

value = childrenSource.toHTML( value );
}

const MultilineTag = getMultilineTag( multiline );

if ( ! value && MultilineTag ) {
value = `<${ MultilineTag }></${ MultilineTag }>`;
}

const content = <RawHTML>{ value }</RawHTML>;

if ( Tag ) {
const { format, ...restProps } = props;
return <Tag { ...restProps }>{ content }</Tag>;
value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
} else if ( typeof value === 'string' ) {
// To do: deprecate.
value = <RawHTML>{ value }</RawHTML>;
} else {
// To do: create a toReactComponent method on RichTextData, which we
// might in the future also use for the editable tree. See
// https://github.com/WordPress/gutenberg/pull/41655.
value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
}

return content;
};
return Tag ? <Tag { ...props }>{ value }</Tag> : value;
}
7 changes: 6 additions & 1 deletion packages/block-editor/src/components/rich-text/get-rich-text-values.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
getSaveElement,
__unstableGetBlockProps as getBlockProps,
} from '@wordpress/blocks';
import { RichTextData } from '@wordpress/rich-text';

/**
* Internal dependencies
Expand Down Expand Up @@ -95,5 +96,9 @@ export function getRichTextValues( blocks = [] ) {
const values = [];
addValuesForBlocks( values, blocks );
getBlockProps.skipFilters = false;
return values;
return values.map( ( value ) =>
value instanceof RichTextData
? value
: RichTextData.fromHTMLString( value )
);
}
7 changes: 6 additions & 1 deletion packages/block-editor/src/components/rich-text/use-input-rules.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@ function findSelection( blocks ) {
if ( attributeKey ) {
blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
attributeKey
].replace( START_OF_SELECTED_AREA, '' );
]
// To do: refactor this to use rich text's selection instead, so
// we no longer have to use on this hack inserting a special
// character.
.toString()
.replace( START_OF_SELECTED_AREA, '' );
return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
}

Expand Down
11 changes: 9 additions & 2 deletions packages/block-editor/src/utils/selection.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* WordPress dependencies
*/
import { RichTextData } from '@wordpress/rich-text';

/**
* A robust way to retain selection position through various
* transforms is to insert a special character at the position and
Expand All @@ -19,8 +24,10 @@ export function retrieveSelectedAttribute( blockAttributes ) {
return Object.keys( blockAttributes ).find( ( name ) => {
const value = blockAttributes[ name ];
return (
typeof value === 'string' &&
value.indexOf( START_OF_SELECTED_AREA ) !== -1
( typeof value === 'string' || value instanceof RichTextData ) &&
// To do: refactor this to use rich text's selection instead, so we
// no longer have to use on this hack inserting a special character.
value.toString().indexOf( START_OF_SELECTED_AREA ) !== -1
);
} );
}
4 changes: 2 additions & 2 deletions packages/block-library/src/audio/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"__experimentalRole": "content"
},
"caption": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "figcaption",
"__experimentalRole": "content"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/button/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
"__experimentalRole": "content"
},
"text": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "a,button",
"__experimentalRole": "content"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/code/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"textdomain": "default",
"attributes": {
"content": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "code",
"__unstablePreserveWhiteSpace": true
}
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/code/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ export default function save( { attributes } ) {
<pre { ...useBlockProps.save() }>
<RichText.Content
tagName="code"
value={ escape( attributes.content ) }
// 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() ) }
/>
</pre>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/details/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
"default": false
},
"summary": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "summary"
}
},
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/embed/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"__experimentalRole": "content"
},
"caption": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "figcaption",
"__experimentalRole": "content"
},
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/file/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"attribute": "id"
},
"fileName": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "a:not([download])"
},
"textLinkHref": {
Expand All @@ -42,8 +42,8 @@
"default": true
},
"downloadButtonText": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "a[download]"
},
"displayPreview": {
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/file/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ export default function save( { attributes } ) {
previewHeight,
} = attributes;

const pdfEmbedLabel = RichText.isEmpty( fileName ) ? 'PDF embed' : fileName;
const pdfEmbedLabel = RichText.isEmpty( fileName )
? 'PDF embed'
: // To do: use toPlainText, but we need ensure it's RichTextData. See
// https://github.com/WordPress/gutenberg/pull/56710.
fileName.toString();

const hasFilename = ! RichText.isEmpty( fileName );

Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/form-input/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
"type": "string"
},
"label": {
"type": "string",
"type": "rich-text",
"default": "Label",
"selector": ".wp-block-form-input__label-content",
"source": "html",
"source": "rich-text",
"__experimentalRole": "content"
},
"inlineLabel": {
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/gallery/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
"attribute": "data-id"
},
"caption": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": ".blocks-gallery-item__caption"
}
}
Expand All @@ -72,8 +72,8 @@
"maximum": 8
},
"caption": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": ".blocks-gallery-caption"
},
"imageCrop": {
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/heading/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
"type": "string"
},
"content": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "h1,h2,h3,h4,h5,h6",
"default": "",
"__experimentalRole": "content"
},
"level": {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/image/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"__experimentalRole": "content"
},
"caption": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "figcaption",
"__experimentalRole": "content"
},
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/list-item/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
"type": "string"
},
"content": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "li",
"default": "",
"__experimentalRole": "content"
}
},
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/paragraph/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@
"type": "string"
},
"content": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "p",
"default": "",
"__experimentalRole": "content"
},
"dropCap": {
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/preformatted/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@
"textdomain": "default",
"attributes": {
"content": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "pre",
"default": "",
"__unstablePreserveWhiteSpace": true,
"__experimentalRole": "content"
}
Expand Down
9 changes: 4 additions & 5 deletions packages/block-library/src/pullquote/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,15 @@
"textdomain": "default",
"attributes": {
"value": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "p",
"__experimentalRole": "content"
},
"citation": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "cite",
"default": "",
"__experimentalRole": "content"
},
"textAlign": {
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/quote/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,9 @@
"__experimentalRole": "content"
},
"citation": {
"type": "string",
"source": "html",
"type": "rich-text",
"source": "rich-text",
"selector": "cite",
"default": "",
"__experimentalRole": "content"
},
"align": {
Expand Down
Loading

1 comment on commit 6a42225

@github-actions
Copy link

@github-actions github-actions bot commented on 6a42225 Dec 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 6a42225.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7133773276
📝 Reported issues:

Please sign in to comment.