Add author block pattern #40076

carolinan · 2022-04-06T03:30:05Z

What?

Adds a new author block pattern.

Why?

The new author blocks (post author name, avatar, post author biography) can help users customize their post templates; template files as well as query loops.
They can also be used to add more context directly in a post.

How?

This PR adds one example post author pattern. Number 3 in the screenshot.
I only added one because I am not sure there is consensus or interest in adding them.

Visual description: The section has a thin grey border. The content is displayed in two columns: The author name is displayed at the top of the left column, with a paragraph with the author biography below it. In the right hand column, there is a circular author avatar image. Both the author name and the avatar links to the author archive. The author name is underlined.

Below is a screenshot of several example patterns reproduced from suggestions in #24952
and also the code for testing all of them in the editor.

Most of these patterns can be improved if the vertical alignment for the flex layout is merged.

Testing Instructions

First, register a user that has an avatar and a biography.
Please test with biographies of different lengths.

Open a Post or Page or the site editor
Open the pattern inserter or block inserter.
Search for the author pattern and insert it. (The category is text).
Save and view the pattern on the front.

Screenshots or screencast

Example code

You can copy paste this example code to test the other patterns that are in the screenshot.

<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}}} -->
<div class="wp-block-group"><!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} /-->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:avatar {"size":60,"isLink":true,"align":"right"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px","style":"solid"},"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"borderColor":"cyan-bluish-gray","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-border-color has-cyan-bluish-gray-border-color" style="border-style:solid;border-width:1px;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:avatar {"size":60,"isLink":true,"align":"right"} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} /-->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px","style":"solid"},"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"borderColor":"cyan-bluish-gray","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-border-color has-cyan-bluish-gray-border-color" style="border-style:solid;border-width:1px;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} /-->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:avatar {"size":80,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px","style":"solid"},"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"borderColor":"cyan-bluish-gray","layout":{"type":"default"}} -->
<div class="wp-block-group has-border-color has-cyan-bluish-gray-border-color" style="border-style:solid;border-width:1px;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"500"}},"textColor":"cyan-bluish-gray","fontSize":"small"} -->
<p class="has-cyan-bluish-gray-color has-text-color has-small-font-size" style="font-style:normal;font-weight:500;text-transform:uppercase">Published by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /--></div>
<!-- /wp:group -->

