@wordpress/block-library 7.15.0 → 7.16.0

package/src/post-author/edit.js

@@ -46,9 +46,10 @@ function PostAuthorEdit( {
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const { textAlign, showAvatar, showBio, byline } = attributes;
-
+	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
+		attributes;
 	const avatarSizes = [];
+	const authorName = authorDetails?.name || __( 'Post Author' );
 	if ( authorDetails ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
@@ -118,6 +119,22 @@ function PostAuthorEdit( {
 							setAttributes( { showBio: ! showBio } )
 						}
 					/>
+					<ToggleControl
+						label={ __( 'Link author name to author page' ) }
+						checked={ isLink }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 
@@ -158,7 +175,16 @@ function PostAuthorEdit( {
 						/>
 					) }
 					<p className="wp-block-post-author__name">
-						{ authorDetails?.name || __( 'Post Author' ) }
+						{ isLink ? (
+							<a
+								href="#post-author-pseudo-link"
+								onClick={ ( event ) => event.preventDefault() }
+							>
+								{ authorName }
+							</a>
+						) : (
+							authorName
+						) }
 					</p>
 					{ showBio && (
 						<p

package/src/post-author/index.php

@@ -29,6 +29,12 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 		$attributes['avatarSize']
 	) : null;
 
+	$link        = get_author_posts_url( $author_id );
+	$author_name = get_the_author_meta( 'display_name', $author_id );
+	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
+		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+	}
+
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
 	$classes = array_merge(
 		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
@@ -41,7 +47,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
 	'<div class="wp-block-post-author__content">' .
 	( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . wp_kses_post( $byline ) . '</p>' : '' ) .
-	'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name', $author_id ) . '</p>' .
+	'<p class="wp-block-post-author__name">' . $author_name . '</p>' .
 	( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
 	'</div>' .
 	'</div>';

package/src/post-content/edit.js

@@ -46,7 +46,9 @@ function EditableContent( { layout, context = {} } ) {
 		return getSettings()?.supportsLayout;
 	}, [] );
 	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,

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

@@ -62,7 +62,7 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,

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

@@ -6,87 +6,94 @@
 		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
 	}
 
-	&.wp-block-post-featured-image {
-		// Style the placeholder.
-		.wp-block-post-featured-image__placeholder,
-		.components-placeholder {
-			justify-content: center;
-			align-items: center;
-			padding: 0;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		padding: 0;
 
-			// Hide the upload button, as it's also available in the media library.
-			.components-form-file-upload {
-				display: none;
-			}
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
 
-			// Style the upload button.
-			.components-button.components-button {
-				padding: 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: $grid-unit-60;
-				height: $grid-unit-60;
-				border-radius: 50%;
-				position: relative;
-				background: var(--wp-admin-theme-color);
-				border-color: var(--wp-admin-theme-color);
-				border-style: solid;
-				color: $white;
+		// Style the upload button.
+		.components-button {
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
+			color: $white;
 
-				> svg {
-					color: inherit;
-				}
+			> 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;
-			}
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
 
-			&: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;
-			}
+	// 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. They also override the `img { border: none; }` applied
+	// by core.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder,
+	img {
+		// The following is required to overcome WP Core applying styles that clear
+		// img borders with a higher specificity than those added by the border
+		// block support to provide a default border-style of solid when a border
+		// color or width has been set.
+		&: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;
 		}
 
-		// Provide a minimum size for the placeholder when resized.
-		// Note, this should be as small as we can afford it, and exists only
-		// to ensure there's room for the upload button.
-		&[style*="height"] .components-placeholder {
-			min-height: $grid-unit-60;
-			min-width: $grid-unit-60;
-			height: 100%;
-			width: 100%;
+		&: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.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 	}
 }
 

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

@@ -76,16 +76,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
 	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
 	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
-	$class_names         = array(
-		'wp-block-post-featured-image__overlay',
-	);
-	$styles_properties   = array();
+	$class_names         = array( 'wp-block-post-featured-image__overlay' );
+	$styles              = array();
 
 	if ( ! $has_dim_background ) {
 		return '';
 	}
 
-	// Generate required classes for the element.
+	// Apply border classes and styles.
+	$border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
+
+	if ( ! empty( $border_attributes['class'] ) ) {
+		$class_names[] = $border_attributes['class'];
+	}
+
+	if ( ! empty( $border_attributes['style'] ) ) {
+		$styles[] = $border_attributes['style'];
+	}
+
+	// Apply overlay and gradient classes.
 	if ( $has_dim_background ) {
 		$class_names[] = 'has-background-dim';
 		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
@@ -103,35 +112,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
 	}
 
-	// Generate required CSS properties and their values.
-	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
-		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
-	}
-
-	if ( ! empty( $attributes['style']['border']['width'] ) ) {
-		$styles_properties['border-width'] = $attributes['style']['border']['width'];
-	}
-
+	// Apply background styles.
 	if ( $has_custom_gradient ) {
-		$styles_properties['background-image'] = $attributes['customGradient'];
+		$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
 	}
 
 	if ( $has_custom_overlay ) {
-		$styles_properties['background-color'] = $attributes['customOverlayColor'];
-	}
-
-	$styles = '';
-
-	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
-		$styles .= "{$style_attribute}: $style_attribute_value; ";
+		$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
 	}
 
 	return sprintf(
 		'<span class="%s" style="%s" aria-hidden="true"></span>',
 		esc_attr( implode( ' ', $class_names ) ),
-		esc_attr( trim( $styles ) )
+		esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
 	);
-
 }
 
 /**

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

@@ -47,20 +47,23 @@ const Overlay = ( {
 
 	return (
 		<>
-			<span
-				aria-hidden="true"
-				className={ classnames(
-					'wp-block-post-featured-image__overlay',
-					dimRatioToClass( dimRatio ),
-					{
-						[ overlayColor.class ]: overlayColor.class,
-						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ overlayStyles }
-			/>
+			{ !! dimRatio && (
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-post-featured-image__overlay',
+						dimRatioToClass( dimRatio ),
+						{
+							[ overlayColor.class ]: overlayColor.class,
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						},
+						borderProps.className
+					) }
+					style={ overlayStyles }
+				/>
+			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins

package/src/post-terms/block.json

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

package/src/post-terms/style.scss

@@ -1,3 +1,8 @@
-.wp-block-post-terms__separator {
-	white-space: pre-wrap;
+.wp-block-post-terms {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	.wp-block-post-terms__separator {
+		white-space: pre-wrap;
+	}
 }

package/src/query/edit/inspector-controls/author-control.js

@@ -71,6 +71,7 @@ function AuthorControl( { value, onChange } ) {
 			value={ sanitizedValue }
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }

package/src/query/edit/inspector-controls/index.js

@@ -237,10 +237,7 @@ export default function QueryInspectorControls( {
 							</ToolsPanelItem>
 						) }
 						{ isPostTypeHierarchical &&
-							! isControlAllowed(
-								allowedControls,
-								'parents'
-							) && (
+							isControlAllowed( allowedControls, 'parents' ) && (
 								<ToolsPanelItem
 									hasValue={ () => !! parents?.length }
 									label={ __( 'Parents' ) }

package/src/query/edit/inspector-controls/parent-control.js

@@ -125,6 +125,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
+			__experimentalShowHowTo={ false }
 		/>
 	);
 }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -116,6 +116,7 @@ export function TaxonomyControls( { onChange, query } ) {
 								value={ getExistingTaxQueryValue( slug ) }
 								suggestions={ terms.names }
 								onChange={ onTermsChange( slug ) }
+								__experimentalShowHowTo={ false }
 							/>
 						</div>
 					);

package/src/query/utils.js

@@ -162,7 +162,7 @@ export function useAllowedControls( attributes ) {
 			select( blocksStore ).getActiveBlockVariation(
 				queryLoopName,
 				attributes
-			)?.allowControls,
+			)?.allowedControls,
 
 		[ attributes ]
 	);

package/src/quote/block.json

@@ -29,7 +29,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSlashInserter": true,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/site-title/block.json

@@ -60,5 +60,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-site-title-editor"
+	"editorStyle": "wp-block-site-title-editor",
+	"style": "wp-block-site-title"
 }

package/src/site-title/editor.scss

@@ -2,3 +2,9 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
+
+.editor-styles-wrapper .wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/site-title/style.scss

@@ -0,0 +1,5 @@
+.wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/style.scss

@@ -44,6 +44,7 @@
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
+@import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";

package/src/tag-cloud/index.php

@@ -28,14 +28,7 @@ function render_block_core_tag_cloud( $attributes ) {
 	$tag_cloud = wp_tag_cloud( $args );
 
 	if ( ! $tag_cloud ) {
-		$labels    = get_taxonomy_labels( get_taxonomy( $attributes['taxonomy'] ) );
-		$tag_cloud = esc_html(
-			sprintf(
-				/* translators: %s: taxonomy name */
-				__( 'Your site doesn’t have any %s, so there’s nothing to display here at the moment.' ),
-				strtolower( $labels->name )
-			)
-		);
+		$tag_cloud = __( 'There’s no content to show here yet.' );
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();

