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

package/src/columns/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -183,7 +183,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 
 				innerBlocks = [
 					...getMappedColumnWidths( innerBlocks, widths ),
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							width: `${ newColumnWidth }%`,
 						} );
@@ -192,7 +194,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 			} else if ( isAddingColumn ) {
 				innerBlocks = [
 					...innerBlocks,
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column' );
 					} ),
 				];

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { times, map, compact, delay } from 'lodash';
+import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -374,7 +374,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 
 				innerBlocks = [
 					...getMappedColumnWidths( innerBlocks, widths ),
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							width: `${ newColumnWidth }%`,
 							verticalAlignment,
@@ -384,7 +386,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 			} else if ( isAddingColumn ) {
 				innerBlocks = [
 					...innerBlocks,
-					...times( newColumns - previousColumns, () => {
+					...Array.from( {
+						length: newColumns - previousColumns,
+					} ).map( () => {
 						return createBlock( 'core/column', {
 							verticalAlignment,
 						} );
@@ -474,7 +478,7 @@ const ColumnsEdit = ( props ) => {
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! compact( isContentEmpty ).length,
+				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
 				innerWidths: innerColumnsWidths,
 				hasParents: !! parents.length,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
@@ -496,7 +500,9 @@ const ColumnsEdit = ( props ) => {
 
 	useEffect( () => {
 		if ( isSelected && isDefaultColumns ) {
-			delay( () => setIsVisible( true ), 100 );
+			const revealTimeout = setTimeout( () => setIsVisible( true ), 100 );
+
+			return () => clearTimeout( revealTimeout );
 		}
 	}, [] );
 

package/src/comment-author-name/block.json

@@ -43,7 +43,11 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/comment-content/block.json

@@ -29,7 +29,11 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"spacing": {
 			"padding": [ "horizontal", "vertical" ],

package/src/comment-date/block.json

@@ -35,6 +35,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true

package/src/comment-edit-link/block.json

@@ -35,7 +35,11 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/comment-reply-link/block.json

@@ -30,7 +30,11 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"html": false
 	}

package/src/comment-template/block.json

@@ -11,7 +11,20 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true
+		"align": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"style": "wp-block-comment-template"
 }

package/src/comments/block.json

@@ -10,6 +10,10 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"legacy": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
@@ -23,7 +27,21 @@
 				"text": true,
 				"link": true
 			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
-	"editorStyle": "wp-block-comments-editor"
+	"editorStyle": "wp-block-comments-editor",
+	"usesContext": [ "postId", "postType" ]
 }

package/src/comments/edit/comments-legacy.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	Warning,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from './placeholder';
+
+export default function CommentsLegacy( {
+	attributes,
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const { textAlign } = attributes;
+
+	const actions = [
+		<Button
+			key="convert"
+			onClick={ () => void setAttributes( { legacy: false } ) }
+			variant="primary"
+		>
+			{ __( 'Switch to editable mode' ) }
+		</Button>,
+	];
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+
+			<div { ...blockProps }>
+				<Warning actions={ actions }>
+					{ __(
+						"Comments block: You're currently using this block in legacy mode. " +
+							'The following 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 switching the block to its editable mode.'
+					) }
+				</Warning>
+				<Placeholder postId={ postId } postType={ postType } />
+			</div>
+		</>
+	);
+}

package/src/comments/edit/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CommentsInspectorControls from './comments-inspector-controls';
+import CommentsLegacy from './comments-legacy';
+import TEMPLATE from './template';
+
+export default function CommentsEdit( props ) {
+	const { attributes, setAttributes } = props;
+	const { tagName: TagName, legacy } = attributes;
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
+	if ( legacy ) {
+		return <CommentsLegacy { ...props } />;
+	}
+
+	return (
+		<>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
+			<TagName { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/comments/edit/placeholder.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../../post-comments-form/form';
+
+export default function PostCommentsPlaceholder( { postType, postId } ) {
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const { avatarURL } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const disabledRef = useDisabled();
+
+	return (
+		<div
+			className="wp-block-comments__legacy-placeholder"
+			ref={ disabledRef }
+		>
+			<h3>
+				{
+					/* translators: %s: Post title. */
+					sprintf( __( 'One response to %s' ), postTitle )
+				}
+			</h3>
+
+			<div className="navigation">
+				<div className="alignleft">
+					<a href="#top">« { __( 'Older Comments' ) }</a>
+				</div>
+				<div className="alignright">
+					<a href="#top">{ __( 'Newer Comments' ) } »</a>
+				</div>
+			</div>
+
+			<ol className="commentlist">
+				<li className="comment even thread-even depth-1">
+					<article className="comment-body">
+						<footer className="comment-meta">
+							<div className="comment-author vcard">
+								<img
+									alt="Commenter Avatar"
+									src={ avatarURL }
+									className="avatar avatar-32 photo"
+									height="32"
+									width="32"
+									loading="lazy"
+								/>
+								<b className="fn">
+									<a href="#top" className="url">
+										{ __( 'A WordPress Commenter' ) }
+									</a>
+								</b>{ ' ' }
+								<span className="says">{ __( 'says' ) }:</span>
+							</div>
+
+							<div className="comment-metadata">
+								<a href="#top">
+									<time dateTime="2000-01-01T00:00:00+00:00">
+										{ __( 'January 1, 2000 at 00:00 am' ) }
+									</time>
+								</a>{ ' ' }
+								<span className="edit-link">
+									<a
+										className="comment-edit-link"
+										href="#top"
+									>
+										{ __( 'Edit' ) }
+									</a>
+								</span>
+							</div>
+						</footer>
+
+						<div className="comment-content">
+							<p>
+								{ __( 'Hi, this is a comment.' ) }
+								<br />
+								{ __(
+									'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
+								) }
+								<br />
+								{ __( 'Commenter avatars come from' ) }{ ' ' }
+								<a href="https://gravatar.com/">Gravatar</a>.
+							</p>
+						</div>
+
+						<div className="reply">
+							<a
+								className="comment-reply-link"
+								href="#top"
+								aria-label="Reply to A WordPress Commenter"
+							>
+								{ __( 'Reply' ) }
+							</a>
+						</div>
+					</article>
+				</li>
+			</ol>
+
+			<div className="navigation">
+				<div className="alignleft">
+					<a href="#top">« { __( 'Older Comments' ) }</a>
+				</div>
+				<div className="alignright">
+					<a href="#top">{ __( 'Newer Comments' ) } »</a>
+				</div>
+			</div>
+
+			<CommentsForm postId={ postId } postType={ postType } />
+		</div>
+	);
+}

package/src/comments/{edit.js → edit/template.js}

@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import CommentsInspectorControls from './edit/comments-inspector-controls';
-
 const TEMPLATE = [
 	[ 'core/comments-title' ],
 	[
@@ -88,21 +78,4 @@ const TEMPLATE = [
 	[ 'core/post-comments-form' ],
 ];
 
-export default function CommentsEdit( { attributes, setAttributes } ) {
-	const { tagName: TagName } = attributes;
-
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-	} );
-
-	return (
-		<>
-			<CommentsInspectorControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-			/>
-			<TagName { ...innerBlocksProps } />
-		</>
-	);
-}
+export default TEMPLATE;

package/src/comments/editor.scss

@@ -1,3 +1,12 @@
+@import "./style.scss";
+
 .block-library-comments-toolbar__popover .components-popover__content {
 	min-width: 230px;
 }
+
+.wp-block-comments__legacy-placeholder {
+	@extend .wp-block-post-comments;
+	* {
+		pointer-events: none;
+	}
+}