@wordpress/block-library 7.3.9 → 7.3.12

package/src/image/image.js

@@ -43,7 +43,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
-import { isExternalImage, isMediaDestroyed } from './edit';
+import { isExternalImage } from './edit';
 
 /**
  * Module constants
@@ -72,14 +72,12 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
-	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
-	onImageLoadError,
 } ) {
 	const imageRef = useRef();
 	const captionRef = useRef();
@@ -218,16 +216,11 @@ export default function Image( {
 	}
 
 	function onImageError() {
-		// Check if there's an embed block that handles this URL, e.g., instagram URL.
-		// See: https://github.com/WordPress/gutenberg/pull/11472
+		// Check if there's an embed block that handles this URL.
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		const shouldReplace = undefined !== embedBlock;
-
-		if ( shouldReplace ) {
+		if ( undefined !== embedBlock ) {
 			onReplace( embedBlock );
 		}
-
-		onImageLoadError( shouldReplace );
 	}
 
 	function onSetHref( props ) {
@@ -299,9 +292,6 @@ export default function Image( {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
 		}
-		if ( isSelected && isMediaDestroyed( id ) ) {
-			onImageLoadError();
-		}
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
@@ -365,7 +355,6 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
-						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }

package/src/latest-posts/edit.js

@@ -28,9 +28,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { pin, list, grid } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticeStore } from '@wordpress/notices';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,6 +68,7 @@ function getFeaturedImageDetails( post, size ) {
 }
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId( LatestPostsEdit );
 	const {
 		postsToShow,
 		order,
@@ -148,6 +151,20 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		]
 	);
 
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
+
 	const imageSizeOptions = imageSizes
 		.filter( ( { slug } ) => slug !== 'full' )
 		.map( ( { name, slug } ) => ( {
@@ -466,7 +483,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.join( ' ' ) }
 							{ /* translators: excerpt truncation character, default …  */ }
 							{ __( ' … ' ) }
-							<a href={ post.link } rel="noopener noreferrer">
+							<a
+								href={ post.link }
+								rel="noopener noreferrer"
+								onClick={ showRedirectionPreventedNotice }
+							>
 								{ __( 'Read more' ) }
 							</a>
 						</>
@@ -483,6 +504,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
+											onClick={
+												showRedirectionPreventedNotice
+											}
 										>
 											{ featuredImage }
 										</a>
@@ -501,6 +525,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 										  }
 										: undefined
 								}
+								onClick={ showRedirectionPreventedNotice }
 							>
 								{ ! titleTrimmed ? __( '(no title)' ) : null }
 							</a>

package/src/media-text/edit.js

@@ -46,7 +46,6 @@ const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			fontSize: 'large',
 			placeholder: _x( 'Content…', 'content placeholder' ),
 		},
 	],

package/src/navigation/edit/index.js

@@ -549,6 +549,144 @@ function Navigation( {
 		} );
 	}, [ clientId, ref ] );
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
+	const stylingInspectorControls = (
+		<InspectorControls>
+			{ hasSubmenuIndicatorSetting && (
+				<PanelBody title={ __( 'Display' ) }>
+					{ isResponsive && (
+						<Button
+							className={ overlayMenuPreviewClasses }
+							onClick={ () => {
+								setOverlayMenuPreview( ! overlayMenuPreview );
+							} }
+						>
+							{ hasIcon && <OverlayMenuIcon /> }
+							{ ! hasIcon && <span>{ __( 'Menu' ) }</span> }
+						</Button>
+					) }
+					{ overlayMenuPreview && (
+						<ToggleControl
+							label={ __( 'Show icon button' ) }
+							help={ __(
+								'Configure the visual appearance of the button opening the overlay menu.'
+							) }
+							onChange={ ( value ) =>
+								setAttributes( { hasIcon: value } )
+							}
+							checked={ hasIcon }
+						/>
+					) }
+					<h3>{ __( 'Overlay Menu' ) }</h3>
+					<ToggleGroupControl
+						label={ __( 'Configure overlay menu' ) }
+						value={ overlayMenu }
+						help={ __(
+							'Collapses the navigation options in a menu icon opening an overlay.'
+						) }
+						onChange={ ( value ) =>
+							setAttributes( { overlayMenu: value } )
+						}
+						isBlock
+						hideLabelFromVision
+					>
+						<ToggleGroupControlOption
+							value="never"
+							label={ __( 'Off' ) }
+						/>
+						<ToggleGroupControlOption
+							value="mobile"
+							label={ __( 'Mobile' ) }
+						/>
+						<ToggleGroupControlOption
+							value="always"
+							label={ __( 'Always' ) }
+						/>
+					</ToggleGroupControl>
+					{ hasSubmenus && (
+						<>
+							<h3>{ __( 'Submenus' ) }</h3>
+							<ToggleControl
+								checked={ openSubmenusOnClick }
+								onChange={ ( value ) => {
+									setAttributes( {
+										openSubmenusOnClick: value,
+										...( value && {
+											showSubmenuIcon: true,
+										} ), // Make sure arrows are shown when we toggle this on.
+									} );
+								} }
+								label={ __( 'Open on click' ) }
+							/>
+
+							<ToggleControl
+								checked={ showSubmenuIcon }
+								onChange={ ( value ) => {
+									setAttributes( {
+										showSubmenuIcon: value,
+									} );
+								} }
+								disabled={ attributes.openSubmenusOnClick }
+								label={ __( 'Show arrow' ) }
+							/>
+						</>
+					) }
+				</PanelBody>
+			) }
+			{ hasColorSettings && (
+				<PanelColorSettings
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					title={ __( 'Color' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text' ),
+						},
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background' ),
+						},
+						{
+							value: overlayTextColor.color,
+							onChange: setOverlayTextColor,
+							label: __( 'Submenu & overlay text' ),
+						},
+						{
+							value: overlayBackgroundColor.color,
+							onChange: setOverlayBackgroundColor,
+							label: __( 'Submenu & overlay background' ),
+						},
+					] }
+				>
+					{ enableContrastChecking && (
+						<>
+							<ContrastChecker
+								backgroundColor={ detectedBackgroundColor }
+								textColor={ detectedColor }
+							/>
+							<ContrastChecker
+								backgroundColor={
+									detectedOverlayBackgroundColor
+								}
+								textColor={ detectedOverlayColor }
+							/>
+						</>
+					) }
+				</PanelColorSettings>
+			) }
+		</InspectorControls>
+	);
+
 	// If the block has inner blocks, but no menu id, then these blocks are either:
 	// - inserted via a pattern.
 	// - inserted directly via Code View (or otherwise).
