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

package/src/post-comments-form/form.js

@@ -6,13 +6,20 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { __experimentalGetElementClassName } from '@wordpress/block-editor';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import {
+	Warning,
+	store as blockEditorStore,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
-const CommentsForm = () => {
+const CommentsFormPlaceholder = () => {
 	const disabledFormRef = useDisabled();
-	const instanceId = useInstanceId( CommentsForm );
+	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
@@ -34,7 +41,6 @@ const CommentsForm = () => {
 						name="submit"
 						type="submit"
 						className={ classnames(
-							'submit',
 							'wp-block-button__link',
 							__experimentalGetElementClassName( 'button' )
 						) }
@@ -47,4 +53,73 @@ const CommentsForm = () => {
 	);
 };
 
+const CommentsForm = ( { postId, postType } ) => {
+	const [ commentStatus, setCommentStatus ] = useEntityProp(
+		'postType',
+		postType,
+		'comment_status',
+		postId
+	);
+
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			const actions = [
+				<Button
+					key="enableComments"
+					onClick={ () => setCommentStatus( 'open' ) }
+					variant="primary"
+				>
+					{ _x(
+						'Enable comments',
+						'action that affects the current post'
+					) }
+				</Button>,
+			];
+			return (
+				<Warning actions={ actions }>
+					{ __(
+						'Post Comments Form block: Comments are not enabled for this item.'
+					) }
+				</Warning>
+			);
+		} else if ( ! postTypeSupportsComments ) {
+			return (
+				<Warning>
+					{ sprintf(
+						/* translators: 1: Post type (i.e. "post", "page") */
+						__(
+							'Post Comments Form block: Comments are not enabled for this post type (%s).'
+						),
+						postType
+					) }
+				</Warning>
+			);
+		} else if ( 'open' !== defaultCommentStatus ) {
+			return (
+				<Warning>
+					{ __(
+						'Post Comments Form block: Comments are not enabled.'
+					) }
+				</Warning>
+			);
+		}
+	}
+
+	return <CommentsFormPlaceholder />;
+};
+
 export default CommentsForm;

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-comments-form/style.scss

@@ -21,7 +21,6 @@
 
 	// Styles copied from button block styles.
 	input[type="submit"] {
-		border: none;
 		box-shadow: none;
 		cursor: pointer;
 		display: inline-block;

package/src/post-comments-link/block.json

@@ -26,10 +26,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/post-content/edit.js

@@ -7,7 +7,8 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
@@ -118,15 +119,14 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( contextPostId );
+	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (

package/src/post-date/block.json

@@ -16,6 +16,10 @@
 		"isLink": {
 			"type": "boolean",
 			"default": false
+		},
+		"displayType": {
+			"type": "string",
+			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
@@ -30,6 +34,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -37,6 +45,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true

package/src/post-date/edit.js

@@ -33,7 +33,7 @@ import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
 export default function PostDateEdit( {
-	attributes: { textAlign, format, isLink },
+	attributes: { textAlign, format, isLink, displayType },
 	context: { postId, postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
@@ -58,9 +58,10 @@ export default function PostDateEdit( {
 	const [ date, setDate ] = useEntityProp(
 		'postType',
 		postTypeSlug,
-		'date',
+		displayType,
 		postId
 	);
+
 	const postType = useSelect(
 		( select ) =>
 			postTypeSlug
@@ -155,6 +156,15 @@ export default function PostDateEdit( {
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
+					<ToggleControl
+						label={ __( 'Display last modified date' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								displayType: value ? 'modified' : 'date',
+							} )
+						}
+						checked={ displayType === 'modified' }
+					/>
 				</PanelBody>
 			</InspectorControls>
 

package/src/post-date/index.php

@@ -21,7 +21,15 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID            = $block->context['postId'];
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$formatted_date     = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+
+	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+	} else {
+		$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	}
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}
@@ -29,7 +37,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	return sprintf(
 		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
 		$wrapper_attributes,
-		esc_attr( get_the_date( 'c', $post_ID ) ),
+		$unformatted_date,
 		$formatted_date
 	);
 }

package/src/post-date/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-date {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/post-featured-image/block.json

@@ -23,6 +23,15 @@
 		},
 		"sizeSlug": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string",
+			"attribute": "rel",
+			"default": ""
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
@@ -33,6 +42,18 @@
 			"text": false,
 			"background": false
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-featured-image/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,6 +14,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Button,
+	TextControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -17,6 +23,7 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -29,17 +36,6 @@ import DimensionControls from './dimension-controls';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration={ true }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
 		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
@@ -53,7 +49,8 @@ function PostFeaturedImageDisplay( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug } = attributes;
+	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
+		attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -93,6 +90,22 @@ function PostFeaturedImageDisplay( {
 	const blockProps = useBlockProps( {
 		style: { width, height },
 	} );
+	const borderProps = useBorderProps( attributes );
+
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className={ classnames(
+					'block-editor-media-placeholder',
+					borderProps.className
+				) }
+				withIllustration={ true }
+				style={ borderProps.style }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
 
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
@@ -128,6 +141,26 @@ function PostFeaturedImageDisplay( {
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
+					{ isLink && (
+						<>
+							<ToggleControl
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+							<TextControl
+								label={ __( 'Link rel' ) }
+								value={ rel }
+								onChange={ ( newRel ) =>
+									setAttributes( { rel: newRel } )
+								}
+							/>
+						</>
+					) }
 				</PanelBody>
 			</InspectorControls>
 		</>
@@ -143,6 +176,11 @@ function PostFeaturedImageDisplay( {
 	}
 
 	const label = __( 'Add a featured image' );
+	const imageStyles = {
+		...borderProps.style,
+		height,
+		objectFit: height && scale,
+	};
 
 	if ( ! featuredImage ) {
 		image = (
@@ -174,6 +212,7 @@ function PostFeaturedImageDisplay( {
 			placeholder()
 		) : (
 			<img
+				className={ borderProps.className }
 				src={ mediaUrl }
 				alt={
 					media.alt_text
@@ -184,7 +223,7 @@ function PostFeaturedImageDisplay( {
 						  )
 						: __( 'Featured image' )
 				}
-				style={ { height, objectFit: height && scale } }
+				style={ imageStyles }
 			/>
 		);
 	}
@@ -215,8 +254,21 @@ function PostFeaturedImageDisplay( {
 
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( props.attributes );
+
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholder() }</div>;
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					className={ classnames(
+						'block-editor-media-placeholder',
+						borderProps.className
+					) }
+					withIllustration={ true }
+					style={ borderProps.style }
+				/>
+			</div>
+		);
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }

package/src/post-featured-image/editor.scss

@@ -1,19 +1,11 @@
-// Give the featured image placeholder the appearance of a literal image placeholder.
-// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity
-// to create a new component for placeholders meant to inherit some theme styles.
+// Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-post-featured-image.wp-block-post-featured-image {
-	// Inherit border radius from style variations.
-	.components-placeholder,
-	.components-resizable-box__container {
-		border-radius: inherit;
-	}
-
 	// Style the placeholder.
 	.wp-block-post-featured-image__placeholder,
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;
-		box-shadow: none;
 		padding: 0;
 
 		// Hide the upload button, as it's also available in the media library.
@@ -21,32 +13,8 @@
 			display: none;
 		}
 
-		// Position the spinner.
-		.components-placeholder__preview {
-			position: absolute;
-			top: $grid-unit-05;
-			right: $grid-unit-05;
-			bottom: $grid-unit-05;
-			left: $grid-unit-05;
-			background: rgba($white, 0.8);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		// Draw the dashed outline.
-		// By setting the dashed border to currentColor, we ensure it's visible
-		// against any background color.
-		color: currentColor;
-		background: transparent;
-
 		// Style the upload button.
-		.components-placeholder__fieldset {
-			width: auto;
-		}
-
 		.components-button.components-button {
-			color: inherit;
 			padding: 0;
 			display: flex;
 			justify-content: center;
@@ -55,20 +23,53 @@
 			height: $grid-unit-60;
 			border-radius: 50%;
 			position: relative;
-			visibility: hidden;
-
-			// Animation.
-			background: transparent;
-			transition: all 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		.components-button.components-button > svg {
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
 			color: $white;
+
+			> svg {
+				color: inherit;
+			}
 		}
 
 		// Show default placeholder height when not resized.
 		min-height: 200px;
+
+		// The following override the default placeholder styles that remove
+		// its border so that a user selection for border color or width displays
+		// a visual border.
+		&:where(.has-border-color) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-color"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-color"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-color"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-color"]) {
+			border-left-style: solid;
+		}
+
+		&:where([style*="border-width"]) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-width"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-width"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-width"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-width"]) {
+			border-left-style: solid;
+		}
 	}
 
 	// Provide a minimum size for the placeholder when resized.
@@ -80,16 +81,6 @@
 		height: 100%;
 		width: 100%;
 	}
-
-	// Show upload button on block selection.
-	&.is-selected .components-button.components-button {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		border-style: solid;
-		color: $white;
-		opacity: 1;
-		visibility: visible;
-	}
 }
 
 div[data-type="core/post-featured-image"] {

package/src/post-featured-image/index.php

@@ -19,17 +19,24 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$attr           = $is_link ? array( 'alt' => $post_title ) : array();
+	$is_link    = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug  = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$attr       = get_block_core_post_featured_image_border_attributes( $attributes );
+
+	if ( $is_link ) {
+		$attr['alt'] = $post_title;
+	}
+
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
 	}
 	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( $is_link ) {
-		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
+		$link_target    = $attributes['linkTarget'];
+		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$featured_image = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $link_target ), $rel, $featured_image );
 	}
 
 	$has_width  = ! empty( $attributes['width'] );
@@ -53,6 +60,58 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	return "<figure $wrapper_attributes>$featured_image</figure>";
 }
 
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Post Featured Image block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_post_featured_image_border_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$styles     = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
 /**
  * Registers the `core/post-featured-image` block on the server.
  */

package/src/post-featured-image/style.scss

@@ -9,6 +9,7 @@
 		width: 100%;
 		height: auto;
 		vertical-align: bottom;
+		box-sizing: border-box;
 	}
 
 	&.alignwide img,