@wordpress/block-library 7.10.0 → 7.11.0

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.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/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"]}

package/build/post-comments/edit.js

@@ -1,184 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PostCommentsEdit;
-
-var _element = require("@wordpress/element");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _i18n = require("@wordpress/i18n");
-
-var _data = require("@wordpress/data");
-
-var _coreData = require("@wordpress/core-data");
-
-var _compose = require("@wordpress/compose");
-
-var _form = _interopRequireDefault(require("../post-comments-form/form"));
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function PostCommentsEdit(_ref) {
-  let {
-    attributes: {
-      textAlign
-    },
-    setAttributes,
-    context: {
-      postType,
-      postId
-    }
-  } = _ref;
-  let [postTitle] = (0, _coreData.useEntityProp)('postType', postType, 'title', postId);
-  postTitle = postTitle || (0, _i18n.__)('Post Title');
-  const [commentStatus] = (0, _coreData.useEntityProp)('postType', postType, 'comment_status', postId);
-  const {
-    avatarURL,
-    defaultCommentStatus
-  } = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings().__experimentalDiscussionSettings);
-  const isSiteEditor = postType === undefined || postId === undefined;
-  const postTypeSupportsComments = (0, _data.useSelect)(select => {
-    var _select$getPostType;
-
-    return postType ? !!((_select$getPostType = select(_coreData.store).getPostType(postType)) !== null && _select$getPostType !== void 0 && _select$getPostType.supports.comments) : false;
-  });
-  let warning = (0, _i18n.__)('Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments" block.');
-  let showPlaceholder = true;
-
-  if (!isSiteEditor && 'open' !== commentStatus) {
-    if ('closed' === commentStatus) {
-      warning = (0, _i18n.sprintf)(
-      /* translators: 1: Post type (i.e. "post", "page") */
-      (0, _i18n.__)('Post Comments block: Comments to this %s are not allowed.'), postType);
-      showPlaceholder = false;
-    } else if (!postTypeSupportsComments) {
-      warning = (0, _i18n.sprintf)(
-      /* translators: 1: Post type (i.e. "post", "page") */
-      (0, _i18n.__)('Post Comments block: Comments for this post type (%s) are not enabled.'), postType);
-      showPlaceholder = false;
-    } else if ('open' !== defaultCommentStatus) {
-      warning = (0, _i18n.__)('Post Comments block: Comments are not enabled.');
-      showPlaceholder = false;
-    }
-  }
-
-  const blockProps = (0, _blockEditor.useBlockProps)({
-    className: (0, _classnames.default)({
-      [`has-text-align-${textAlign}`]: textAlign
-    })
-  });
-  const disabledRef = (0, _compose.useDisabled)();
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, {
-    group: "block"
-  }, (0, _element.createElement)(_blockEditor.AlignmentControl, {
-    value: textAlign,
-    onChange: nextAlign => {
-      setAttributes({
-        textAlign: nextAlign
-      });
-    }
-  })), (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, warning), showPlaceholder && (0, _element.createElement)("div", {
-    className: "wp-block-post-comments__placeholder",
-    ref: disabledRef
-  }, (0, _element.createElement)("h3", null,
-  /* translators: %s: Post title. */
-  (0, _i18n.sprintf)((0, _i18n.__)('One response to %s'), postTitle)), (0, _element.createElement)("div", {
-    className: "navigation"
-  }, (0, _element.createElement)("div", {
-    className: "alignleft"
-  }, (0, _element.createElement)("a", {
-    href: "#top"
-  }, "\xAB ", (0, _i18n.__)('Older Comments'))), (0, _element.createElement)("div", {
-    className: "alignright"
-  }, (0, _element.createElement)("a", {
-    href: "#top"
-  }, (0, _i18n.__)('Newer Comments'), " \xBB"))), (0, _element.createElement)("ol", {
-    className: "commentlist"
-  }, (0, _element.createElement)("li", {
-    className: "comment even thread-even depth-1"
-  }, (0, _element.createElement)("article", {
-    className: "comment-body"
-  }, (0, _element.createElement)("footer", {
-    className: "comment-meta"
-  }, (0, _element.createElement)("div", {
-    className: "comment-author vcard"
-  }, (0, _element.createElement)("img", {
-    alt: "Commenter Avatar",
-    src: avatarURL,
-    className: "avatar avatar-32 photo",
-    height: "32",
-    width: "32",
-    loading: "lazy"
-  }), (0, _element.createInterpolateElement)((0, _i18n.sprintf)(
-  /* translators: %s: Comment author link. */
-  (0, _i18n.__)('%s <span>says:</span>'), (0, _i18n.sprintf)('<cite><a>%s</a></cite>', (0, _i18n.__)('A WordPress Commenter'))), {
-    span: (0, _element.createElement)("span", {
-      className: "says"
-    }),
-    a:
-    /* eslint-disable jsx-a11y/anchor-has-content */
-    (0, _element.createElement)("a", {
-      href: "#top",
-      className: "url"
-    })
-    /* eslint-enable jsx-a11y/anchor-has-content */
-    ,
-    cite: (0, _element.createElement)("cite", {
-      className: "fn"
-    })
-  })), (0, _element.createElement)("div", {
-    className: "comment-metadata"
-  }, (0, _element.createElement)("a", {
-    href: "#top"
-  }, (0, _element.createElement)("time", {
-    dateTime: "2000-01-01T12:00:00+00:00"
-  }, (0, _i18n.__)('January 1, 2000 at 12:00 am'))), ' ', (0, _element.createElement)("span", {
-    className: "edit-link"
-  }, (0, _element.createElement)("a", {
-    className: "comment-edit-link",
-    href: "#top"
-  }, (0, _i18n.__)('Edit'))))), (0, _element.createElement)("div", {
-    className: "comment-content"
-  }, (0, _element.createElement)("p", null, (0, _i18n.__)('Hi, this is a comment.'), (0, _element.createElement)("br", null), (0, _i18n.__)('To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'), (0, _element.createElement)("br", null), (0, _element.createInterpolateElement)((0, _i18n.__)('Commenter avatars come from <a>Gravatar</a>'), {
-    a:
-    /* eslint-disable-next-line jsx-a11y/anchor-has-content */
-    (0, _element.createElement)("a", {
-      href: "https://gravatar.com/"
-    })
-  }))), (0, _element.createElement)("div", {
-    className: "reply"
-  }, (0, _element.createElement)("a", {
-    className: "comment-reply-link",
-    href: "#top",
-    "aria-label": (0, _i18n.sprintf)(
-    /* translators: Comment reply button text. %s: Comment author name. */
-    (0, _i18n.__)('Reply to %s'), (0, _i18n.__)('A WordPress Commenter'))
-  }, (0, _i18n.__)('Reply')))))), (0, _element.createElement)("div", {
-    className: "navigation"
-  }, (0, _element.createElement)("div", {
-    className: "alignleft"
-  }, (0, _element.createElement)("a", {
-    href: "#top"
-  }, "\xAB ", (0, _i18n.__)('Older Comments'))), (0, _element.createElement)("div", {
-    className: "alignright"
-  }, (0, _element.createElement)("a", {
-    href: "#top"
-  }, (0, _i18n.__)('Newer Comments'), " \xBB"))), (0, _element.createElement)(_form.default, null))));
-}
-//# sourceMappingURL=edit.js.map

