@wordpress/block-library 7.3.5 → 7.5.0

package/src/latest-posts/edit.native.js

@@ -12,7 +12,10 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockAlignmentControl,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
@@ -43,6 +46,15 @@ class LatestPostsEdit extends Component {
 		);
 		this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
 		this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
+		this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
+			this
+		);
+		this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
+			this
+		);
+		this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
+			this
+		);
 		this.onSetOrder = this.onSetOrder.bind( this );
 		this.onSetOrderBy = this.onSetOrderBy.bind( this );
 		this.onSetPostsToShow = this.onSetPostsToShow.bind( this );
@@ -95,6 +107,21 @@ class LatestPostsEdit extends Component {
 		setAttributes( { displayPostDate: value } );
 	}
 
+	onSetDisplayFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { displayFeaturedImage: value } );
+	}
+
+	onSetAddLinkToFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { addLinkToFeaturedImage: value } );
+	}
+
+	onSetFeaturedImageAlign( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { featuredImageAlign: value } );
+	}
+
 	onSetOrder( value ) {
 		const { setAttributes } = this.props;
 		setAttributes( { order: value } );
@@ -124,6 +151,9 @@ class LatestPostsEdit extends Component {
 			displayPostContentRadio,
 			excerptLength,
 			displayPostDate,
+			displayFeaturedImage,
+			featuredImageAlign,
+			addLinkToFeaturedImage,
 			order,
 			orderBy,
 			postsToShow,
@@ -166,6 +196,31 @@ class LatestPostsEdit extends Component {
 						onChange={ this.onSetDisplayPostDate }
 					/>
 				</PanelBody>
+
+				<PanelBody title={ __( 'Featured image settings' ) }>
+					<ToggleControl
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ this.onSetDisplayFeaturedImage }
+					/>
+					{ displayFeaturedImage && (
+						<>
+							<BlockAlignmentControl
+								value={ featuredImageAlign }
+								onChange={ this.onSetFeaturedImageAlign }
+								controls={ [ 'left', 'center', 'right' ] }
+								isBottomSheetControl={ true }
+							/>
+							<ToggleControl
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ this.onSetAddLinkToFeaturedImage }
+								separatorType={ 'topFullWidth' }
+							/>
+						</>
+					) }
+				</PanelBody>
+
 				<PanelBody title={ __( 'Sorting and filtering' ) }>
 					<QueryControls
 						{ ...{ order, orderBy } }

package/src/loginout/edit.js

@@ -11,7 +11,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Login/out settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }

package/src/media-text/edit.js

@@ -46,7 +46,6 @@ const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			fontSize: 'large',
 			placeholder: _x( 'Content…', 'content placeholder' ),
 		},
 	],
@@ -238,7 +237,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	};
 
 	const mediaTextGeneralSettings = (
-		<PanelBody title={ __( 'Media & Text settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ToggleControl
 				label={ __( 'Stack on mobile' ) }
 				checked={ isStackedOnMobile }

package/src/media-text/edit.native.js

@@ -186,7 +186,7 @@ class MediaTextEdit extends Component {
 
 		return (
 			<InspectorControls>
-				<PanelBody title={ __( 'Media & Text settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Crop image to fill entire column' ) }
 						checked={ imageFill }

package/src/navigation/block.json

@@ -65,7 +65,6 @@
 			"default": 5
 		}
 	},
-	"usesContext": [ "navigationArea" ],
 	"providesContext": {
 		"textColor": "textColor",
 		"customTextColor": "customTextColor",
@@ -117,7 +116,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/edit/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +25,7 @@ import {
 	getColorClassName,
 	Warning,
 } from '@wordpress/block-editor';
-import { EntityProvider, useEntityProp } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
@@ -109,7 +108,6 @@ function Navigation( {
 	setOverlayBackgroundColor,
 	overlayTextColor,
 	setOverlayTextColor,
-	context: { navigationArea },
 
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
@@ -129,34 +127,12 @@ function Navigation( {
 		hasIcon,
 	} = attributes;
 
-	let areaMenu,
-		setAreaMenu = noop;
-	// Navigation areas are deprecated and on their way out. Let's not perform
-	// the request unless we're in an environment where the endpoint exists.
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		[ areaMenu, setAreaMenu ] = useEntityProp(
-			'root',
-			'navigationArea',
-			'navigation',
-			navigationArea
-		);
-	}
-
-	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
-
-	const ref = navigationArea ? navigationAreaMenu : attributes.ref;
+	const ref = attributes.ref;
 
 	const registry = useRegistry();
-	const setRef = useCallback(
-		( postId ) => {
-			setAttributes( { ref: postId } );
-			if ( navigationArea ) {
-				setAreaMenu( postId );
-			}
-		},
-		[ navigationArea ]
-	);
+	const setRef = ( postId ) => {
+		setAttributes( { ref: postId } );
+	};
 
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		`navigationMenu/${ ref }`
@@ -261,8 +237,6 @@ function Navigation( {
 		setHasSavedUnsavedInnerBlocks,
 	] = useState( false );
 
-	const isWithinUnassignedArea = !! navigationArea && ! ref;
-
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
 		false
 	);
@@ -322,13 +296,12 @@ function Navigation( {
 	// - there is no classic menu conversion process in progress.
 	// - there is no menu creation process in progress.
 	// - there are no uncontrolled blocks.
-	// - (legacy) there is a Navigation Area without a ref attribute pointing to a Navigation Post.
 	const isPlaceholder =
 		! ref &&
 		! isCreatingNavigationMenu &&
 		! isConvertingClassicMenu &&
 		hasResolvedNavigationMenus &&
-		( ! hasUncontrolledInnerBlocks || isWithinUnassignedArea );
+		! hasUncontrolledInnerBlocks;
 
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;
@@ -567,9 +540,6 @@ function Navigation( {
 
 	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
-			if ( navigationArea ) {
-				setAreaMenu( 0 );
-			}
 			setAttributes( {
 				ref: undefined,
 			} );

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -123,7 +123,7 @@ export default function UnsavedInnerBlocks( {
 	);
 
 	// Automatically save the uncontrolled blocks.
-	useEffect( async () => {
+	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
 		// In this case avoid automatic creation of a wp_navigation post.
 		// Otherwise the user will be spammed with lots of menus!
@@ -150,9 +150,10 @@ export default function UnsavedInnerBlocks( {
 		}
 
 		savingLock.current = true;
-		const menu = await createNavigationMenu( null, blocks );
-		onSave( menu );
-		savingLock.current = false;
+		createNavigationMenu( null, blocks ).then( ( menu ) => {
+			onSave( menu );
+			savingLock.current = false;
+		} );
 	}, [
 		isDisabled,
 		isSaving,

package/src/navigation/index.php

@@ -396,6 +396,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
+	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
+	if ( $should_load_modal_view_script ) {
+		wp_enqueue_script( 'wp-block-navigation-view-modal' );
+	}
+
 	$inner_blocks = $block->inner_blocks;
 
 	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.

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/navigation/view-modal.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import MicroModal from 'micromodal';
+
+// Responsive navigation toggle.
+function navigationToggleModal( modal ) {
+	const dialogContainer = modal.querySelector(
+		`.wp-block-navigation__responsive-dialog`
+	);
+
+	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
+
+	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
+
+	// Add a class to indicate the modal is open.
+	const htmlElement = document.documentElement;
+	htmlElement.classList.toggle( 'has-modal-open' );
+}
+
+window.addEventListener( 'load', () => {
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );
+
+	// Close modal automatically on clicking anchor links inside modal.
+	const navigationLinks = document.querySelectorAll(
+		'.wp-block-navigation-item__content'
+	);
+
+	navigationLinks.forEach( function ( link ) {
+		// Ignore non-anchor links and anchor links which open on a new tab.
+		if (
+			! link.getAttribute( 'href' )?.startsWith( '#' ) ||
+			link.attributes?.target === '_blank'
+		) {
+			return;
+		}
+
+		// Find the specific parent modal for this link
+		// since .close() won't work without an ID if there are
+		// multiple navigation menus in a post/page.
+		const modal = link.closest(
+			'.wp-block-navigation__responsive-container'
+		);
+		const modalId = modal?.getAttribute( 'id' );
+
+		link.addEventListener( 'click', () => {
+			// check if modal exists and is open before trying to close it
+			// otherwise Micromodal will toggle the `has-modal-open` class
+			// on the html tag which prevents scrolling
+			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
+				MicroModal.close( modalId );
+			}
+		} );
+	} );
+} );

package/src/navigation/view.js

@@ -1,32 +1,3 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
-
-	if ( isHidden ) {
-		dialogContainer.removeAttribute( 'role' );
-		dialogContainer.removeAttribute( 'aria-modal' );
-	} else {
-		dialogContainer.setAttribute( 'role', 'dialog' );
-		dialogContainer.setAttribute( 'aria-modal', 'true' );
-	}
-
-	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
 // Open on click functionality.
 function closeSubmenus( element ) {
 	element
@@ -65,12 +36,6 @@ function toggleSubmenuOnClick( event ) {
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
 window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
 	const submenuButtons = document.querySelectorAll(
 		'.wp-block-navigation-submenu__toggle'
 	);

package/src/navigation-link/edit.js

@@ -354,7 +354,7 @@ function LinkControlTransforms( { clientId, replace } ) {
 			return {
 				getBlock: _getBlock,
 				blockTransforms: getBlockTransformItems(
-					[ _getBlock( clientId ) ],
+					_getBlock( clientId ),
 					getBlockRootClientId( clientId )
 				),
 			};

package/src/paragraph/edit.js

@@ -23,6 +23,11 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useOnEnter } from './use-enter';
+
 const name = 'core/paragraph';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
@@ -57,6 +62,7 @@ function ParagraphBlock( {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
+		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
 			'has-drop-cap': dropCap,
 			[ `has-text-align-${ align }` ]: align,

package/src/paragraph/edit.native.js

@@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
 
+const allowedParentBlockAlignments = [ 'left', 'center', 'right' ];
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -21,6 +23,7 @@ function ParagraphBlock( {
 	setAttributes,
 	style,
 	clientId,
+	parentBlockAlignment,
 } ) {
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
@@ -40,6 +43,15 @@ function ParagraphBlock( {
 	const onAlignmentChange = useCallback( ( nextAlign ) => {
 		setAttributes( { align: nextAlign } );
 	}, [] );
+
+	const parentTextAlignment = allowedParentBlockAlignments.includes(
+		parentBlockAlignment
+	)
+		? parentBlockAlignment
+		: undefined;
+
+	const textAlignment = align || parentTextAlignment;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -82,7 +94,7 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
-				textAlign={ align }
+				textAlign={ textAlignment }
 				__unstableEmbedURLOnPaste
 			/>
 		</>

package/src/paragraph/use-enter.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER } from '@wordpress/keycodes';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { hasBlockSupport, createBlock } from '@wordpress/blocks';
+
+export function useOnEnter( props ) {
+	const { batch } = useRegistry();
+	const {
+		moveBlocksToPosition,
+		replaceInnerBlocks,
+		duplicateBlocks,
+		insertBlock,
+	} = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockOrder,
+		getBlockName,
+		getBlock,
+		getNextBlockClientId,
+	} = useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
+			const { content, clientId } = propsRef.current;
+
+			// The paragraph should be empty.
+			if ( content.length ) {
+				return;
+			}
+
+			const wrapperClientId = getBlockRootClientId( clientId );
+
+			if (
+				! hasBlockSupport(
+					getBlockName( wrapperClientId ),
+					'__experimentalOnEnter',
+					false
+				)
+			) {
+				return;
+			}
+
+			const order = getBlockOrder( wrapperClientId );
+
+			event.preventDefault();
+
+			const position = order.indexOf( clientId );
+
+			// If it is the last block, exit.
+			if ( position === order.length - 1 ) {
+				moveBlocksToPosition(
+					[ clientId ],
+					wrapperClientId,
+					getBlockRootClientId( wrapperClientId ),
+					getBlockIndex( wrapperClientId ) + 1
+				);
+				return;
+			}
+
+			// If it is in the middle, split the block in two.
+			const wrapperBlock = getBlock( wrapperClientId );
+			batch( () => {
+				duplicateBlocks( [ wrapperClientId ] );
+				const blockIndex = getBlockIndex( wrapperClientId );
+
+				replaceInnerBlocks(
+					wrapperClientId,
+					wrapperBlock.innerBlocks.slice( 0, position )
+				);
+				replaceInnerBlocks(
+					getNextBlockClientId( wrapperClientId ),
+					wrapperBlock.innerBlocks.slice( position + 1 )
+				);
+				insertBlock(
+					createBlock( 'core/paragraph' ),
+					blockIndex + 1,
+					getBlockRootClientId( wrapperClientId ),
+					true
+				);
+			} );
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

package/src/post-author/edit.js

@@ -69,7 +69,7 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Author Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! isDescendentOfQueryLoop && !! authors?.length && (
 						<SelectControl
 							label={ __( 'Author' ) }

package/src/post-author/index.php

@@ -39,7 +39,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	return sprintf( '<div %1$s>', $wrapper_attributes ) .
 	( ! 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">' . esc_html( $byline ) . '</p>' : '' ) .
+	( ! 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>' .
 	( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
 	'</div>' .

package/src/post-comment/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"commentId": {

package/src/post-comments/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-comments",
 	"title": "Post Comments (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {