Block Directory: Add an "Install" button when a block type is not fou…

…nd (#22631)

* Update package-lock.json

* Filter the Missing block edit component

* Remove debug code

* Updated warning styles to be more consistent with other patterns like the block placeholder state

* Removed font size declaration - was inconsistent with other patterns particularly because of the use of `em` units for padding
* changed padding on the warning and changed margin on the warning message
* changed the side the padding was on for warning buttons

* Run `parse` to get the correct attributes and innerBlocks

Co-authored-by: Michael Arestad <marestad@gmail.com>

packages/block-directory/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/data-controls": "file:../data-controls",
 		"@wordpress/edit-post": "file:../edit-post",
 		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

packages/block-directory/src/plugins/filter-missing/index.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { RawHTML } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Warning } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import InstallButton from './install-button';
+
+const filterMissing = ( OriginalComponent ) => ( props ) => {
+	const { originalName, originalUndelimitedContent } = props.attributes;
+	const { block, hasPermission } = useSelect(
+		( select ) => {
+			const { getDownloadableBlocks } = select( 'core/block-directory' );
+			const blocks = getDownloadableBlocks(
+				'block:' + originalName
+			).filter( ( { name } ) => originalName === name );
+			return {
+				hasPermission: select( 'core' ).canUser(
+					'read',
+					'block-directory/search'
+				),
+				block: blocks.length && blocks[ 0 ],
+			};
+		},
+		[ originalName ]
+	);
+
+	if ( ! hasPermission || ! block ) {
+		return <OriginalComponent { ...props } />;
+	}
+
+	const actions = [
+		<InstallButton
+			key="install"
+			block={ block }
+			attributes={ props.attributes }
+			clientId={ props.clientId }
+		/>,
+		<Button key="convert" onClick={ props.convertToHTML } isLink>
+			{ __( 'Keep as HTML' ) }
+		</Button>,
+	];
+
+	return (
+		<>
+			<Warning actions={ actions }>
+				{ sprintf(
+					/* translators: %s: block name */
+					__(
+						'Your site doesn’t include support for the %s block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.'
+					),
+					block.title || originalName
+				) }
+			</Warning>
+			<RawHTML>{ originalUndelimitedContent }</RawHTML>
+		</>
+	);
+};
+
+export default filterMissing;

packages/block-directory/src/plugins/filter-missing/install-button.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { createBlock, getBlockType, parse } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+export default function InstallButton( { attributes, block, clientId } ) {
+	const isInstallingBlock = useSelect( ( select ) =>
+		select( 'core/block-directory' ).isInstalling( block.id )
+	);
+	const { installBlockType } = useDispatch( 'core/block-directory' );
+	const { replaceBlock } = useDispatch( 'core/block-editor' );
+
+	return (
+		<Button
+			onClick={ () =>
+				installBlockType( block ).then( ( success ) => {
+					if ( success ) {
+						const blockType = getBlockType( block.name );
+						const [ originalBlock ] = parse(
+							attributes.originalContent
+						);
+						if ( originalBlock ) {
+							replaceBlock(
+								clientId,
+								createBlock(
+									blockType.name,
+									originalBlock.attributes,
+									originalBlock.innerBlocks
+								)
+							);
+						}
+					}
+				} )
+			}
+			disabled={ isInstallingBlock }
+			isBusy={ isInstallingBlock }
+			isPrimary
+		>
+			{ sprintf(
+				/* translators: %s: block name */
+				__( 'Install %s' ),
+				block.title
+			) }
+		</Button>
+	);
+}

packages/block-directory/src/plugins/index.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { registerPlugin } from '@wordpress/plugins';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import AutoBlockUninstaller from '../components/auto-block-uninstaller';
 import InserterMenuDownloadableBlocksPanel from './inserter-menu-downloadable-blocks-panel';
 import InstalledBlocksPrePublishPanel from './installed-blocks-pre-publish-panel';
+import filterMissing from './filter-missing';
 
 registerPlugin( 'block-directory', {
 	render() {
@@ -21,3 +23,9 @@ registerPlugin( 'block-directory', {
 		);
 	},
 } );
+
+addFilter(
+	'editor.missingEdit',
+	'block-directory/install-missing',
+	filterMissing
+);

packages/block-editor/src/components/warning/style.scss

@@ -3,8 +3,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	font-family: $default-font;
-	font-size: $default-font-size;
-	padding: ($grid-unit-10 - $border-width - $border-width) $grid-unit-15;
+	padding: 1em;
 
 	// Block UI appearance.
 	border: $border-width solid $gray-900;
@@ -15,7 +14,7 @@
 		line-height: $default-line-height;
 		font-family: $default-font;
 		font-size: $default-font-size;
-		margin: 1em 0;
+		margin: 0 0 1em;
 
 	}
 
@@ -38,7 +37,7 @@
 	}
 
 	.block-editor-warning__action {
-		margin: 0 0 0 $grid-unit-10;
+		margin: 0 $grid-unit-10 0 0;
 	}
 }
 

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

@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 import { RawHTML } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, withFilters } from '@wordpress/components';
 import { getBlockType, createBlock } from '@wordpress/blocks';
 import { withDispatch } from '@wordpress/data';
 import { Warning } from '@wordpress/block-editor';
@@ -24,7 +25,7 @@ function MissingBlockWarning( { attributes, convertToHTML } ) {
 			originalName
 		);
 		actions.push(
-			<Button key="convert" onClick={ convertToHTML } isLarge isPrimary>
+			<Button key="convert" onClick={ convertToHTML } isPrimary>
 				{ __( 'Keep as HTML' ) }
 			</Button>
 		);
@@ -46,18 +47,21 @@ function MissingBlockWarning( { attributes, convertToHTML } ) {
 	);
 }
 
-const MissingEdit = withDispatch( ( dispatch, { clientId, attributes } ) => {
-	const { replaceBlock } = dispatch( 'core/block-editor' );
-	return {
-		convertToHTML() {
-			replaceBlock(
-				clientId,
-				createBlock( 'core/html', {
-					content: attributes.originalUndelimitedContent,
-				} )
-			);
-		},
-	};
-} )( MissingBlockWarning );
+const MissingEdit = compose(
+	withDispatch( ( dispatch, { clientId, attributes } ) => {
+		const { replaceBlock } = dispatch( 'core/block-editor' );
+		return {
+			convertToHTML() {
+				replaceBlock(
+					clientId,
+					createBlock( 'core/html', {
+						content: attributes.originalUndelimitedContent,
+					} )
+				);
+			},
+		};
+	} ),
+	withFilters( 'editor.missingEdit' )
+)( MissingBlockWarning );
 
 export default MissingEdit;