package/src/template-part/index.js

@@ -62,13 +62,13 @@ export const init = () => {
 		'blockEditor.__unstableCanInsertBlockType',
 		'removeTemplatePartsFromPostTemplates',
 		(
-			can,
+			canInsert,
 			blockType,
 			rootClientId,
 			{ getBlock, getBlockParentsByBlockName }
 		) => {
 			if ( blockType.name !== 'core/template-part' ) {
-				return can;
+				return canInsert;
 			}
 
 			for ( const disallowedParentType of DISALLOWED_PARENTS ) {

package/src/video/edit.js

@@ -13,6 +13,7 @@ import {
 	Disabled,
 	PanelBody,
 	Spinner,
+	Placeholder,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -43,6 +44,23 @@ import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 
+// Much of this description is duplicated from MediaPlaceholder.
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+			icon={ icon }
+			label={ __( 'Video' ) }
+			instructions={ __(
+				'Upload a video file, pick one from your media library, or add one with a URL.'
+			) }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
+
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -146,6 +164,7 @@ function VideoEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
 					onError={ onUploadError }
+					placeholder={ placeholder }
 				/>
 			</div>
 		);

package/src/video/editor.scss

@@ -1,3 +1,40 @@
+// Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
+.wp-block-video.wp-block-video {
+	// Show Placeholder style on-select.
+	&.is-selected .components-placeholder {
+		// Block UI appearance.
+		color: $gray-900;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border: none;
+
+		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		border-radius: $radius-block-ui;
+
+		> svg {
+			opacity: 0;
+		}
+
+		.components-placeholder__illustration {
+			display: none;
+		}
+
+		&::before {
+			opacity: 0;
+		}
+	}
+
+	// Remove the transition while we still have a legacy placeholder style.
+	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
+	// parent border that may get applied when you deselect.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		transition: none;
+	}
+}
+
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }

package/build/navigation-submenu/view.js

@@ -1,56 +0,0 @@
-"use strict";
-
-const closeSubmenus = element => {
-  element.querySelectorAll('[aria-expanded="true"]').forEach(toggle => {
-    toggle.setAttribute('aria-expanded', 'false');
-  });
-};
-
-const toggleSubmenuOnClick = event => {
-  const buttonToggle = event.target.closest('[aria-expanded]');
-  const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded');
-
-  if (isSubmenuOpen === 'true') {
-    closeSubmenus(buttonToggle.closest('.wp-block-navigation-submenu'));
-  } else {
-    // Close all sibling submenus.
-    const parentElement = buttonToggle.closest('.wp-block-navigation-submenu');
-    const parentList = buttonToggle.closest('.wp-block-navigation__submenu-container') || buttonToggle.closest('.wp-block-navigation__container');
-    Array.from(parentList.children).forEach(child => {
-      if (child !== parentElement) {
-        closeSubmenus(child);
-      }
-    }); // Open submenu.
-
-    buttonToggle.setAttribute('aria-expanded', 'true');
-  }
-};
-
-const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
-submenuButtons.forEach(button => {
-  button.addEventListener('click', toggleSubmenuOnClick);
-}); // Close on click outside.
-
-document.addEventListener('click', function (event) {
-  const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
-  navigationBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    }
-  });
-}); // Close on focus outside or escape key.
-
-document.addEventListener('keyup', function (event) {
-  const submenuBlocks = document.querySelectorAll('.wp-block-navigation-submenu');
-  submenuBlocks.forEach(block => {
-    if (!block.contains(event.target)) {
-      closeSubmenus(block);
-    } else if (event.key === 'Escape') {
-      const toggle = block.querySelector('[aria-expanded="true"]');
-      closeSubmenus(block); // Focus the submenu trigger so focus does not get trapped in the closed submenu.
-
-      toggle === null || toggle === void 0 ? void 0 : toggle.focus();
-    }
-  });
-});
-//# sourceMappingURL=view.js.map