Proposal: Internal block attributes

bin/api-docs/gen-block-lib-list.js

@@ -73,6 +73,7 @@ function getTruthyKeys( obj ) {
 
 	return Object.keys( obj )
 		.filter( ( key ) => ! key.startsWith( '__exp' ) )
+		.filter( ( key ) => ! obj[ key ].internal )
 		.map( ( key ) => ( obj[ key ] ? key : `~~${ key }~~` ) );
 }
 

packages/block-editor/src/components/block-list/block.js

@@ -315,22 +315,48 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 		__unstableMarkLastChangeAsPersistent,
 		moveBlocksToPosition,
 		removeBlock,
+		__unstableMarkNextChangeAsNotPersistent,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
-		setAttributes( newAttributes ) {
+		setAttributes( attributes ) {
 			const { getMultiSelectedBlockClientIds } =
 				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
-			const { clientId } = ownProps;
+			const { clientId, name } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
 				: [ clientId ];
 
-			updateBlockAttributes( clientIds, newAttributes );
+			const blockType = getBlockType( name );
+
+			const internalKeys = new Set();
+			for ( const key in blockType.attributes ) {
+				if ( blockType.attributes[ key ].internal ) {
+					internalKeys.add( key );
+				}
+			}
+
+			const internalAttributes = {};
+			const nonInternalAttributes = {};
+			for ( const key in attributes ) {
+				if ( internalKeys.has( key ) ) {
+					internalAttributes[ key ] = attributes[ key ];
+				} else {
+					nonInternalAttributes[ key ] = attributes[ key ];
+				}
+			}
+
+			if ( Object.keys( internalAttributes ).length ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( clientId, internalAttributes );
+			}
+			if ( Object.keys( nonInternalAttributes ).length ) {
+				updateBlockAttributes( clientIds, nonInternalAttributes );
+			}
 		},
 		onInsertBlocks( blocks, index ) {
 			const { rootClientId } = ownProps;

packages/block-library/src/file/block.json

@@ -52,6 +52,10 @@
 		"previewHeight": {
 			"type": "number",
 			"default": 600
+		},
+		"_blobURL": {
+			"type": "string",
+			"internal": true
 		}
 	},
 	"supports": {

packages/block-library/src/file/edit.js

@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -71,7 +71,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		downloadButtonText,
 		displayPreview,
 		previewHeight,
+		_blobURL: blobURL,
 	} = attributes;
+
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -87,21 +89,31 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ isUploadingBlob, setIsUploadingBlob ] = useState( false );
+
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
+		const file = getBlobByURL( blobURL );
+		if ( file ) {
+			setIsUploadingBlob( true );
 
 			mediaUpload( {
 				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
+				onFileChange: ( [ newMedia ] ) => {
+					onSelectFile( newMedia, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
+				onError: ( message ) => {
+					onUploadError( message, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
 			} );
 
-			revokeBlobURL( href );
+			revokeBlobURL( blobURL );
 		}
 
 		if ( downloadButtonText === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			changeDownloadButtonText( _x( 'Download', 'button label' ) );
 		}
 	}, [] );
@@ -114,9 +126,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 	}, [ href, fileId, clientId ] );
 