<!-- wp:avatar {"size":40,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /--></div>
<!-- /wp:group -->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"backgroundColor":"cyan-bluish-gray","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<p style="font-style:normal;font-weight:600">Author:</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} /--></div>
<!-- /wp:group -->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:avatar {"size":80,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /-->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:600">Published</p>
<!-- /wp:paragraph -->

<!-- wp:post-date {"fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"width":"1px","style":"solid"},"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"borderColor":"cyan-bluish-gray","backgroundColor":"cyan-bluish-gray","layout":{"type":"default"}} -->
<div class="wp-block-group has-border-color has-cyan-bluish-gray-border-color has-cyan-bluish-gray-background-color has-background" style="border-style:solid;border-width:1px;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:500;text-transform:uppercase">Published by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large"} /--></div>
<!-- /wp:group -->

<!-- wp:avatar {"size":60,"isLink":true,"align":"right"} /--></div>
<!-- /wp:group -->

<!-- wp:post-author-biography {"fontSize":"small"} /--></div>
<!-- /wp:group -->

gziolo · 2022-04-06T07:56:38Z

lib/compat/wordpress-6.0/block-patterns-update.php

+		'author-biograhy-border'               => array(
+			'title'      => _x( 'Post author biography with avatar and border', 'Block pattern title', 'gutenberg' ),
+			'categories' => array( 'text' ),
+			'blockTypes' => array( 'core/post-author-name', 'core/post-author-biography', 'core/avatar' ),


It means that we would need all 3 blocks to be promoted to stable to include this new pattern in WordPress 6.0.

Or did you mean, that they should be moved to stable with this PR?

I was thinking we should do it separately as a pre-requisite for this PR.

paaljoachim · 2022-04-06T15:19:23Z

Hei Carolina

I have an older tutorial I am looking into updating:
https://www.easywebdesigntutorials.com/create-your-own-author-bio-box-in-wordpress-without-a-plugin/
I am just sharing it here as it gives a kind of overview of the author box I made for the tutorial.

About - author -
Avatar/Gravatar -- Biography
View all posts by - author -- website
Social media icons.

Perhaps some social media icons could be added into your example?
(Facebook, Instagram, Youtube, Twitter etc.)

kjellr · 2022-04-06T17:13:14Z

Thanks for the PR! I agree that we should have a handful of author patterns like this by default. In terms of implementation though, my understanding is that any new "default" patterns should be added to the pattern directory, not implemented directly into Gutenberg. Those existing Query patterns should be moved over there at some point too — just waiting on a resolution to this issue.

carolinan · 2022-04-07T02:46:41Z

Then should I close this? Because these blocks are not supported in the pattern directory. A new issue would be created once they are available.

@paaljoachim I only added the designs that were suggested in the issue.
The pattern do look a bit sparse without the "view all posts by", but I could not find a way to create a link to the author archive, with the post author name, inside a paragraph. Since we can't put other blocks inline in paragraphs.

paaljoachim · 2022-04-07T09:27:26Z

Testing.

Local site Desktop Server running WordPress 5.9.3.
Twenty Twenty Two.
Chrome

Installed the PR Gutenberg build using this approach: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

Went to a page.
Clicked the Block Inserter.
Selected Patterns. Wrote author in the search box.

Clicked the pattern to insert it.

It works well adding the author pattern. But it feels a bit missing at the moment. It would be helpful to be able to add on to it with for instance social media icons.

A sidetrack coming up.
@c4rl0sbr4v0 Carlos I will just ping you in to the following part.
I wanted to duplicate the pattern by manually recreating it. I noticed a few missing features to do so. For instance paragraph block toolbar (Bold, Italic etc) icons are not included in the Post Author Name and Post Author Biography and perhaps other places as well. It looks like I will need to create a new issue where I bring up these and likely other things as well.

cbravobernal · 2022-04-07T10:00:32Z

It looks like I will need to create a new issue where I bring up these and likely other things as well.

Sure! I will be happy to help close them.

paaljoachim · 2022-04-07T14:01:34Z

I added this issue:
Post Author name and Biography blocks are missing text icons in the toolbar controls
#40150

paaljoachim · 2022-04-07T14:35:59Z

@carolinan I added another issue in relation to where we should be able to add unique WordPress links by example writing in the author name to get the link to the author archive. #40155

paaljoachim · 2022-04-07T14:47:11Z

Added another issue.
Editing the text in Post Author Name block
#40157

ndiego · 2022-04-19T14:09:20Z

@carolinan given that is appears to be a new feature, and we are in Beta, I am going to remove this from the 6.0 project board. If you feel otherwise, please let me know.

carolinan · 2022-05-04T10:13:00Z

I am closing since it is unclear if new patterns are through Gutenberg or the pattern directory, and because the blocks are still experimental.

Add author block pattern

9bd483c

carolinan requested review from TimothyBJacobs and spacedmonkey as code owners April 6, 2022 03:30

carolinan added Needs Design Feedback Needs general design feedback. [Block] Avatar Affects the Avatar Block [Block] Post Author Affects the Post Author Block [Type] Enhancement A suggestion for improvement. labels Apr 6, 2022

carolinan requested review from MaggieCabrera, kjellr and gziolo April 6, 2022 03:31

carolinan added 3 commits April 6, 2022 05:46

Adjust spacing

21e71d5

Adjust spacing

1eab8d7

spacing

c6bdecb

gziolo reviewed Apr 6, 2022

View reviewed changes

gziolo requested a review from priethor April 6, 2022 09:09

gziolo assigned annezazu and unassigned annezazu Apr 6, 2022

gziolo requested review from adamziel and annezazu April 6, 2022 09:09

paaljoachim mentioned this pull request Apr 7, 2022

Link modal suggestion: wp-admin, Dashboard, author, author archive and other unique WP links #40155

Open

paaljoachim mentioned this pull request Apr 7, 2022

Author block: enhancement ideas #24952

Open

carolinan closed this May 4, 2022

carolinan mentioned this pull request Aug 15, 2022

Bundle new collection of Header and Footer block patterns #43157

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add author block pattern #40076

Add author block pattern #40076

carolinan commented Apr 6, 2022

gziolo Apr 6, 2022

carolinan Apr 6, 2022

carolinan Apr 6, 2022

gziolo Apr 6, 2022

paaljoachim commented Apr 6, 2022

kjellr commented Apr 6, 2022

carolinan commented Apr 7, 2022 •

edited

Loading

paaljoachim commented Apr 7, 2022 •

edited

Loading

cbravobernal commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

ndiego commented Apr 19, 2022

carolinan commented May 4, 2022

Add author block pattern #40076

Add author block pattern #40076

Conversation

carolinan commented Apr 6, 2022

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Example code

gziolo Apr 6, 2022

Choose a reason for hiding this comment

carolinan Apr 6, 2022

Choose a reason for hiding this comment

carolinan Apr 6, 2022

Choose a reason for hiding this comment

gziolo Apr 6, 2022

Choose a reason for hiding this comment

paaljoachim commented Apr 6, 2022

kjellr commented Apr 6, 2022

carolinan commented Apr 7, 2022 • edited Loading

paaljoachim commented Apr 7, 2022 • edited Loading

cbravobernal commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

paaljoachim commented Apr 7, 2022

ndiego commented Apr 19, 2022

carolinan commented May 4, 2022

carolinan commented Apr 7, 2022 •

edited

Loading

paaljoachim commented Apr 7, 2022 •

edited

Loading