@@ -559,6 +697,7 @@ function Navigation( {
 	if ( hasUnsavedBlocks ) {
 		return (
 			<TagName { ...blockProps }>
+				{ stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
@@ -624,13 +763,6 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
-	const isResponsive = 'never' !== overlayMenu;
-
-	const overlayMenuPreviewClasses = classnames(
-		'wp-block-navigation__overlay-menu-preview',
-		{ open: overlayMenuPreview }
-	);
-
 	if ( isPlaceholder ) {
 		return (
 			<TagName { ...blockProps }>
@@ -668,142 +800,7 @@ function Navigation( {
 						</ToolbarGroup>
 					) }
 				</BlockControls>
-				<InspectorControls>
-					{ hasSubmenuIndicatorSetting && (
-						<PanelBody title={ __( 'Display' ) }>
-							{ isResponsive && (
-								<Button
-									className={ overlayMenuPreviewClasses }
-									onClick={ () => {
-										setOverlayMenuPreview(
-											! overlayMenuPreview
-										);
-									} }
-								>
-									{ hasIcon && <OverlayMenuIcon /> }
-									{ ! hasIcon && (
-										<span>{ __( 'Menu' ) }</span>
-									) }
-								</Button>
-							) }
-							{ overlayMenuPreview && (
-								<ToggleControl
-									label={ __( 'Show icon button' ) }
-									help={ __(
-										'Configure the visual appearance of the button opening the overlay menu.'
-									) }
-									onChange={ ( value ) =>
-										setAttributes( { hasIcon: value } )
-									}
-									checked={ hasIcon }
-								/>
-							) }
-							<h3>{ __( 'Overlay Menu' ) }</h3>
-							<ToggleGroupControl
-								label={ __( 'Configure overlay menu' ) }
-								value={ overlayMenu }
-								help={ __(
-									'Collapses the navigation options in a menu icon opening an overlay.'
-								) }
-								onChange={ ( value ) =>
-									setAttributes( { overlayMenu: value } )
-								}
-								isBlock
-								hideLabelFromVision
-							>
-								<ToggleGroupControlOption
-									value="never"
-									label={ __( 'Off' ) }
-								/>
-								<ToggleGroupControlOption
-									value="mobile"
-									label={ __( 'Mobile' ) }
-								/>
-								<ToggleGroupControlOption
-									value="always"
-									label={ __( 'Always' ) }
-								/>
-							</ToggleGroupControl>
-							{ hasSubmenus && (
-								<>
-									<h3>{ __( 'Submenus' ) }</h3>
-									<ToggleControl
-										checked={ openSubmenusOnClick }
-										onChange={ ( value ) => {
-											setAttributes( {
-												openSubmenusOnClick: value,
-												...( value && {
-													showSubmenuIcon: true,
-												} ), // Make sure arrows are shown when we toggle this on.
-											} );
-										} }
-										label={ __( 'Open on click' ) }
-									/>
-
-									<ToggleControl
-										checked={ showSubmenuIcon }
-										onChange={ ( value ) => {
-											setAttributes( {
-												showSubmenuIcon: value,
-											} );
-										} }
-										disabled={
-											attributes.openSubmenusOnClick
-										}
-										label={ __( 'Show arrow' ) }
-									/>
-								</>
-							) }
-						</PanelBody>
-					) }
-					{ hasColorSettings && (
-						<PanelColorSettings
-							__experimentalHasMultipleOrigins
-							__experimentalIsRenderedInSidebar
-							title={ __( 'Color' ) }
-							initialOpen={ false }
-							colorSettings={ [
-								{
-									value: textColor.color,
-									onChange: setTextColor,
-									label: __( 'Text' ),
-								},
-								{
-									value: backgroundColor.color,
-									onChange: setBackgroundColor,
-									label: __( 'Background' ),
-								},
-								{
-									value: overlayTextColor.color,
-									onChange: setOverlayTextColor,
-									label: __( 'Submenu & overlay text' ),
-								},
-								{
-									value: overlayBackgroundColor.color,
-									onChange: setOverlayBackgroundColor,
-									label: __( 'Submenu & overlay background' ),
-								},
-							] }
-						>
-							{ enableContrastChecking && (
-								<>
-									<ContrastChecker
-										backgroundColor={
-											detectedBackgroundColor
-										}
-										textColor={ detectedColor }
-									/>
-									<ContrastChecker
-										backgroundColor={
-											detectedOverlayBackgroundColor
-										}
-										textColor={ detectedOverlayColor }
-									/>
-								</>
-							) }
-						</PanelColorSettings>
-					) }
-				</InspectorControls>
+				{ stylingInspectorControls }
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&

package/src/navigation/style.scss

@@ -299,6 +299,9 @@ button.wp-block-navigation-item__content {
 	font-size: inherit;
 	font-family: inherit;
 	line-height: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	text-transform: inherit;
 
 	// Buttons default to center alignment. This becomes visible
 	// when a menu item label is long enough to wrap.

package/src/post-comments/edit.js

@@ -16,11 +16,14 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+
 import { createInterpolateElement } from '@wordpress/element';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -54,7 +57,7 @@ export default function PostCommentsEdit( {
 	let warning = __(
 		'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 Query Loop" block.'
 	);
-	let showPlacholder = true;
+	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
 		if ( 'closed' === commentStatus ) {
@@ -65,7 +68,7 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( ! postTypeSupportsComments ) {
 			warning = sprintf(
 				/* translators: 1: Post type (i.e. "post", "page") */
@@ -74,10 +77,10 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( 'open' !== defaultCommentStatus ) {
 			warning = __( 'Post Comments block: Comments are not enabled.' );
-			showPlacholder = false;
+			showPlaceholder = false;
 		}
 	}
 
@@ -89,8 +92,6 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
-	const textareaId = useInstanceId( PostCommentsEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -105,7 +106,7 @@ export default function PostCommentsEdit( {
 			<div { ...blockProps }>
 				<Warning>{ warning }</Warning>
 
-				{ showPlacholder && (
+				{ showPlaceholder && (
 					<div
 						className="wp-block-post-comments__placeholder"
 						ref={ disabledRef }
@@ -238,37 +239,7 @@ export default function PostCommentsEdit( {
 							</div>
 						</div>
 
-						<div className="comment-respond">
-							<h3 className="comment-reply-title">
-								{ __( 'Leave a Reply' ) }
-							</h3>
-
-							<form className="comment-form" noValidate>
-								<p className="comment-form-comment">
-									<label
-										htmlFor={ `comment-${ textareaId }` }
-									>
-										{ __( 'Comment' ) }{ ' ' }
-										<span className="required">*</span>
-									</label>
-									<textarea
-										id={ `comment-${ textareaId }` }
-										name="comment"
-										cols="45"
-										rows="8"
-										required
-									/>
-								</p>
-								<p className="form-submit wp-block-button">
-									<input
-										name="submit"
-										type="submit"
-										className="submit wp-block-button__link"
-										value={ __( 'Post Comment' ) }
-									/>
-								</p>
-							</form>
-						</div>
+						<CommentsForm />
 					</div>
 				) }
 			</div>

package/src/post-comments/style.scss

@@ -1,4 +1,22 @@
 .wp-block-post-comments {
+	/* utility classes */
+	.alignleft {
+		float: left;
+	}
+
+	.alignright {
+		float: right;
+	}
+	/* end utility classes */
+
+	.navigation {
+		&::after {
+			content: "";
+			display: table;
+			clear: both;
+		}
+	}
+
 	.commentlist {
 		clear: both;
 		list-style: none;