-	function onSelectFile( newMedia ) {
-		if ( newMedia && newMedia.url ) {
+	function onSelectFile( newMedia, { isPersistent = true } = {} ) {
+		if ( newMedia && newMedia.url && ! isBlobURL( newMedia.url ) ) {
 			const isPdf = newMedia.url.endsWith( '.pdf' );
+			if ( ! isPersistent ) {
+				__unstableMarkNextChangeAsNotPersistent();
+			}
 			setAttributes( {
 				href: newMedia.url,
 				fileName: newMedia.title,
@@ -178,9 +193,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: classnames(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			isUploadingBlob && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': isUploadingBlob,
 			}
 		),
 	} );
@@ -232,7 +247,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				/>
 				<ClipboardToolbarButton
 					text={ href }
-					disabled={ isBlobURL( href ) }
+					disabled={ isUploadingBlob }
 				/>
 			</BlockControls>
 			<div { ...blockProps }>

packages/block-library/src/file/transforms.js

@@ -21,14 +21,10 @@ const transforms = {
 				const blocks = [];
 
 				files.forEach( ( file ) => {
-					const blobURL = createBlobURL( file );
-
-					// File will be uploaded in componentDidMount()
 					blocks.push(
 						createBlock( 'core/file', {
-							href: blobURL,
-							fileName: file.name,
-							textLinkHref: blobURL,
+							// File will be uploaded when block mounts.
+							_blobURL: createBlobURL( file ),
 						} )
 					);
 				} );

packages/block-library/src/navigation/block.json

@@ -71,6 +71,10 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"_classicMenuId": {
+			"type": "number",
+			"internal": true
 		}
 	},
 	"providesContext": {

packages/block-library/src/navigation/edit/index.js

@@ -102,6 +102,7 @@ function Navigation( {
 		} = {},
 		hasIcon,
 		icon = 'handle',
+		_classicMenuId: classicMenuId,
 	} = attributes;
 
 	const ref = attributes.ref;
@@ -402,18 +403,34 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const onSelectClassicMenu = async ( classicMenu ) => {
-		const navMenu = await convertClassicMenu(
-			classicMenu.id,
-			classicMenu.name,
-			'draft'
-		);
-		if ( navMenu ) {
-			handleUpdateMenu( navMenu.id, {
-				focusNavigationBlock: true,
-			} );
+	const onSelectClassicMenu = useCallback(
+		async ( classicMenu ) => {
+			const navMenu = await convertClassicMenu(
+				classicMenu.id,
+				classicMenu.name,
+				'draft'
+			);
+			if ( navMenu ) {
+				handleUpdateMenu( navMenu.id, {
+					focusNavigationBlock: true,
+				} );
+			}
+		},
+		[ convertClassicMenu, handleUpdateMenu ]
+	);
+
+	// Convert the classic menu provided by the Legacy Widget block transform if
+	// it exists.
+	useEffect( () => {
+		if ( classicMenuId ) {
+			const classicMenu = classicMenus?.find(
+				( menu ) => menu.id === classicMenuId
+			);
+			if ( classicMenu ) {
+				onSelectClassicMenu( classicMenu );
+			}
 		}
-	};
+	}, [ classicMenuId, classicMenus, onSelectClassicMenu ] );
 
 	const onSelectNavigationMenu = ( menuId ) => {
 		handleUpdateMenu( menuId );

packages/blocks/src/api/serializer.js

@@ -225,6 +225,11 @@ export function getCommentAttributes( blockType, attributes ) {
 				return accumulator;
 			}
 
+			// Ignore internal attributes.
+			if ( attributeSchema.internal ) {
+				return accumulator;
+			}
+
 			// Ignore default value.
 			if (
 				'default' in attributeSchema &&

packages/blocks/src/api/utils.js

@@ -261,6 +261,10 @@ export function __experimentalSanitizeBlockAttributes( name, attributes ) {
 
 	return Object.entries( blockType.attributes ).reduce(
 		( accumulator, [ key, schema ] ) => {
+			if ( schema.internal ) {
+				return accumulator;
+			}
+
 			const value = attributes[ key ];
 
 			if ( undefined !== value ) {

packages/edit-widgets/src/store/actions.js

@@ -235,9 +235,9 @@ export const saveWidgetArea =
 			const widget = preservedRecords[ i ];
 			const { block, position } = batchMeta[ i ];
 
-			// Set __internalWidgetId on the block. This will be persisted to the
+			// Set _widgetId on the block. This will be persisted to the
 			// store when we dispatch receiveEntityRecords( post ) below.
-			post.blocks[ position ].attributes.__internalWidgetId = widget.id;
+			post.blocks[ position ].attributes._widgetId = widget.id;
 
 			const error = registry
 				.select( coreStore )

packages/widgets/package.json

@@ -29,6 +29,7 @@
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/notices": "file:../notices",