Add author name block (#36001)

* Add author name block

* linting and fixtures

* Update packages/block-library/src/author-name/index.php

* change order...

* Add author archive link option

* Delete style.scss

remove the stylesheet

* update fixtures with attributes

* fix spacing

* Rename the block to post author name

* Update fixtures

* try to add the block to the docs

docs/reference-guides/core-blocks.md

@@ -440,6 +440,15 @@ Add the author of this post.
 -	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** avatarSize, byline, showAvatar, showBio, textAlign
 
+## Post Author Name
+
+The author name.
+
+-	**Name:** core/post-author-name
+-	**Category:** theme
+-	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isLink, linkTarget, textAlign
+
 ## Post Comment (deprecated)
 
 This block is deprecated. Please use the Comments Query Loop block instead.

lib/blocks.php

@@ -82,6 +82,7 @@ function gutenberg_reregister_core_block_types() {
 				'page-list.php'                    => 'core/page-list',
 				'pattern.php'                      => 'core/pattern',
 				'post-author.php'                  => 'core/post-author',
+				'post-author-name.php'             => 'core/post-author-name',
 				'post-comment.php'                 => 'core/post-comment',
 				'post-comments.php'                => 'core/post-comments',
 				'post-comments-count.php'          => 'core/post-comments-count',

packages/block-library/src/index.js

@@ -59,6 +59,7 @@ import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
+import * as postAuthorName from './post-author-name';
 import * as postComment from './post-comment';
 import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
@@ -202,6 +203,7 @@ export const __experimentalGetCoreBlocks = () => [
 	logInOut,
 	termDescription,
 	queryTitle,
+	postAuthorName,
 ];
 
 /**

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

@@ -0,0 +1,43 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/post-author-name",
+	"title": "Post Author Name",
+	"category": "theme",
+	"description": "The author name.",
+	"textdomain": "default",
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
+		"isLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		}
+	},
+	"usesContext": [ "postType", "postId" ],
+	"supports": {
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
+	}
+}

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

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+function PostAuthorNameEdit( {
+	context: { postType, postId },
+	attributes: { textAlign, isLink, linkTarget },
+	setAttributes,
+} ) {
+	const { authorName } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getUser } = select( coreStore );
+			const _authorId = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			)?.author;
+
+			return {
+				authorName: _authorId ? getUser( _authorId ) : null,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const displayName = authorName?.name || __( 'Author Name' );
+
+	const displayAuthor = isLink ? (
+		<a
+			href="#author-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ displayName }
+		</a>
+	) : (
+		displayName
+	);
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Link to author archive' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<div { ...blockProps }> { displayAuthor } </div>
+		</>
+	);
+}
+
+export default PostAuthorNameEdit;

packages/block-library/src/post-author-name/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+/**
+ * WordPress dependencies
+ */
+import { postAuthor as icon } from '@wordpress/icons';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

packages/block-library/src/post-author-name/index.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-author-name` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-author-name` block on the server.
+ *
+ * @param  array    $attributes Block attributes.
+ * @param  string   $content    Block default content.
+ * @param  WP_Block $block      Block instance.
+ * @return string Returns the rendered post author name block.
+ */
+function render_block_core_post_author_name( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	if ( empty( $author_id ) ) {
+		return '';
+	}
+
+	$author_name      = get_the_author_meta( 'display_name', $author_id );
+	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+
+	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), $attributes['linkTarget'], $author_name );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	return sprintf( '<div %1$s>', $wrapper_attributes ) . $author_name . '</div>';
+}
+
+/**
+ * Registers the `core/post-author-name` block on the server.
+ */
+function register_block_core_post_author_name() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-author-name',
+		array(
+			'render_callback' => 'render_block_core_post_author_name',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_author_name' );

test/integration/fixtures/blocks/core__post-author-name.html

@@ -0,0 +1 @@
+<!-- wp:post-author-name /-->

test/integration/fixtures/blocks/core__post-author-name.json

@@ -0,0 +1,13 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-author-name",
+		"isValid": true,
+		"attributes": {
+			"isLink": false,
+			"linkTarget": "_self"
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

test/integration/fixtures/blocks/core__post-author-name.parsed.json

@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/post-author-name",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__post-author-name.serialized.html

@@ -0,0 +1 @@
+<!-- wp:post-author-name /-->