Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate 'Post author' block #55352

Open
wants to merge 14 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -533,13 +533,13 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
- **Supports:** ~~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), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Supports:** color (background, gradients, link, text), inserter, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** avatarSize, byline, isLink, linkTarget, showAvatar, showBio, textAlign

## Author Biography
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,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";
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/post-author/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -35,6 +35,7 @@
},
"usesContext": [ "postType", "postId", "queryId" ],
"supports": {
"inserter": true,
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
"html": false,
"spacing": {
"margin": true,
Expand Down
24 changes: 24 additions & 0 deletions packages/block-library/src/post-author/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ import {
InspectorControls,
RichText,
useBlockProps,
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import {
Button,
ComboboxControl,
PanelBody,
SelectControl,
Expand All @@ -23,6 +26,14 @@ 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 { BlockInfo } = unlock( blockEditorPrivateApis );

const minimumUsersForCombobox = 25;

const AUTHORS_QUERY = {
Expand All @@ -35,6 +46,7 @@ function PostAuthorEdit( {
context: { postType, postId, queryId },
attributes,
setAttributes,
clientId,
} ) {
const isDescendentOfQueryLoop = Number.isFinite( queryId );
const { authorId, authorDetails, authors } = useSelect(
Expand All @@ -57,6 +69,7 @@ function PostAuthorEdit( {
);

const { editEntityRecord } = useDispatch( coreStore );
const { replaceBlock } = useDispatch( blockEditorStore );

const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
attributes;
Expand Down Expand Up @@ -96,8 +109,19 @@ function PostAuthorEdit( {
const showAuthorControl =
!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;

function transformBlock() {
replaceBlock( clientId, migrateToRecommendedBlocks( attributes ) );
}

return (
<>
<BlockInfo>
<div className="wp-block-post-author__transform-button">
<Button variant="primary" onClick={ transformBlock }>
{ __( 'Migrate block' ) }
</Button>
</div>
</BlockInfo>
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
{ showAuthorControl &&
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/post-author/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wp-block-post-author__transform-button {
padding: 0 $grid-unit-20 $grid-unit-20 52px;
}
2 changes: 2 additions & 0 deletions packages/block-library/src/post-author/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,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,
edit,
};

Expand Down
17 changes: 17 additions & 0 deletions packages/block-library/src/post-author/transforms.js
Original file line number Diff line number Diff line change
@@ -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;
102 changes: 102 additions & 0 deletions packages/block-library/src/post-author/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/**
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
* 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,
showBio,
isLink,
linkTarget,
textAlign,
style,
...restAttributes
} = attributes;

return createBlock(
'core/group',
{
...restAttributes,
style: {
...style,
color: {
...style?.color,
// Duotone must be applied to the avatar block.
duotone: undefined,
},
},
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
layout: {
type: 'flex',
flexWrap: 'nowrap',
verticalAlignment: 'top',
},
Comment on lines +50 to +54
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The layout and spacing changes are a bit unexpected when migrating the block. Can we apply some sensible defaults to match the previous spacing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Post Author block also has a Flex layout, but seems to have a 1em right margin between the avatar and the content. Therefore, in a8173e3, this is used as the styles.spacing.blockGap value.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for iterating on this. The block gap spacing is only one aspect of the issue. In the video I shared you'll notice that the overall width of the block change. That is unexpected and could further break themes.

Before

Screenshot 2023-10-17 at 12 50 24 pm

After

Screenshot 2023-10-17 at 12 50 32 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding the width of the block, I think the Post Author block does not have box-sizing:border-box, so the width change will occur if left and right padding is applied.

This spacing support for this block was added in #35963, but this PR was before #43243 that recommends adding box-sizing:border-box at the same time as supporting spacing controls.

Originally, I think the Post Author block should also have box-sizing:border-box, but what approach do you think is best to prevent breaking changes as much as possible? Personally, I think that increasing the width of the Post Author block by padding is not originally intended, and that changing the width may be acceptable for migration purposes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: Post Author block now supports borders, as of #64599. At the same time, box-sizing: border-box was added, so there should be no width change when migrating.

},
[
showBio &&
createBlock( 'core/avatar', {
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
size: avatarSize,
style: {
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',
},
},
} ),
createBlock( 'core/post-author-biography', {
style: {
typography: {
fontSize: '0.7em',
},
},
} ),
]
),
].filter( Boolean )
);
}