@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

package/src/tag-cloud/block.json

@@ -36,7 +36,11 @@
 	],
 	"supports": {
 		"html": false,
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
 }

package/src/tag-cloud/style.scss

@@ -1,6 +1,7 @@
 .wp-block-tag-cloud {
 	&.aligncenter {
 		text-align: center;
+		justify-content: center;
 	}
 
 	&.alignfull {

package/src/template-part/edit/index.js

@@ -8,22 +8,19 @@ import { isEmpty } from 'lodash';
  */
 import { useSelect } from '@wordpress/data';
 import {
-	BlockControls,
+	BlockSettingsMenuControls,
+	BlockTitle,
 	useBlockProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	Warning,
 	store as blockEditorStore,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
-import {
-	ToolbarGroup,
-	ToolbarButton,
-	Spinner,
-	Modal,
-} from '@wordpress/components';
+import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -43,11 +40,11 @@ export default function TemplatePartEdit( {
 	attributes,
 	setAttributes,
 	clientId,
+	isSelected,
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( templatePartId );
+	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
@@ -105,6 +102,14 @@ export default function TemplatePartEdit( {
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
 
+	// The `isSelected` check ensures the `BlockSettingsMenuControls` fill
+	// doesn't render multiple times. The block controls has similar internal check.
+	const canReplace =
+		isSelected &&
+		isEntityAvailable &&
+		hasReplacements &&
+		( area === 'header' || area === 'footer' );
+
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
 	if (
@@ -137,7 +142,7 @@ export default function TemplatePartEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ templatePartId }>
 			<TemplatePartAdvancedControls
 				tagName={ tagName }
 				setAttributes={ setAttributes }
@@ -158,21 +163,29 @@ export default function TemplatePartEdit( {
 					/>
 				</TagName>
 			) }
-			{ isEntityAvailable &&
-				hasReplacements &&
-				( area === 'header' || area === 'footer' ) && (
-					<BlockControls>
-						<ToolbarGroup className="wp-block-template-part__block-control-group">
-							<ToolbarButton
-								onClick={ () =>
-									setIsTemplatePartSelectionOpen( true )
+			{ canReplace && (
+				<BlockSettingsMenuControls>
+					{ () => (
+						<MenuItem
+							onClick={ () => {
+								setIsTemplatePartSelectionOpen( true );
+							} }
+						>
+							{ createInterpolateElement(
+								__( 'Replace <BlockTitle />' ),
+								{
+									BlockTitle: (
+										<BlockTitle
+											clientId={ clientId }
+											maximumLength={ 25 }
+										/>
+									),
 								}
-							>
-								{ __( 'Replace' ) }
-							</ToolbarButton>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
+							) }
+						</MenuItem>
+					) }
+				</BlockSettingsMenuControls>
+			) }
 			{ isEntityAvailable && (
 				<TemplatePartInnerBlocks
 					tagName={ TagName }
@@ -189,7 +202,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isTemplatePartSelectionOpen && (
 				<Modal
-					className="block-editor-template-part__selection-modal"
+					overlayClassName="block-editor-template-part__selection-modal"
 					title={ sprintf(
 						// Translators: %s as template part area title ("Header", "Footer", etc.).
 						__( 'Choose a %s' ),

package/src/template-part/edit/selection-modal.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
@@ -11,6 +11,10 @@ import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import {
+	SearchControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -21,6 +25,7 @@ import {
 	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 import { createTemplatePartId } from './utils/create-template-part-id';
+import { searchPatterns } from './utils/search';
 
 export default function TemplatePartSelectionModal( {
 	setAttributes,
@@ -29,6 +34,8 @@ export default function TemplatePartSelectionModal( {
 	area,
 	clientId,
 } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
 	// When the templatePartId is undefined,
 	// it means the user is creating a new one from the placeholder.
 	const isReplacingTemplatePartContent = !! templatePartId;
@@ -37,18 +44,24 @@ export default function TemplatePartSelectionModal( {
 		templatePartId
 	);
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
-	const templartPartsAsBlockPatterns = useMemo( () => {
-		return templateParts.map( ( templatePart ) => ( {
+	const filteredTemplateParts = useMemo( () => {
+		const partsAsPatterns = templateParts.map( ( templatePart ) => ( {
 			name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 			title: templatePart.title.rendered,
 			blocks: parse( templatePart.content.raw ),
 			templatePart,
 		} ) );
-	}, [ templateParts ] );
-	const shownTemplateParts = useAsyncList( templartPartsAsBlockPatterns );
-	const { createSuccessNotice } = useDispatch( noticesStore );
+
+		return searchPatterns( partsAsPatterns, searchValue );
+	}, [ templateParts, searchValue ] );
+	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const filteredBlockPatterns = useMemo( () => {
+		return searchPatterns( blockPatterns, searchValue );
+	}, [ blockPatterns, searchValue ] );
+	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
+
+	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	const onTemplatePartSelect = useCallback( ( templatePart ) => {
@@ -75,41 +88,56 @@ export default function TemplatePartSelectionModal( {
 		setAttributes
 	);
 
+	const hasTemplateParts = !! filteredTemplateParts.length;
+	const hasBlockPatterns = !! filteredBlockPatterns.length;
+
 	return (
-		<>
-			<div className="block-library-template-part__selection-content">
-				{ !! templartPartsAsBlockPatterns.length && (
-					<div>
-						<h2>{ __( 'Existing template parts' ) }</h2>
-						<BlockPatternsList
-							blockPatterns={ templartPartsAsBlockPatterns }
-							shownPatterns={ shownTemplateParts }
-							onClickPattern={ ( pattern ) => {
-								onTemplatePartSelect( pattern.templatePart );
-							} }
-						/>
-					</div>
-				) }
+		<div className="block-library-template-part__selection-content">
+			<div className="block-library-template-part__selection-search">
+				<SearchControl
+					onChange={ setSearchValue }
+					value={ searchValue }
+					label={ __( 'Search for replacements' ) }
+					placeholder={ __( 'Search' ) }
+				/>
+			</div>
+			{ hasTemplateParts && (
+				<div>
+					<h2>{ __( 'Existing template parts' ) }</h2>
+					<BlockPatternsList
+						blockPatterns={ filteredTemplateParts }
+						shownPatterns={ shownTemplateParts }
+						onClickPattern={ ( pattern ) => {
+							onTemplatePartSelect( pattern.templatePart );
+						} }
+					/>
+				</div>
+			) }
 
-				{ !! blockPatterns.length && (
-					<div>
-						<h2>{ __( 'Patterns' ) }</h2>
-						<BlockPatternsList
-							blockPatterns={ blockPatterns }
-							shownPatterns={ shownBlockPatterns }
-							onClickPattern={ ( pattern, blocks ) => {
-								if ( isReplacingTemplatePartContent ) {
-									replaceInnerBlocks( clientId, blocks );
-								} else {
-									createFromBlocks( blocks, pattern.title );
-								}
+			{ hasBlockPatterns && (
+				<div>
+					<h2>{ __( 'Patterns' ) }</h2>
+					<BlockPatternsList
+						blockPatterns={ filteredBlockPatterns }
+						shownPatterns={ shownBlockPatterns }
+						onClickPattern={ ( pattern, blocks ) => {
+							if ( isReplacingTemplatePartContent ) {
+								replaceInnerBlocks( clientId, blocks );
+							} else {
+								createFromBlocks( blocks, pattern.title );
+							}
 
-								onClose();
-							} }
-						/>
-					</div>
-				) }
-			</div>
-		</>
+							onClose();
+						} }
+					/>
+				</div>
+			) }
+
+			{ ! hasTemplateParts && ! hasBlockPatterns && (
+				<HStack alignment="center">
+					<p>{ __( 'No results found.' ) }</p>
+				</HStack>
+			) }
+		</div>
 	);
 }

package/src/template-part/edit/utils/search.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
+
+/**
+ * Get the search rank for a given pattern and a specific search term.
+ *
+ * @param {Object} pattern     Pattern to rank
+ * @param {string} searchValue Search term
+ * @return {number} A pattern search rank
+ */
+function getPatternSearchRank( pattern, searchValue ) {
+	const normalizedSearchValue = normalizeSearchInput( searchValue );
+	const normalizedTitle = normalizeSearchInput( pattern.title );
+
+	let rank = 0;
+
+	if ( normalizedSearchValue === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
+		rank += 20;
+	} else {
+		const searchTerms = normalizedSearchValue.split( ' ' );
+		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
+			normalizedTitle.includes( searchTerm )
+		);
+
+		// Prefer pattern with every search word in the title.
+		if ( hasMatchedTerms ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
+
+/**
+ * Filters an pattern list given a search term.
+ *
+ * @param {Array}  patterns    Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered pattern list.
+ */
+export function searchPatterns( patterns = [], searchValue = '' ) {
+	if ( ! searchValue ) {
+		return patterns;
+	}
+
+	const rankedPatterns = patterns
+		.map( ( pattern ) => {
+			return [ pattern, getPatternSearchRank( pattern, searchValue ) ];
+		} )
+		.filter( ( [ , rank ] ) => rank > 0 );
+
+	rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedPatterns.map( ( [ pattern ] ) => pattern );
+}

package/src/template-part/editor.scss

@@ -1,14 +1,26 @@
 .block-editor-template-part__selection-modal {
+	z-index: z-index(".block-editor-template-part__selection-modal");
+
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
+	.components-modal__frame {
+		@include break-small() {
+			width: calc(100% - #{ $grid-unit-20 * 2 });
+			height: calc(100% - #{ $header-height * 2 });
+		}
+		@include break-medium() {
+			width: $break-medium - $grid-unit-20 * 2;
+		}
+		@include break-large() {
+			height: 70%;
+		}
 	}
 }
+
+.block-library-template-part__selection-search {
+	background: $white;
+	position: sticky;
+	top: 0;
+	padding: $grid-unit-20 0;
+	z-index: z-index(".block-library-template-part__selection-search");
+}

package/src/template-part/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startCase } from 'lodash';
+import { capitalCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -41,7 +41,8 @@ export const settings = {
 		}
 
 		return (
-			decodeEntities( entity.title?.rendered ) || startCase( entity.slug )
+			decodeEntities( entity.title?.rendered ) ||
+			capitalCase( entity.slug )
 		);
 	},
 	edit,

package/src/template-part/index.php

@@ -159,11 +159,11 @@ function render_block_core_template_part( $attributes ) {
 }
 
 /**
- * Returns an array of variation objects for the template part block.
+ * Returns an array of area variation objects for the template part block.
  *
  * @return array Array containing the block variation objects.
  */
-function build_template_part_block_variations() {
+function build_template_part_block_area_variations() {
 	$variations    = array();
 	$defined_areas = get_allowed_block_template_part_areas();
 	foreach ( $defined_areas as $area ) {
@@ -183,6 +183,60 @@ function build_template_part_block_variations() {
 	return $variations;
 }
 
+/**
+ * Returns an array of instance variation objects for the template part block
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_instance_variations() {
+	$variations     = array();
+	$template_parts = get_block_templates(
+		array(
+			'post_type' => 'wp_template_part',
+		),
+		'wp_template_part'
+	);
+
+	$defined_areas = get_allowed_block_template_part_areas();
+	$icon_by_area  = array_combine( array_column( $defined_areas, 'area' ), array_column( $defined_areas, 'icon' ) );
+
+	foreach ( $template_parts as $template_part ) {
+		$variations[] = array(
+			'name'        => sanitize_title( $template_part->slug ),
+			'title'       => $template_part->title,
+			// If there's no description for the template part don't show the
+			// block description. This is a bit hacky, but prevent the fallback
+			// by using a non-breaking space so that the value of description
+			// isn't falsey.
+			'description' => $template_part->description || ' ',
+			'attributes'  => array(
+				'slug'  => $template_part->slug,
+				'theme' => $template_part->theme,
+				'area'  => $template_part->area,
+			),
+			'scope'       => array( 'inserter' ),
+			'icon'        => $icon_by_area[ $template_part->area ],
+			'example'     => array(
+				'attributes' => array(
+					'slug'  => $template_part->slug,
+					'theme' => $template_part->theme,
+					'area'  => $template_part->area,
+				),
+			),
+		);
+	}
+	return $variations;
+}
+
+/**
+ * Returns an array of all template part block variations.
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_variations() {
+	return array_merge( build_template_part_block_area_variations(), build_template_part_block_instance_variations() );
+}
+
 /**
  * Registers the `core/template-part` block on the server.
  */

package/src/term-description/block.json

@@ -21,6 +21,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/text-columns/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 					className: `align${ width } columns-${ columns }`,
 				} ) }
 			>
-				{ times( columns, ( index ) => {
+				{ Array.from( { length: columns } ).map( ( _, index ) => {
 					return (
 						<div
 							className="wp-block-column"

package/src/text-columns/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 				className: `align${ width } columns-${ columns }`,
 			} ) }
 		>
-			{ times( columns, ( index ) => (
+			{ Array.from( { length: columns } ).map( ( _, index ) => (
 				<div className="wp-block-column" key={ `column-${ index }` }>
 					<RichText.Content
 						tagName="p"

package/src/verse/block.json

@@ -44,6 +44,7 @@
 			}
 		},
 		"spacing": {
+			"margin": true,
 			"padding": true
 		}
 	},

package/src/video/block.json

@@ -77,6 +77,10 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"__experimentalStyle": {
 			"spacing": {
 				"margin": "0 0 1em 0"

package/src/video/style.scss

@@ -1,4 +1,6 @@
 .wp-block-video {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	video {
 		width: 100%;
 	}

package/build/comments/edit.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/comments/edit.js"],"names":["TEMPLATE","width","size","style","border","radius","fontSize","layout","type","spacing","margin","top","bottom","CommentsEdit","attributes","setAttributes","tagName","TagName","blockProps","innerBlocksProps","template"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,QAAQ,GAAG,CAChB,CAAE,qBAAF,CADgB,EAEhB,CACC,uBADD,EAEC,EAFD,EAGC,CACC,CACC,cADD,EAEC,EAFD,EAGC,CACC,CACC,aADD,EAEC;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAFD,EAGC,CACC,CACC,aADD,EAEC;AACCC,EAAAA,IAAI,EAAE,EADP;AAECC,EAAAA,KAAK,EAAE;AACNC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AADF;AAFR,CAFD,CADD,CAHD,CADD,EAgBC,CACC,aADD,EAEC,EAFD,EAGC,CACC,CACC,0BADD,EAEC;AACCC,EAAAA,QAAQ,EAAE;AADX,CAFD,CADD,EAOC,CACC,YADD,EAEC;AACCC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,IAAI,EAAE;AAAR,GADT;AAECL,EAAAA,KAAK,EAAE;AACNM,IAAAA,OAAO,EAAE;AACRC,MAAAA,MAAM,EAAE;AACPC,QAAAA,GAAG,EAAE,KADE;AAEPC,QAAAA,MAAM,EAAE;AAFD;AADA;AADH;AAFR,CAFD,EAaC,CACC,CACC,mBADD,EAEC;AACCN,EAAAA,QAAQ,EAAE;AADX,CAFD,CADD,EAOC,CACC,wBADD,EAEC;AACCA,EAAAA,QAAQ,EAAE;AADX,CAFD,CAPD,CAbD,CAPD,EAmCC,CAAE,sBAAF,CAnCD,EAoCC,CACC,yBADD,EAEC;AACCA,EAAAA,QAAQ,EAAE;AADX,CAFD,CApCD,CAHD,CAhBD,CAHD,CADD,CAHD,CAFgB,EA4EhB,CAAE,0BAAF,CA5EgB,EA6EhB,CAAE,yBAAF,CA7EgB,CAAjB;;AAgFe,SAASO,YAAT,OAAuD;AAAA,MAAhC;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAgC;AACrE,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAuBH,UAA7B;AAEA,QAAMI,UAAU,GAAG,iCAAnB;AACA,QAAMC,gBAAgB,GAAG,sCAAqBD,UAArB,EAAiC;AACzDE,IAAAA,QAAQ,EAAEpB;AAD+C,GAAjC,CAAzB;AAIA,SACC,qDACC,4BAAC,kCAAD;AACC,IAAA,UAAU,EAAGc,UADd;AAEC,IAAA,aAAa,EAAGC;AAFjB,IADD,EAKC,4BAAC,OAAD,EAAcI,gBAAd,CALD,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentsInspectorControls from './edit/comments-inspector-controls';\n\nconst TEMPLATE = [\n\t[ 'core/comments-title' ],\n\t[\n\t\t'core/comment-template',\n\t\t{},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/columns',\n\t\t\t\t{},\n\t\t\t\t[\n\t\t\t\t\t[\n\t\t\t\t\t\t'core/column',\n\t\t\t\t\t\t{ width: '40px' },\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t'core/avatar',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tsize: 40,\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tborder: { radius: '20px' },\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\t[\n\t\t\t\t\t\t'core/column',\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t'core/comment-author-name',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tfontSize: 'small',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t'core/group',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlayout: { type: 'flex' },\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tspacing: {\n\t\t\t\t\t\t\t\t\t\t\tmargin: {\n\t\t\t\t\t\t\t\t\t\t\t\ttop: '0px',\n\t\t\t\t\t\t\t\t\t\t\t\tbottom: '0px',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'core/comment-date',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 'small',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'core/comment-edit-link',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 'small',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t[ 'core/comment-content' ],\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t'core/comment-reply-link',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tfontSize: 'small',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t],\n\t\t],\n\t],\n\t[ 'core/comments-pagination' ],\n\t[ 'core/post-comments-form' ],\n];\n\nexport default function CommentsEdit( { attributes, setAttributes } ) {\n\tconst { tagName: TagName } = attributes;\n\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<CommentsInspectorControls\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t/>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"]}

package/build/list-item/hooks/use-backspace.js

@@ -1,59 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useBackspace;
-
-var _element = require("@wordpress/element");
-
-var _compose = require("@wordpress/compose");
-
-var _keycodes = require("@wordpress/keycodes");
-
-var _data = require("@wordpress/data");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _useOutdentListItem = _interopRequireDefault(require("./use-outdent-list-item"));
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function useBackspace(props) {
-  const {
-    getSelectionStart,
-    getSelectionEnd
-  } = (0, _data.useSelect)(_blockEditor.store);
-  const propsRef = (0, _element.useRef)(props);
-  propsRef.current = props;
-  const [canOutdent, outdentListItem] = (0, _useOutdentListItem.default)(propsRef.current.clientId);
-  return (0, _compose.useRefEffect)(element => {
-    function onKeyDown(event) {
-      if (event.defaultPrevented || event.keyCode !== _keycodes.BACKSPACE) {
-        return;
-      } // Handle only if we have a collapsed selection at the
-      // start of a list item and we can outdent.
-
-
-      if (!canOutdent || [getSelectionStart().offset, getSelectionEnd().offset].some(offset => offset !== 0)) {
-        return;
-      }
-
-      event.preventDefault();
-      outdentListItem();
-    }
-
-    element.addEventListener('keydown', onKeyDown);
-    return () => {
-      element.removeEventListener('keydown', onKeyDown);
-    };
-  }, [canOutdent]);
-}
-//# sourceMappingURL=use-backspace.js.map

package/build/list-item/hooks/use-backspace.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/list-item/hooks/use-backspace.js"],"names":["useBackspace","props","getSelectionStart","getSelectionEnd","blockEditorStore","propsRef","current","canOutdent","outdentListItem","clientId","element","onKeyDown","event","defaultPrevented","keyCode","BACKSPACE","offset","some","preventDefault","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;AAGe,SAASA,YAAT,CAAuBC,KAAvB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,iBAAF;AAAqBC,IAAAA;AAArB,MACL,qBAAWC,kBAAX,CADD;AAEA,QAAMC,QAAQ,GAAG,qBAAQJ,KAAR,CAAjB;AACAI,EAAAA,QAAQ,CAACC,OAAT,GAAmBL,KAAnB;AACA,QAAM,CAAEM,UAAF,EAAcC,eAAd,IAAkC,iCACvCH,QAAQ,CAACC,OAAT,CAAiBG,QADsB,CAAxC;AAGA,SAAO,2BACJC,OAAF,IAAe;AACd,aAASC,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,UAAKA,KAAK,CAACC,gBAAN,IAA0BD,KAAK,CAACE,OAAN,KAAkBC,mBAAjD,EAA6D;AAC5D;AACA,OAH0B,CAI3B;AACA;;;AACA,UACC,CAAER,UAAF,IACA,CACCL,iBAAiB,GAAGc,MADrB,EAECb,eAAe,GAAGa,MAFnB,EAGEC,IAHF,CAGUD,MAAF,IAAcA,MAAM,KAAK,CAHjC,CAFD,EAME;AACD;AACA;;AACDJ,MAAAA,KAAK,CAACM,cAAN;AACAV,MAAAA,eAAe;AACf;;AAEDE,IAAAA,OAAO,CAACS,gBAAR,CAA0B,SAA1B,EAAqCR,SAArC;AACA,WAAO,MAAM;AACZD,MAAAA,OAAO,CAACU,mBAAR,CAA6B,SAA7B,EAAwCT,SAAxC;AACA,KAFD;AAGA,GAzBK,EA0BN,CAAEJ,UAAF,CA1BM,CAAP;AA4BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useRefEffect } from '@wordpress/compose';\nimport { BACKSPACE } from '@wordpress/keycodes';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport useOutdentListItem from './use-outdent-list-item';\n\nexport default function useBackspace( props ) {\n\tconst { getSelectionStart, getSelectionEnd } =\n\t\tuseSelect( blockEditorStore );\n\tconst propsRef = useRef( props );\n\tpropsRef.current = props;\n\tconst [ canOutdent, outdentListItem ] = useOutdentListItem(\n\t\tpropsRef.current.clientId\n\t);\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tfunction onKeyDown( event ) {\n\t\t\t\tif ( event.defaultPrevented || event.keyCode !== BACKSPACE ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Handle only if we have a collapsed selection at the\n\t\t\t\t// start of a list item and we can outdent.\n\t\t\t\tif (\n\t\t\t\t\t! canOutdent ||\n\t\t\t\t\t[\n\t\t\t\t\t\tgetSelectionStart().offset,\n\t\t\t\t\t\tgetSelectionEnd().offset,\n\t\t\t\t\t].some( ( offset ) => offset !== 0 )\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\toutdentListItem();\n\t\t\t}\n\n\t\t\telement.addEventListener( 'keydown', onKeyDown );\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'keydown', onKeyDown );\n\t\t\t};\n\t\t},\n\t\t[ canOutdent ]\n\t);\n}\n"]}