package/build/post-comments/edit.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/post-comments/edit.js"],"names":["PostCommentsEdit","attributes","textAlign","setAttributes","context","postType","postId","postTitle","commentStatus","avatarURL","defaultCommentStatus","select","blockEditorStore","getSettings","__experimentalDiscussionSettings","isSiteEditor","undefined","postTypeSupportsComments","coreStore","getPostType","supports","comments","warning","showPlaceholder","blockProps","className","disabledRef","nextAlign","span","a","cite"],"mappings":";;;;;;;;;AAmBA;;AAhBA;;AAKA;;AAOA;;AACA;;AACA;;AACA;;AAMA;;AAxBA;AACA;AACA;;AAGA;AACA;AACA;;AAcA;AACA;AACA;AAGe,SAASA,gBAAT,OAIX;AAAA,MAJsC;AACzCC,IAAAA,UAAU,EAAE;AAAEC,MAAAA;AAAF,KAD6B;AAEzCC,IAAAA,aAFyC;AAGzCC,IAAAA,OAAO,EAAE;AAAEC,MAAAA,QAAF;AAAYC,MAAAA;AAAZ;AAHgC,GAItC;AACH,MAAI,CAAEC,SAAF,IAAgB,6BAAe,UAAf,EAA2BF,QAA3B,EAAqC,OAArC,EAA8CC,MAA9C,CAApB;AACAC,EAAAA,SAAS,GAAGA,SAAS,IAAI,cAAI,YAAJ,CAAzB;AAEA,QAAM,CAAEC,aAAF,IAAoB,6BACzB,UADyB,EAEzBH,QAFyB,EAGzB,gBAHyB,EAIzBC,MAJyB,CAA1B;AAOA,QAAM;AAAEG,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAAsC,qBACzCC,MAAF,IACCA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,WAA3B,GACEC,gCAHwC,CAA5C;AAMA,QAAMC,YAAY,GAAGV,QAAQ,KAAKW,SAAb,IAA0BV,MAAM,KAAKU,SAA1D;AAEA,QAAMC,wBAAwB,GAAG,qBAAaN,MAAF;AAAA;;AAAA,WAC3CN,QAAQ,GACL,CAAC,yBAAEM,MAAM,CAAEO,eAAF,CAAN,CAAoBC,WAApB,CAAiCd,QAAjC,CAAF,gDAAE,oBAA6Ce,QAA7C,CAAsDC,QAAxD,CADI,GAEL,KAHwC;AAAA,GAAX,CAAjC;AAMA,MAAIC,OAAO,GAAG,cACb,iQADa,CAAd;AAGA,MAAIC,eAAe,GAAG,IAAtB;;AAEA,MAAK,CAAER,YAAF,IAAkB,WAAWP,aAAlC,EAAkD;AACjD,QAAK,aAAaA,aAAlB,EAAkC;AACjCc,MAAAA,OAAO,GAAG;AACT;AACA,oBACC,2DADD,CAFS,EAKTjB,QALS,CAAV;AAOAkB,MAAAA,eAAe,GAAG,KAAlB;AACA,KATD,MASO,IAAK,CAAEN,wBAAP,EAAkC;AACxCK,MAAAA,OAAO,GAAG;AACT;AACA,oBACC,wEADD,CAFS,EAKTjB,QALS,CAAV;AAOAkB,MAAAA,eAAe,GAAG,KAAlB;AACA,KATM,MASA,IAAK,WAAWb,oBAAhB,EAAuC;AAC7CY,MAAAA,OAAO,GAAG,cAAI,gDAAJ,CAAV;AACAC,MAAAA,eAAe,GAAG,KAAlB;AACA;AACD;;AAED,QAAMC,UAAU,GAAG,gCAAe;AACjCC,IAAAA,SAAS,EAAE,yBAAY;AACtB,OAAG,kBAAkBvB,SAAW,EAAhC,GAAqCA;AADf,KAAZ;AADsB,GAAf,CAAnB;AAMA,QAAMwB,WAAW,GAAG,2BAApB;AAEA,SACC,qDACC,4BAAC,0BAAD;AAAe,IAAA,KAAK,EAAC;AAArB,KACC,4BAAC,6BAAD;AACC,IAAA,KAAK,EAAGxB,SADT;AAEC,IAAA,QAAQ,EAAKyB,SAAF,IAAiB;AAC3BxB,MAAAA,aAAa,CAAE;AAAED,QAAAA,SAAS,EAAEyB;AAAb,OAAF,CAAb;AACA;AAJF,IADD,CADD,EAUC,mCAAUH,UAAV,EACC,4BAAC,oBAAD,QAAWF,OAAX,CADD,EAGGC,eAAe,IAChB;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,GAAG,EAAGG;AAFP,KAIC;AAEE;AACA,qBAAS,cAAI,oBAAJ,CAAT,EAAqCnB,SAArC,CAHF,CAJD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAG,IAAA,IAAI,EAAC;AAAR,cAAmB,cAAI,gBAAJ,CAAnB,CADD,CADD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAG,IAAA,IAAI,EAAC;AAAR,KAAiB,cAAI,gBAAJ,CAAjB,UADD,CAJD,CAXD,EAoBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,GAAG,EAAC,kBADL;AAEC,IAAA,GAAG,EAAGE,SAFP;AAGC,IAAA,SAAS,EAAC,wBAHX;AAIC,IAAA,MAAM,EAAC,IAJR;AAKC,IAAA,KAAK,EAAC,IALP;AAMC,IAAA,OAAO,EAAC;AANT,IADD,EASG,uCACD;AACC;AACA,gBACC,uBADD,CAFD,EAKC,mBACC,wBADD,EAEC,cACC,uBADD,CAFD,CALD,CADC,EAaD;AACCmB,IAAAA,IAAI,EACH;AAAM,MAAA,SAAS,EAAC;AAAhB,MAFF;AAICC,IAAAA,CAAC;AACA;AACA;AACC,MAAA,IAAI,EAAC,MADN;AAEC,MAAA,SAAS,EAAC;AAFX;AAIA;AAVF;AAYCC,IAAAA,IAAI,EACH;AAAM,MAAA,SAAS,EAAC;AAAhB;AAbF,GAbC,CATH,CADD,EA0CC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAG,IAAA,IAAI,EAAC;AAAR,KACC;AAAM,IAAA,QAAQ,EAAC;AAAf,KACG,cACD,6BADC,CADH,CADD,CADD,EAOO,GAPP,EAQC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,SAAS,EAAC,mBADX;AAEC,IAAA,IAAI,EAAC;AAFN,KAIG,cAAI,MAAJ,CAJH,CADD,CARD,CA1CD,CADD,EA8DC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,uCACG,cAAI,wBAAJ,CADH,EAEC,uCAFD,EAGG,cACD,oHADC,CAHH,EAMC,uCAND,EAOG,uCACD,cACC,6CADD,CADC,EAID;AACCD,IAAAA,CAAC;AACA;AACA;AAAG,MAAA,IAAI,EAAC;AAAR;AAHF,GAJC,CAPH,CADD,CA9DD,EAoFC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,SAAS,EAAC,oBADX;AAEC,IAAA,IAAI,EAAC,MAFN;AAGC,kBAAa;AACZ;AACA,kBAAI,aAAJ,CAFY,EAGZ,cAAI,uBAAJ,CAHY;AAHd,KASG,cAAI,OAAJ,CATH,CADD,CApFD,CADD,CADD,CApBD,EA2HC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAG,IAAA,IAAI,EAAC;AAAR,cAAmB,cAAI,gBAAJ,CAAnB,CADD,CADD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAG,IAAA,IAAI,EAAC;AAAR,KAAiB,cAAI,gBAAJ,CAAjB,UADD,CAJD,CA3HD,EAoIC,4BAAC,aAAD,OApID,CAJF,CAVD,CADD;AAyJA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tAlignmentControl,\n\tBlockControls,\n\tWarning,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useDisabled } from '@wordpress/compose';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CommentsForm from '../post-comments-form/form';\n\nexport default function PostCommentsEdit( {\n\tattributes: { textAlign },\n\tsetAttributes,\n\tcontext: { postType, postId },\n} ) {\n\tlet [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );\n\tpostTitle = postTitle || __( 'Post Title' );\n\n\tconst [ commentStatus ] = useEntityProp(\n\t\t'postType',\n\t\tpostType,\n\t\t'comment_status',\n\t\tpostId\n\t);\n\n\tconst { avatarURL, defaultCommentStatus } = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t.__experimentalDiscussionSettings\n\t);\n\n\tconst isSiteEditor = postType === undefined || postId === undefined;\n\n\tconst postTypeSupportsComments = useSelect( ( select ) =>\n\t\tpostType\n\t\t\t? !! select( coreStore ).getPostType( postType )?.supports.comments\n\t\t\t: false\n\t);\n\n\tlet warning = __(\n\t\t'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the \"Comments\" block.'\n\t);\n\tlet showPlaceholder = true;\n\n\tif ( ! isSiteEditor && 'open' !== commentStatus ) {\n\t\tif ( 'closed' === commentStatus ) {\n\t\t\twarning = sprintf(\n\t\t\t\t/* translators: 1: Post type (i.e. \"post\", \"page\") */\n\t\t\t\t__(\n\t\t\t\t\t'Post Comments block: Comments to this %s are not allowed.'\n\t\t\t\t),\n\t\t\t\tpostType\n\t\t\t);\n\t\t\tshowPlaceholder = false;\n\t\t} else if ( ! postTypeSupportsComments ) {\n\t\t\twarning = sprintf(\n\t\t\t\t/* translators: 1: Post type (i.e. \"post\", \"page\") */\n\t\t\t\t__(\n\t\t\t\t\t'Post Comments block: Comments for this post type (%s) are not enabled.'\n\t\t\t\t),\n\t\t\t\tpostType\n\t\t\t);\n\t\t\tshowPlaceholder = false;\n\t\t} else if ( 'open' !== defaultCommentStatus ) {\n\t\t\twarning = __( 'Post Comments block: Comments are not enabled.' );\n\t\t\tshowPlaceholder = false;\n\t\t}\n\t}\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\n\tconst disabledRef = useDisabled();\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<AlignmentControl\n\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\tonChange={ ( nextAlign ) => {\n\t\t\t\t\t\tsetAttributes( { textAlign: nextAlign } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<Warning>{ warning }</Warning>\n\n\t\t\t\t{ showPlaceholder && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"wp-block-post-comments__placeholder\"\n\t\t\t\t\t\tref={ disabledRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t/* translators: %s: Post title. */\n\t\t\t\t\t\t\t\tsprintf( __( 'One response to %s' ), postTitle )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</h3>\n\n\t\t\t\t\t\t<div className=\"navigation\">\n\t\t\t\t\t\t\t<div className=\"alignleft\">\n\t\t\t\t\t\t\t\t<a href=\"#top\">« { __( 'Older Comments' ) }</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"alignright\">\n\t\t\t\t\t\t\t\t<a href=\"#top\">{ __( 'Newer Comments' ) } »</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<ol className=\"commentlist\">\n\t\t\t\t\t\t\t<li className=\"comment even thread-even depth-1\">\n\t\t\t\t\t\t\t\t<article className=\"comment-body\">\n\t\t\t\t\t\t\t\t\t<footer className=\"comment-meta\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"comment-author vcard\">\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\talt=\"Commenter Avatar\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={ avatarURL }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"avatar avatar-32 photo\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: Comment author link. */\n\t\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'%s <span>says:</span>'\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'<cite><a>%s</a></cite>',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'A WordPress Commenter'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tspan: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"says\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/anchor-has-content */\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"#top\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"url\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/* eslint-enable jsx-a11y/anchor-has-content */\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\tcite: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<cite className=\"fn\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t<div className=\"comment-metadata\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#top\">\n\t\t\t\t\t\t\t\t\t\t\t\t<time dateTime=\"2000-01-01T12:00:00+00:00\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'January 1, 2000 at 12:00 am'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t\t\t</a>{ ' ' }\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"edit-link\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"comment-edit-link\"\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"#top\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</footer>\n\n\t\t\t\t\t\t\t\t\t<div className=\"comment-content\">\n\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Hi, this is a comment.' ) }\n\t\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Commenter avatars come from <a>Gravatar</a>'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ta: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/anchor-has-content */\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https://gravatar.com/\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t<div className=\"reply\">\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"comment-reply-link\"\n\t\t\t\t\t\t\t\t\t\t\thref=\"#top\"\n\t\t\t\t\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Comment reply button text. %s: Comment author name. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Reply to %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'A WordPress Commenter' )\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\t\t{ __( 'Reply' ) }\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</article>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ol>\n\n\t\t\t\t\t\t<div className=\"navigation\">\n\t\t\t\t\t\t\t<div className=\"alignleft\">\n\t\t\t\t\t\t\t\t<a href=\"#top\">« { __( 'Older Comments' ) }</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"alignright\">\n\t\t\t\t\t\t\t\t<a href=\"#top\">{ __( 'Newer Comments' ) } »</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<CommentsForm />\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}