From cab6b8eb41f5b79872afddd368e5e1c6d3319bb7 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 13 Oct 2023 23:25:55 +0900 Subject: [PATCH 1/7] Deprecate 'Post author' block --- docs/reference-guides/core-blocks.md | 6 +- packages/block-library/src/editor.scss | 1 + .../block-library/src/post-author/block.json | 5 +- .../block-library/src/post-author/edit.js | 24 +++++ .../block-library/src/post-author/editor.scss | 3 + .../block-library/src/post-author/index.js | 2 + .../src/post-author/transforms.js | 17 +++ .../block-library/src/post-author/utils.js | 102 ++++++++++++++++++ 8 files changed, 155 insertions(+), 5 deletions(-) create mode 100644 packages/block-library/src/post-author/editor.scss create mode 100644 packages/block-library/src/post-author/transforms.js create mode 100644 packages/block-library/src/post-author/utils.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 68b4349197a8b..8279757a91249 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -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 diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 5f3d962ae7afa..fb88819c1caec 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -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"; diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 47dceef55604f..cbf6f2df36986 100644 --- a/packages/block-library/src/post-author/block.json +++ b/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": true, "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 4ee353fdd9bdc..d9a410757691e 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -12,8 +12,11 @@ import { InspectorControls, RichText, useBlockProps, + store as blockEditorStore, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { + Button, ComboboxControl, PanelBody, SelectControl, @@ -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 = { @@ -35,6 +46,7 @@ function PostAuthorEdit( { context: { postType, postId, queryId }, attributes, setAttributes, + clientId, } ) { const isDescendentOfQueryLoop = Number.isFinite( queryId ); const { authorId, authorDetails, authors } = useSelect( @@ -57,6 +69,7 @@ function PostAuthorEdit( { ); const { editEntityRecord } = useDispatch( coreStore ); + const { replaceBlock } = useDispatch( blockEditorStore ); const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } = attributes; @@ -96,8 +109,19 @@ function PostAuthorEdit( { const showAuthorControl = !! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0; + function transformBlock() { + replaceBlock( clientId, migrateToRecommendedBlocks( attributes ) ); + } + return ( <> + +
+ +
+ { showAuthorControl && diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss new file mode 100644 index 0000000000000..5540680b17dc5 --- /dev/null +++ b/packages/block-library/src/post-author/editor.scss @@ -0,0 +1,3 @@ +.wp-block-post-author__transform-button { + padding: 0 $grid-unit-20 $grid-unit-20 52px; +} diff --git a/packages/block-library/src/post-author/index.js b/packages/block-library/src/post-author/index.js index 8c91b99f7f6f5..dce3e48c86f63 100644 --- a/packages/block-library/src/post-author/index.js +++ b/packages/block-library/src/post-author/index.js @@ -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, }; diff --git a/packages/block-library/src/post-author/transforms.js b/packages/block-library/src/post-author/transforms.js new file mode 100644 index 0000000000000..4a1271c4b04bd --- /dev/null +++ b/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; diff --git a/packages/block-library/src/post-author/utils.js b/packages/block-library/src/post-author/utils.js new file mode 100644 index 0000000000000..e8002759fec9c --- /dev/null +++ b/packages/block-library/src/post-author/utils.js @@ -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, + }, + }, + layout: { + type: 'flex', + flexWrap: 'nowrap', + verticalAlignment: 'top', + }, + }, + [ + showBio && + createBlock( 'core/avatar', { + 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 ) + ); +} From 7390397280dce343ad00f5ccbae79395a6e55ca9 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 16 Oct 2023 14:02:42 +0900 Subject: [PATCH 2/7] Change `inserter` property to `false` --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/post-author/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 8279757a91249..84984aaff8c49 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -539,7 +539,7 @@ This block is deprecated. Please use the Avatar block, the Author Name block, an - **Name:** core/post-author - **Category:** theme -- **Supports:** color (background, gradients, link, text), inserter, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~ - **Attributes:** avatarSize, byline, isLink, linkTarget, showAvatar, showBio, textAlign ## Author Biography diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index cbf6f2df36986..31cabf6ebcdb6 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -35,7 +35,7 @@ }, "usesContext": [ "postType", "postId", "queryId" ], "supports": { - "inserter": true, + "inserter": false, "html": false, "spacing": { "margin": true, From 580fc8665ba468c884e2f619605352ff3823ecb6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 16 Oct 2023 14:13:00 +0900 Subject: [PATCH 3/7] Clean empty attributes --- packages/block-library/src/post-author/utils.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-author/utils.js b/packages/block-library/src/post-author/utils.js index e8002759fec9c..39efa9f06c6b8 100644 --- a/packages/block-library/src/post-author/utils.js +++ b/packages/block-library/src/post-author/utils.js @@ -3,6 +3,14 @@ */ 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. @@ -27,14 +35,14 @@ export function migrateToRecommendedBlocks( attributes ) { 'core/group', { ...restAttributes, - style: { + style: cleanEmptyObject( { ...style, color: { ...style?.color, // Duotone must be applied to the avatar block. duotone: undefined, }, - }, + } ), layout: { type: 'flex', flexWrap: 'nowrap', @@ -45,14 +53,14 @@ export function migrateToRecommendedBlocks( attributes ) { showBio && createBlock( 'core/avatar', { size: avatarSize, - style: { + style: cleanEmptyObject( { border: { radius: '0px', }, color: { duotone: style?.color?.duotone, }, - }, + } ), } ), createBlock( 'core/group', From 491a15e04136b17ba7a3a1f5d145203589e044ad Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 16 Oct 2023 14:19:05 +0900 Subject: [PATCH 4/7] Incorrect condition when converting Avatar and Biography --- .../block-library/src/post-author/utils.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-author/utils.js b/packages/block-library/src/post-author/utils.js index 39efa9f06c6b8..c870b06dd38dc 100644 --- a/packages/block-library/src/post-author/utils.js +++ b/packages/block-library/src/post-author/utils.js @@ -23,6 +23,7 @@ export function migrateToRecommendedBlocks( attributes ) { const { avatarSize, byline, + showAvatar, showBio, isLink, linkTarget, @@ -50,7 +51,7 @@ export function migrateToRecommendedBlocks( attributes ) { }, }, [ - showBio && + showAvatar && createBlock( 'core/avatar', { size: avatarSize, style: cleanEmptyObject( { @@ -96,14 +97,15 @@ export function migrateToRecommendedBlocks( attributes ) { }, }, } ), - createBlock( 'core/post-author-biography', { - style: { - typography: { - fontSize: '0.7em', + showBio && + createBlock( 'core/post-author-biography', { + style: { + typography: { + fontSize: '0.7em', + }, }, - }, - } ), - ] + } ), + ].filter( Boolean ) ), ].filter( Boolean ) ); From a8173e362441f8bfe123f0b434d2339b1af7b983 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 16 Oct 2023 14:27:30 +0900 Subject: [PATCH 5/7] Use 1em margin as block gap value --- packages/block-library/src/post-author/utils.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/post-author/utils.js b/packages/block-library/src/post-author/utils.js index c870b06dd38dc..4baeba336a94f 100644 --- a/packages/block-library/src/post-author/utils.js +++ b/packages/block-library/src/post-author/utils.js @@ -38,6 +38,9 @@ export function migrateToRecommendedBlocks( attributes ) { ...restAttributes, style: cleanEmptyObject( { ...style, + spacing: { + blockGap: '1em', + }, color: { ...style?.color, // Duotone must be applied to the avatar block. From 400ac2d91250b30730a8df8b0186b2edd8a5c424 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 23 Feb 2024 14:31:53 +0900 Subject: [PATCH 6/7] __next40pxDefaultSize to the migrate button --- packages/block-library/src/post-author/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index c80383e6bd6c0..f6542efdcbdcd 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -117,7 +117,11 @@ function PostAuthorEdit( { <>
-
From 9875c313d3a0f060cab7f30f4d306b8a3f96cd37 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Mon, 29 Jul 2024 11:11:20 +0900 Subject: [PATCH 7/7] Show migration content via new private slot fill --- .../src/components/block-inspector/index.js | 17 +++++---- .../index.js | 27 ++++++++++++++ packages/block-editor/src/private-apis.js | 2 ++ .../block-library/src/post-author/edit.js | 35 ++++++++++++------- .../block-library/src/post-author/editor.scss | 7 ++-- 5 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 packages/block-editor/src/components/inspector-controls-last-item-slot-fill/index.js diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 9daf29f8043bb..cef1e9ec43051 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/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 } ) => { { showTabs && ( - + <> + + + ) } { ! showTabs && ( <> @@ -310,6 +314,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+ ) } diff --git a/packages/block-editor/src/components/inspector-controls-last-item-slot-fill/index.js b/packages/block-editor/src/components/inspector-controls-last-item-slot-fill/index.js new file mode 100644 index 0000000000000..75decb7cefe00 --- /dev/null +++ b/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 ; +}; +InspectorControlsLastItem.Slot = ( props ) => ; + +export default InspectorControlsLastItem; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index eaf699d5e6939..26d8a78c5cabb 100644 --- a/packages/block-editor/src/private-apis.js +++ b/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, diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 8926db77858a2..01eae7b575470 100644 --- a/packages/block-library/src/post-author/edit.js +++ b/packages/block-library/src/post-author/edit.js @@ -21,6 +21,8 @@ import { PanelBody, SelectControl, ToggleControl, + __experimentalText as Text, + __experimentalVStack as VStack, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -32,7 +34,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { migrateToRecommendedBlocks } from './utils'; import { unlock } from '../lock-unlock'; -const { BlockInfo } = unlock( blockEditorPrivateApis ); +const { InspectorControlsLastItem } = unlock( blockEditorPrivateApis ); const minimumUsersForCombobox = 25; @@ -115,17 +117,6 @@ function PostAuthorEdit( { return ( <> - -
- -
- { showAuthorControl && @@ -196,6 +187,26 @@ function PostAuthorEdit( { ) } + + + + { __( + 'This block is no longer supported. Please migrate to the Author Name, Avatar, and Biography blocks to design youor content as needed.' + ) } + + + +