Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RichText: pass value to store #43204

Merged
merged 21 commits into from
Dec 7, 2023
+380 −145
Merged

RichText: pass value to store #43204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c20d7af
RichText: pass value to store (squashed)
ellatrix Nov 14, 2023
39cbba3
Polish constructor + docs
ellatrix Nov 14, 2023
587c997
wip
ellatrix Nov 14, 2023
dbd3010
Add to heading and list
ellatrix Nov 15, 2023
898fc8d
Add to all blocks
ellatrix Nov 27, 2023
582c430
Store original HTML
ellatrix Nov 27, 2023
18cca17
Fix e2e
ellatrix Nov 27, 2023
48666cf
Update native e2e snaps
ellatrix Nov 27, 2023
54c53da
Add static from* methods
ellatrix Nov 28, 2023
9df8b45
Fix matcher selector returning null
ellatrix Nov 28, 2023
4f52b03
Correct typo + add empty method
ellatrix Nov 30, 2023
b6474a3
Add toPlainText
ellatrix Nov 30, 2023
b37300d
Comment on toString
ellatrix Nov 30, 2023
18b4d99
Improve whitespace collapse perf
ellatrix Dec 1, 2023
2134ee2
pasteHandler should always return string
ellatrix Dec 1, 2023
7816e5c
file block: revert to trunk's behaviour of setting HTML as a label
ellatrix Dec 1, 2023
3074fe7
Rewrite RichText.Content
ellatrix Dec 1, 2023
039f197
RichText.Content clean up
ellatrix Dec 1, 2023
91ea1e0
Clean up
ellatrix Dec 2, 2023
0b20d23
Fix errors
ellatrix Dec 2, 2023
bce8a2d
Fix annotation tests
ellatrix Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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() ) }
Copy link
Member

Choose a reason for hiding this comment

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

could we not skip the escape() call here since RichText.Content could perform that internally and for every case? is there ever a time where we wouldn't want to escape it?

RichText.Content knows how to safely convert a RichTextValue into safe HTML, and it knows how to turn a string into a RichTextValue

Copy link
Member Author

Choose a reason for hiding this comment

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

I think the escaping here is for shortcode brackets.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, it's encoding short codes and links to prevent them from being replaced by display filters.

I wonder if this is the right approach though, shouldn't this be a concern of the display filter to check the context?

gutenberg/packages/block-library/src/code/utils.js

Lines 12 to 17 in 6d9740f

export function escape( content ) {
return pipe(
escapeOpeningSquareBrackets,
escapeProtocolInIsolatedUrls
)( content || '' );
}

Copy link
Member Author

Choose a reason for hiding this comment

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

For URLs, I don't understand the reasoning at all. URLs in blocks should never embed. We embed them automatically in the editor to a dedicated block. The auto embedding should only happen for classic content or the embed block.

Shortcodes is a bit trickier because they can appear inline, but still, just check if it's in a code tag? Maybe with your tag processor? 😉

/>
</pre>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/details/block.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading