Deprecate 'Post author' block

docs/reference-guides/core-blocks.md

@@ -610,13 +610,13 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 -	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~, ~~visibility~~
 -	**Attributes:** slug
 
-## Author
+## Author (deprecated)
 
-Display post author details such as name, avatar, and bio. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author))
+This block is deprecated. Please use the Avatar block, the Author Name block, and the Author Biography block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author))
 
 -	**Name:** core/post-author
 -	**Category:** theme
--	**Supports:** anchor, color (background, gradients, link, text), filter (duotone), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** anchor, color (background, gradients, link, text), filter (duotone), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
 -	**Attributes:** avatarSize, byline, isLink, linkTarget, showAvatar, showBio, textAlign
 
 ## Author Biography

packages/block-editor/src/components/block-inspector/index.js

@@ -25,6 +25,7 @@ import BlockStyles from '../block-styles';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
@@ -369,6 +370,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
+			<InspectorControlsLastItem.Slot />
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

packages/block-editor/src/components/inspector-controls/last-item.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( Symbol( 'InspectorControlsLastItem' ) );
+
+const InspectorControlsLastItem = ( props ) => {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+InspectorControlsLastItem.Slot = function InspectorControlsLastItemSlot(
+	props
+) {
+	return <Slot { ...props } />;
+};
+
+export default InspectorControlsLastItem;

packages/block-editor/src/private-apis.js

@@ -13,6 +13,7 @@ import {
 	normalizeString,
 } from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
+import InspectorControlsLastItem from './components/inspector-controls/last-item';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
@@ -79,6 +80,7 @@ lock( privateApis, {
 	normalizeString,
 	PrivateListView,
 	ResizableBoxPopover,
+	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
 	BlockQuickNavigation,

packages/block-library/src/editor.scss

@@ -33,6 +33,7 @@
 @use "./nextpage/editor.scss" as *;
 @use "./page-list/editor.scss" as *;
 @use "./paragraph/editor.scss" as *;
+@use "./post-author/editor.scss" as *;
 @use "./post-excerpt/editor.scss" as *;
 @use "./pullquote/editor.scss" as *;
 @use "./rss/editor.scss" as *;

packages/block-library/src/post-author/block.json

@@ -2,9 +2,9 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/post-author",
-	"title": "Author",
+	"title": "Author (deprecated)",
 	"category": "theme",
-	"description": "Display post author details such as name, avatar, and bio.",
+	"description": "This block is deprecated. Please use the Avatar block, the Author Name block, and the Author Biography block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {
@@ -37,6 +37,7 @@
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],
 	"supports": {
+		"inserter": false,
 		"anchor": true,
 		"html": false,
 		"spacing": {

packages/block-library/src/post-author/edit.js

@@ -12,11 +12,16 @@ import {
 	InspectorControls,
 	RichText,
 	useBlockProps,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
+	Button,
 	ComboboxControl,
 	SelectControl,
 	ToggleControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -26,14 +31,19 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __, sprintf } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import { recreateWithRecommendedBlocks } from './utils';
 import {
 	useDefaultAvatar,
 	useToolsPanelDropdownMenuProps,
 } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { InspectorControlsLastItem } = unlock( blockEditorPrivateApis );
 
 const AUTHORS_QUERY = {
 	who: 'authors',
@@ -114,6 +124,7 @@ function PostAuthorEdit( {
 	context: { postType, postId, queryId },
 	attributes,
 	setAttributes,
+	clientId,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -145,8 +156,12 @@ function PostAuthorEdit( {
 		},
 		[ postType, postId ]
 	);
-
+	const blockTypes = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
 	const { editEntityRecord } = useDispatch( coreStore );
+	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	const {
 		textAlign,
@@ -195,6 +210,13 @@ function PostAuthorEdit( {
 		);
 	}
 
+	function transformBlock() {
+		replaceBlock(
+			clientId,
+			recreateWithRecommendedBlocks( attributes, blockTypes )
+		);
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -310,6 +332,30 @@ function PostAuthorEdit( {
 					) }
 				</ToolsPanel>
 			</InspectorControls>
+			{ blockTypes.some(
+				( blockType ) => blockType.name === 'core/group'
+			) && (
+				<InspectorControlsLastItem>
+					<VStack
+						className="wp-block-post-author__transform"
+						alignment="left"
+						spacing={ 4 }
+					>
+						<Text as="p">
+							{ __(
+								'This block is no longer supported. Recreate its design with the Avatar, Author Name and Author Biography blocks.'
+							) }
+						</Text>
+						<Button
+							variant="primary"
+							onClick={ transformBlock }
+							__next40pxDefaultSize
+						>
+							{ __( 'Recreate' ) }
+						</Button>
+					</VStack>
+				</InspectorControlsLastItem>
+			) }
 
 			<BlockControls group="block">
 				<AlignmentControl

packages/block-library/src/post-author/editor.scss

@@ -0,0 +1,9 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
+.wp-block-post-author__transform {
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	margin: $grid-unit-20;
+	padding: $grid-unit-20;
+}

packages/block-library/src/post-author/utils.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
+/**
+ * Generate Author-related blocks based on block attributes.
+ *
+ * @param {Object} attributes Block's attributes.
+ * @param {Object} blockTypes Block types.
+ * @return {Object} Generated block.
+ */
+export function recreateWithRecommendedBlocks( attributes, blockTypes ) {
+	const {
+		avatarSize,
+		byline,
+		showAvatar,
+		showBio,
+		isLink,
+		linkTarget,
+		textAlign,
+		style,
+		...restAttributes
+	} = attributes;
+
+	const shouldInsertAvatarBlock =
+		showAvatar &&
+		blockTypes.some( ( blockType ) => blockType.name === 'core/avatar' );
+	const shouldInsertParagraphBlock =
+		byline &&
+		blockTypes.some( ( blockType ) => blockType.name === 'core/paragraph' );
+	const shouldInsertPostAuthorNameBlock = blockTypes.some(
+		( blockType ) => blockType.name === 'core/post-author-name'
+	);
+	const shouldInsertPostAuthorBiographyBlock =
+		showBio &&
+		blockTypes.some(
+			( blockType ) => blockType.name === 'core/post-author-biography'
+		);
+
+	return createBlock(
+		'core/group',
+		{
+			...restAttributes,
+			style: cleanEmptyObject( {
+				...style,
+				spacing: {
+					...style?.spacing,
+					blockGap: '1em',
+				},
+				color: {
+					...style?.color,
+					// Duotone must be applied to the avatar block.
+					duotone: undefined,
+				},
+			} ),
+			layout: {
+				type: 'flex',
+				flexWrap: 'nowrap',
+				verticalAlignment: 'top',
+			},
+		},
+		[
+			shouldInsertAvatarBlock &&
+				createBlock( 'core/avatar', {
+					size: avatarSize,
+					style: cleanEmptyObject( {
+						border: {
+							radius: '0px',
+						},
+						color: {
+							duotone: style?.color?.duotone,
+						},
+					} ),
+				} ),
+			createBlock(
+				'core/group',
+				{
+					style: {
+						layout: {
+							selfStretch: 'fill',
+							flexSize: null,
+						},
+						spacing: {
+							blockGap: '0',
+						},
+					},
+					layout: {
+						type: 'flex',
+						orientation: 'vertical',
+						justifyContent: 'stretch',
+					},
+				},
+				[
+					shouldInsertParagraphBlock &&
+						createBlock( 'core/paragraph', {
+							content: byline,
+							placeholder: __( 'Write byline…' ),
+							style: {
+								typography: {
+									fontSize: '0.5em',
+									textAlign,
+								},
+							},
+						} ),
+					shouldInsertPostAuthorNameBlock &&
+						createBlock( 'core/post-author-name', {
+							isLink,
+							linkTarget,
+							textAlign,
+							style: {
+								typography: {
+									fontSize: '1em',
+								},
+							},
+						} ),
+					shouldInsertPostAuthorBiographyBlock &&
+						createBlock( 'core/post-author-biography', {
+							textAlign,
+							style: {
+								typography: {
+									fontSize: '0.7em',
+								},
+							},
+						} ),
+				].filter( Boolean )
+			),
+		].filter( Boolean )
+	);
+}