Add a help panel to the inserter available in all blocks (#16813)

packages/block-editor/README.md

@@ -387,6 +387,7 @@ The default editor settings
  bodyPlaceholder                        string        Empty post placeholder
  titlePlaceholder                       string        Empty title placeholder
  codeEditingEnabled                     string        Whether or not the user can switch to the code editor
+ showInserterHelpPanel                  boolean       Whether or not the inserter help panel is shown
  **experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
  **experimentalEnableLegacyWidgetBlock  boolean       Whether the user has enabled the Legacy Widget Block
  \_\_experimentalEnableMenuBlock          boolean       Whether the user has enabled the Menu Block

packages/block-editor/src/components/block-card/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockCard( { blockType } ) {
+	return (
+		<div className="block-editor-block-card">
+			<BlockIcon icon={ blockType.icon } showColors />
+			<div className="block-editor-block-card__content">
+				<div className="block-editor-block-card__title">{ blockType.title }</div>
+				<div className="block-editor-block-card__description">{ blockType.description }</div>
+			</div>
+		</div>
+	);
+}
+
+export default BlockCard;

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

@@ -0,0 +1,34 @@
+
+.block-editor-block-card {
+	display: flex;
+	align-items: flex-start;
+}
+
+.block-editor-block-card__icon {
+	border: $border-width solid $light-gray-700;
+	padding: 7px;
+	margin-right: 10px;
+	height: 36px;
+	width: 36px;
+}
+
+.block-editor-block-card__content {
+	flex-grow: 1;
+}
+
+.block-editor-block-card__title {
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
+.block-editor-block-card__description {
+	font-size: $default-font-size;
+}
+
+.block-editor-block-card .block-editor-block-icon {
+	margin-left: -2px;
+	margin-right: 10px;
+	padding: 0 3px;
+	width: $icon-button-size;
+	height: $icon-button-size-small;
+}

packages/block-editor/src/components/block-inspector/index.js

@@ -15,7 +15,7 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
-import BlockIcon from '../block-icon';
+import BlockCard from '../block-card';
 import InspectorControls from '../inspector-controls';
 import InspectorAdvancedControls from '../inspector-advanced-controls';
 import BlockStyles from '../block-styles';
@@ -51,13 +51,7 @@ const BlockInspector = ( {
 
 	return (
 		<>
-			<div className="editor-block-inspector__card block-editor-block-inspector__card">
-				<BlockIcon icon={ blockType.icon } showColors />
-				<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
-					<div className="editor-block-inspector__card-title block-editor-block-inspector__card-title">{ blockType.title }</div>
-					<div className="editor-block-inspector__card-description block-editor-block-inspector__card-description">{ blockType.description }</div>
-				</div>
-			</div>
+			<BlockCard blockType={ blockType } />
 			{ hasBlockStyles && (
 				<div>
 					<PanelBody

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

@@ -5,41 +5,3 @@
 	padding: ($panel-padding * 2) $panel-padding;
 	text-align: center;
 }
-
-
-.block-editor-block-inspector__card {
-	display: flex;
-	align-items: flex-start;
-	margin: -16px;
-	padding: 16px;
-}
-
-.block-editor-block-inspector__card-icon {
-	border: $border-width solid $light-gray-700;
-	padding: 7px;
-	margin-right: 10px;
-	height: 36px;
-	width: 36px;
-}
-
-.block-editor-block-inspector__card-content {
-	flex-grow: 1;
-}
-
-.block-editor-block-inspector__card-title {
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-block-inspector__card-description {
-	font-size: $default-font-size;
-}
-
-.block-editor-block-inspector__card .block-editor-block-icon {
-	margin-left: -2px;
-	margin-right: 10px;
-	padding: 0 3px;
-	width: $icon-button-size;
-	height: $icon-button-size-small;
-}
-

packages/block-editor/src/components/block-preview/index.js

@@ -21,7 +21,6 @@ import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
 function ScaledBlockPreview( { blocks, viewportWidth } ) {
 	const previewRef = useRef( null );
 
-	const [ isTallPreview, setIsTallPreview ] = useState( false );
 	const [ isReady, setIsReady ] = useState( false );
 	const [ previewScale, setPreviewScale ] = useState( 1 );
 	const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } );
@@ -51,7 +50,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 				const offsetY = ( containerElementRect.height > scaledElementRect.height * scale ) ?
 					( containerElementRect.height - ( scaledElementRect.height * scale ) ) / 2 : 0;
 
-				setIsTallPreview( scaledElementRect.height * scale > containerElementRect.height );
 				setPreviewScale( scale );
 				setPosition( { x: offsetX * scale, y: offsetY } );
 
@@ -60,7 +58,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 			} else {
 				const containerElementRect = containerElement.getBoundingClientRect();
 				setPreviewScale( containerElementRect.width / viewportWidth );
-				setIsTallPreview( true );
 			}
 
 			setIsReady( true );
@@ -86,14 +83,15 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
 		width: viewportWidth,
 	};
 
-	const contentClassNames = classnames( 'block-editor-block-preview__content editor-styles-wrapper', {
-		'is-tall-preview': isTallPreview,
-		'is-ready': isReady,
-	} );
-
 	return (
-		<div ref={ previewRef } className="block-editor-block-preview__container" aria-hidden>
-			<Disabled style={ previewStyles } className={ contentClassNames }>
+		<div
+			ref={ previewRef }
+			className={ classnames( 'block-editor-block-preview__container', {
+				'is-ready': isReady,
+			} ) }
+			aria-hidden
+		>
+			<Disabled style={ previewStyles } className="block-editor-block-preview__content editor-styles-wrapper">
 				<BlockList />
 			</Disabled>
 		</div>

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

@@ -1,35 +1,3 @@
-// This is the preview that shows up to the right of the thumbnail when hovering.
-.block-editor-block-switcher__preview {
-	padding: $block-padding;
-	font-family: $editor-font;
-	overflow: hidden;
-	width: 100%;
-	pointer-events: none;
-	display: none;
-
-	@include break-medium {
-		display: block;
-	}
-
-	.block-editor-block-preview__content {
-		font-family: $editor-font;
-
-		> div {
-			font-family: $editor-font;
-		}
-
-		&:not(.is-tall-preview) {
-			// Vertical alignment.
-			margin-top: 50%;
-		}
-	}
-
-	.block-editor-block-preview__title {
-		margin-bottom: 10px;
-		color: $dark-gray-300;
-	}
-}
-
 // These rules ensure the preview scales smoothly regardless of the container size.
 .block-editor-block-preview__container {
 	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
@@ -39,6 +7,11 @@
 	// The preview component measures the pixel width of this item, so as to calculate the scale factor.
 	// But without this baseline width, it collapses to 0.
 	width: 100%;
+
+	overflow: hidden;
+	&.is-ready {
+		overflow: visible;
+	}
 }
 
 .block-editor-block-preview__content {
@@ -74,10 +47,6 @@
 		height: auto;
 	}
 
-	&.is-tall-preview {
-		top: 4px;
-	}
-
 	.block-editor-block-list__insertion-point,
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,

packages/block-editor/src/components/inserter-list-item/style.scss

@@ -1,7 +1,7 @@
 .block-editor-block-types-list__list-item {
 	display: block;
 	width: 33.33%;
-	padding: 0 4px;
+	padding: 0;
 	margin: 0 0 12px;
 }
 
@@ -11,7 +11,7 @@
 	width: 100%;
 	font-size: $default-font-size;
 	color: $dark-gray-700;
-	padding: 0;
+	padding: 0 4px;
 	align-items: stretch;
 	justify-content: center;
 	cursor: pointer;