Block API: Add supports object to block attributes to configure copy support

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -11,7 +11,7 @@ import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
 import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import { cloneBlock, serialize } from '@wordpress/blocks';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -33,7 +33,14 @@ const POPOVER_PROPS = {
 };
 
 function CopyMenuItem( { blocks, onCopy } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
+	const ref = useCopyToClipboard( () => {
+		blocks = blocks.map( ( block ) =>
+			cloneBlock( block, {}, null, {
+				__experimentalRequiredAttributeSupports: [ 'copy' ],
+			} )
+		);
+		return serialize( blocks );
+	}, onCopy );
 	return <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;
 }
 

packages/block-editor/src/components/block-switcher/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { __experimentalFilterBlockAttributes as filterBlockAttributes } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided
@@ -46,7 +46,9 @@ export const getMatchingBlockByName = (
  * @return {Object} The block's attributes to retain.
  */
 export const getRetainedBlockAttributes = ( name, attributes ) => {
-	const contentAttributes = getBlockAttributesNamesByRole( name, 'content' );
+	const contentAttributes = filterBlockAttributes( name, {
+		__experimentalRole: 'content',
+	} );
 	if ( ! contentAttributes?.length ) return attributes;
 
 	return contentAttributes.reduce( ( _accumulator, attribute ) => {

packages/block-editor/src/components/copy-handler/index.js

@@ -3,6 +3,7 @@
  */
 import { useCallback } from '@wordpress/element';
 import {
+	cloneBlock,
 	serialize,
 	pasteHandler,
 	store as blocksStore,
@@ -121,7 +122,14 @@ export function useClipboardHandler() {
 					flashBlock( selectedBlockClientIds[ 0 ] );
 				}
 				notifyCopy( event.type, selectedBlockClientIds );
-				const blocks = getBlocksByClientId( selectedBlockClientIds );
+				let blocks = getBlocksByClientId( selectedBlockClientIds );
+				if ( event.type === 'copy' ) {
+					blocks = blocks.map( ( block ) =>
+						cloneBlock( block, {}, null, {
+							__experimentalRequiredAttributeSupports: [ 'copy' ],
+						} )
+					);
+				}
 				const serialized = serialize( blocks );
 
 				event.clipboardData.setData( 'text/plain', serialized );

packages/block-editor/src/store/actions.js

@@ -8,7 +8,6 @@ import { castArray, findKey, first, isObject, last, some } from 'lodash';
  */
 import {
 	cloneBlock,
-	__experimentalCloneSanitizedBlock,
 	createBlock,
 	doBlocksMatchTemplate,
 	getBlockType,
@@ -1182,7 +1181,9 @@ export const duplicateBlocks = ( clientIds, updateSelection = true ) => ( {
 		last( castArray( clientIds ) )
 	);
 	const clonedBlocks = blocks.map( ( block ) =>
-		__experimentalCloneSanitizedBlock( block )
+		cloneBlock( block, {}, null, {
+			__experimentalRequiredAttributeSupports: [ 'copy' ],
+		} )
 	);
 	dispatch.insertBlocks(
 		clonedBlocks,

packages/blocks/README.md

@@ -186,13 +186,15 @@ In the random image block above, we've given the `alt` attribute of the image a
 ### cloneBlock
 
 Given a block object, returns a copy of the block object,
-optionally merging new attributes and/or replacing its inner blocks.
+optionally merging new attributes, replacing its inner blocks, and/or
+filtering out attributes which do not have copy support.
 
 _Parameters_
 
 -   _block_ `Object`: Block instance.
 -   _mergeAttributes_ `Object`: Block attributes.
 -   _newInnerBlocks_ `?Array`: Nested blocks.
+-   _\_\_experimentalOptions_ `?WPBlockCloneOptions`: Cloning options.
 
 _Returns_
 

packages/blocks/src/api/factory.js

@@ -15,6 +15,8 @@ import {
 	isFunction,
 	isEmpty,
 	map,
+	reduce,
+	omit,
 } from 'lodash';
 
 /**
@@ -32,7 +34,7 @@ import {
 } from './registration';
 import {
 	normalizeBlockType,
-	__experimentalSanitizeBlockAttributes,
+	__experimentalFilterBlockAttributes,
 } from './utils';
 
 /**
@@ -45,9 +47,37 @@ import {
  * @return {Object} Block object.
  */
 export function createBlock( name, attributes = {}, innerBlocks = [] ) {
-	const sanitizedAttributes = __experimentalSanitizeBlockAttributes(
-		name,
-		attributes
+	// Get the type definition associated with a registered block.
+	const blockType = getBlockType( name );
+
+	if ( undefined === blockType ) {
+		throw new Error( `Block type '${ name }' is not registered.` );
+	}
+
+	const sanitizedAttributes = reduce(
+		blockType.attributes,
+		( accumulator, schema, key ) => {
+			const value = attributes[ key ];
+
+			if ( undefined !== value ) {
+				accumulator[ key ] = value;
+			} else if ( schema.hasOwnProperty( 'default' ) ) {
+				accumulator[ key ] = schema.default;
+			}
+
+			if ( [ 'node', 'children' ].indexOf( schema.source ) !== -1 ) {
+				// Ensure value passed is always an array, which we're expecting in
+				// the RichText component to handle the deprecated value.
+				if ( typeof accumulator[ key ] === 'string' ) {
+					accumulator[ key ] = [ accumulator[ key ] ];
+				} else if ( ! Array.isArray( accumulator[ key ] ) ) {
+					accumulator[ key ] = [];
+				}
+			}
+
+			return accumulator;
+		},
+		{}
 	);
 
 	const clientId = uuid();
@@ -94,62 +124,57 @@ export function createBlocksFromInnerBlocksTemplate(
 }
 
 /**
- * Given a block object, returns a copy of the block object while sanitizing its attributes,
- * optionally merging new attributes and/or replacing its inner blocks.
+ * @typedef {Object} WPBlockCloneOptions Cloning Options.
+ *
+ * @property {Array} __experimentalRequiredAttributeSupports Attributes missing these support keys will be excluded from the cloned block.
+ */
+
+/**
+ * Given a block object, returns a copy of the block object,
+ * optionally merging new attributes, replacing its inner blocks, and/or
+ * filtering out attributes which do not have copy support.
  *
- * @param {Object} block           Block instance.
- * @param {Object} mergeAttributes Block attributes.
- * @param {?Array} newInnerBlocks  Nested blocks.
+ * @param {Object}                block                 Block instance.
+ * @param {Object}                mergeAttributes       Block attributes.
+ * @param {?Array}                newInnerBlocks        Nested blocks.
+ * @param {?WPBlockCloneOptions}  __experimentalOptions Cloning options.
  *
  * @return {Object} A cloned block.
  */
-export function __experimentalCloneSanitizedBlock(
+export function cloneBlock(
 	block,
 	mergeAttributes = {},
-	newInnerBlocks
+	newInnerBlocks,
+	__experimentalOptions = {}
 ) {
+	const {
+		__experimentalRequiredAttributeSupports: requiredSupportKeys,
+	} = __experimentalOptions;
 	const clientId = uuid();
 
-	const sanitizedAttributes = __experimentalSanitizeBlockAttributes(
-		block.name,
-		{
-			...block.attributes,
-			...mergeAttributes,
-		}
-	);
-
-	return {
-		...block,
-		clientId,
-		attributes: sanitizedAttributes,
-		innerBlocks:
-			newInnerBlocks ||
-			block.innerBlocks.map( ( innerBlock ) =>
-				__experimentalCloneSanitizedBlock( innerBlock )
-			),
+	let attributes = {
+		...block.attributes,
+		...mergeAttributes,
 	};
-}
 
-/**
- * Given a block object, returns a copy of the block object,
- * optionally merging new attributes and/or replacing its inner blocks.
- *
- * @param {Object} block           Block instance.
- * @param {Object} mergeAttributes Block attributes.
- * @param {?Array} newInnerBlocks  Nested blocks.
- *
- * @return {Object} A cloned block.
- */
-export function cloneBlock( block, mergeAttributes = {}, newInnerBlocks ) {
-	const clientId = uuid();
+	if ( requiredSupportKeys ) {
+		// Exclude attributes that do not have the required supports.
+		const attributesFilter = {
+			__experimentalSupports: requiredSupportKeys.reduce(
+				( acc, supportKey ) => ( { ...acc, [ supportKey ]: false } ),
+				{}
+			),
+		};
+		attributes = omit(
+			attributes,
+			__experimentalFilterBlockAttributes( block.name, attributesFilter )
+		);
+	}
 
 	return {
 		...block,
 		clientId,
-		attributes: {
-			...block.attributes,
-			...mergeAttributes,
-		},
+		attributes,
 		innerBlocks:
 			newInnerBlocks ||
 			block.innerBlocks.map( ( innerBlock ) => cloneBlock( innerBlock ) ),

packages/blocks/src/api/index.js

@@ -8,7 +8,6 @@ export {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	cloneBlock,
-	__experimentalCloneSanitizedBlock,
 	getPossibleBlockTransformations,
 	switchToBlockType,
 	getBlockTransforms,
@@ -142,8 +141,7 @@ export {
 	isValidIcon,
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
-	__experimentalSanitizeBlockAttributes,
-	__experimentalGetBlockAttributesNamesByRole,
+	__experimentalFilterBlockAttributes,
 } from './utils';
 
 // Templates are, in a general sense, a basic collection of block nodes with any

packages/blocks/src/api/serializer.js

@@ -355,6 +355,7 @@ export function serializeBlock( block, { isInnerBlocks = false } = {} ) {
 
 	const blockType = getBlockType( blockName );
 	const saveAttributes = getCommentAttributes( blockType, block.attributes );
+
 	return getCommentDelimitedContent( blockName, saveAttributes, saveContent );
 }