Deprecate 'Post author' block

docs/reference-guides/core-blocks.md

@@ -543,13 +543,13 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 -	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
 -	**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:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), 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

@@ -27,6 +27,7 @@ import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
+import InspectorControlsLastItem from '../inspector-controls-last-item-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
@@ -266,12 +267,15 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			<BlockVariationTransforms blockClientId={ clientId } />
 			<BlockInfo.Slot />
 			{ showTabs && (
-				<InspectorControlsTabs
-					hasBlockStyles={ hasBlockStyles }
-					clientId={ clientId }
-					blockName={ blockName }
-					tabs={ availableTabs }
-				/>
+				<>
+					<InspectorControlsTabs
+						hasBlockStyles={ hasBlockStyles }
+						clientId={ clientId }
+						blockName={ blockName }
+						tabs={ availableTabs }
+					/>
+					<InspectorControlsLastItem.Slot />
+				</>
 			) }
 			{ ! showTabs && (
 				<>
@@ -310,6 +314,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					<div>
 						<AdvancedControls />
 					</div>
+					<InspectorControlsLastItem.Slot />
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const { Fill, Slot } = createPrivateSlotFill( 'InspectorControlsLastItem' );
+
+const InspectorControlsLastItem = ( props ) => {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+InspectorControlsLastItem.Slot = ( props ) => <Slot { ...props } />;
+
+export default InspectorControlsLastItem;

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

@@ -15,6 +15,7 @@ import {
 } from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
+import InspectorControlsLastItem from './components/inspector-controls-last-item-slot-fill';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
@@ -66,6 +67,7 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
+	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
 	useStyleOverride,

packages/block-library/src/editor.scss

@@ -31,6 +31,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";

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": {
@@ -35,6 +35,7 @@
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],
 	"supports": {
+		"inserter": false,
 		"html": false,
 		"spacing": {
 			"margin": true,

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

@@ -12,17 +12,30 @@ import {
 	InspectorControls,
 	RichText,
 	useBlockProps,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
+	Button,
 	ComboboxControl,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { migrateToRecommendedBlocks } from './utils';
+import { unlock } from '../lock-unlock';
+
+const { InspectorControlsLastItem } = unlock( blockEditorPrivateApis );
+
 const minimumUsersForCombobox = 25;
 
 const AUTHORS_QUERY = {
@@ -35,6 +48,7 @@ function PostAuthorEdit( {
 	context: { postType, postId, queryId },
 	attributes,
 	setAttributes,
+	clientId,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const { authorId, authorDetails, authors } = useSelect(
@@ -57,6 +71,7 @@ function PostAuthorEdit( {
 	);
 
 	const { editEntityRecord } = useDispatch( coreStore );
+	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
 		attributes;
@@ -96,6 +111,10 @@ function PostAuthorEdit( {
 	const showAuthorControl =
 		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
+	function transformBlock() {
+		replaceBlock( clientId, migrateToRecommendedBlocks( attributes ) );
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -168,6 +187,26 @@ function PostAuthorEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControlsLastItem>
+				<VStack
+					className="wp-block-post-author__transform"
+					alignment="left"
+					spacing={ 4 }
+				>
+					<Text as="p">
+						{ __(
+							'This block is no longer supported. Please migrate to the Author Name, Avatar, and Biography blocks to design youor content as needed.'
+						) }
+					</Text>
+					<Button
+						variant="primary"
+						onClick={ transformBlock }
+						__next40pxDefaultSize
+					>
+						{ __( 'Migrate' ) }
+					</Button>
+				</VStack>
+			</InspectorControlsLastItem>
 
 			<BlockControls group="block">
 				<AlignmentControl

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

@@ -0,0 +1,6 @@
+.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/index.js

@@ -10,12 +10,14 @@ import { postAuthor as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	example: {
 		viewportWidth: 350,
 		attributes: {

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

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { migrateToRecommendedBlocks } from './utils';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( attributes ) =>
+				migrateToRecommendedBlocks( attributes ),
+		},
+	],
+};
+
+export default transforms;

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

@@ -0,0 +1,115 @@
+/**
+ * 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.
+ *
+ * @return {Object} Generated block.
+ */
+export function migrateToRecommendedBlocks( attributes ) {
+	const {
+		avatarSize,
+		byline,
+		showAvatar,
+		showBio,
+		isLink,
+		linkTarget,
+		textAlign,
+		style,
+		...restAttributes
+	} = attributes;
+
+	return createBlock(
+		'core/group',
+		{
+			...restAttributes,
+			style: cleanEmptyObject( {
+				...style,
+				spacing: {
+					blockGap: '1em',
+				},
+				color: {
+					...style?.color,
+					// Duotone must be applied to the avatar block.
+					duotone: undefined,
+				},
+			} ),
+			layout: {
+				type: 'flex',
+				flexWrap: 'nowrap',
+				verticalAlignment: 'top',
+			},
+		},
+		[
+			showAvatar &&
+				createBlock( 'core/avatar', {
+					size: avatarSize,
+					style: cleanEmptyObject( {
+						border: {
+							radius: '0px',
+						},
+						color: {
+							duotone: style?.color?.duotone,
+						},
+					} ),
+				} ),
+			createBlock(
+				'core/group',
+				{
+					style: {
+						layout: {
+							selfStretch: 'fill',
+							flexSize: null,
+						},
+					},
+					layout: {
+						type: 'flex',
+						orientation: 'vertical',
+						justifyContent: textAlign,
+					},
+				},
+				[
+					createBlock( 'core/paragraph', {
+						content: byline,
+						placeholder: __( 'Write byline…' ),
+						style: {
+							typography: {
+								fontSize: '0.5em',
+							},
+						},
+					} ),
+					createBlock( 'core/post-author-name', {
+						isLink,
+						linkTarget,
+						style: {
+							typography: {
+								fontSize: '1em',
+							},
+						},
+					} ),
+					showBio &&
+						createBlock( 'core/post-author-biography', {
+							style: {
+								typography: {
+									fontSize: '0.7em',
+								},
+							},
+						} ),
+				].filter( Boolean )
+			),
+		].filter( Boolean )
+	);
+}