diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 6daf20e4757ce..5767ff2df34f0 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -15,8 +15,8 @@ import { } from '@wordpress/element'; import { getBlockType, - getSaveContent, isUnmodifiedDefaultBlock, + serializeRawBlock, } from '@wordpress/blocks'; import { withFilters } from '@wordpress/components'; import { @@ -74,6 +74,7 @@ function Block( { children, isHtml, ...props } ) { } function BlockListBlock( { + block: { source }, mode, isLocked, canRemove, @@ -155,7 +156,7 @@ function BlockListBlock( { let block; if ( ! isValid ) { - const saveContent = getSaveContent( blockType, attributes ); + const saveContent = serializeRawBlock( source ); block = ( diff --git a/packages/blocks/README.md b/packages/blocks/README.md index ed08426aa52bc..d87e547f2df8a 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -735,6 +735,31 @@ _Returns_ - `string`: The post content. +### serializeRawBlock + +Serializes a block node into the native HTML-comment-powered block format. +CAVEAT: This function is intended for reserializing blocks as parsed by +valid parsers and skips any validation steps. This is NOT a generic +serialization function for in-memory blocks. For most purposes, see the +following functions available in the `@wordpress/blocks` package: + +_Related_ + +- serializeBlock +- serialize For more on the format of block nodes as returned by valid parsers: +- `@wordpress/block-serialization-default-parser` package +- `@wordpress/block-serialization-spec-parser` package + +_Parameters_ + +- _rawBlock_ `import(".").WPRawBlock`: A block node as returned by a valid parser. +- _options_ `?Object`: Serialization options. +- _options.isCommentDelimited_ `?boolean`: Whether to output HTML comments around blocks. + +_Returns_ + +- `string`: An HTML string representing a block. + ### setCategories Sets the block categories. diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index b5ae50093233d..c179bd2da0236 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -34,6 +34,7 @@ export { // components whose mechanisms can be shielded from the `edit` implementation // and just passed along. export { default as parse } from './parser'; +export { serializeRawBlock } from './parser/serialize-raw-block'; export { getBlockAttributes, parseWithAttributeSchema, diff --git a/packages/blocks/src/api/parser/index.js b/packages/blocks/src/api/parser/index.js index 38c21482b5a23..f73133a48170a 100644 --- a/packages/blocks/src/api/parser/index.js +++ b/packages/blocks/src/api/parser/index.js @@ -41,12 +41,13 @@ import { applyBuiltInValidationFixes } from './apply-built-in-validation-fixes'; * * @typedef WPBlock * - * @property {string} name Block name - * @property {Object } attributes Block raw or comment attributes. - * @property {WPBlock[]} innerBlocks Inner Blocks. - * @property {string} originalContent Original content of the block before validation fixes. - * @property {boolean} isValid Whether the block is valid. - * @property {Object[]} validationIssues Validation issues. + * @property {string} name Block name + * @property {Object } attributes Block raw or comment attributes. + * @property {WPBlock[]} innerBlocks Inner Blocks. + * @property {string} originalContent Original content of the block before validation fixes. + * @property {boolean} isValid Whether the block is valid. + * @property {Object[]} validationIssues Validation issues. + * @property {WPRawBlock} [source] Un-processed original copy of block if created through parser. */ /** @@ -242,6 +243,13 @@ export function parseRawBlock( rawBlock ) { blockType ); + if ( ! updatedBlock.isValid ) { + // Preserve the original unprocessed version of the block + // that we received so that we can preserve it in its + // existing state when we save. + updatedBlock.source = rawBlock; + } + if ( ! validatedBlock.isValid && updatedBlock.isValid ) { /* eslint-disable no-console */ console.groupCollapsed( 'Updated Block: %s', blockType.name );