Tracking issue for further block editor and full site editing support

[douglas-johnson]

Continued from #932 cc @alecgeatches

Goal

Improve support for the block editor and full site editing by providing blocks to handle two use cases:

1. Display one or more coauthors in a templated manner within post contexts and query loops.
2. Display the queried coauthor in author archive contexts.

Features

Blocks

• Author Template
  • A repeating pattern that displays multiple coauthors, similar to Post Template within a query loop.
  • Wraps around the other blocks listed below to provide them context.
• Author Name
  • Choose between Display Name, First Name, Last Name
  • Optionally wrapped a link.
• Author Avatar
  • Optionally wrapped in a link.
• Author Description

Block Editor

• Add coauthors to post content.
• Add coauthors to query loops.
• Subscribe to existing CAP store so that a change to the assigned coauthors is reflected in the content.
• Support appearance tools.

Full Site Editing

• Add coauthors to post templates outside of content.
• Add coauthor data to author archives using an All Authors template type.

Layouts

• Support the following in the Author Template block
  • Separators between authors and a distinct separator for the last author.
  • An inline layout typical of bylines.
  • A block layout typical of end of article author card.

Extensibility

• Support the addition of fields in the API.
  • Should fields be added using coauthors_guest_author_fields or should it go through the REST API framework?
• Support the ability for others to make custom blocks that work in the Author Template block.

Features in consideration for future versions

• Is it possible to output a Social Icons block and fill it with a coauthor's social links?
• Support more layout options based on user feedback, a grid of cards for example.
• How might we support templates for specific authors in Full Site Editing?

Approach

API

Create two API endpoints intended to GET coauthor data.

GET CoAuthors by :post-id

Use Case

• Query for the coauthors of a post in post or post template contexts.

Request

• Require :post-id in URL

Response

• Array of CoAuthor objects

Authorization

• Intended for editors and up, but to be determined by capability check.
• Plus anyone who is a coauthor of the post in question.

GET CoAuthor by :author-name

Use Case

• When rendering a block for a specific coauthor, query for them.
• (future) When editing an author archive template, query for single coauthor.

Request

• Require :author-name in URL.
  • Author term slug without the cap- prefix, same as author_name query_var available in author archive requests.

Response

• Single CoAuthor object

Authorization

• To be determined based on more information from testing full site editing.

CoAuthor Objects in API Responses

These objects should have the same shape as the objects returned by get_coauthors(), with some notable exceptions.

• Author archive URLs should be included.
• Author avatar attachment ids should be included if available.
  • Should handle Gravatar as well.

Developer Experience

Use wp-scripts with the ability to run a single build command for all blocks and scripts in CAP.

Compatibility considerations

• Social Pack

[douglas-johnson]

Notes regarding full site editing for author archives:

• I can create an author template for a specific author if they are a WordPress user and they are not linked to a Guest Author.
• Guest Authors are somewhat reasonably not available in the list of authors when creating a template for a specific author.

Here is an audit of the core blocks when used in an author archive template:

• Archive Title ( variation of Query Title )
  • Correctly displays the coauthor's name, based on its use of get_the_archive_title() which CAP filters here: https://github.com/Automattic/Co-Authors-Plus/blob/3.5.10/co-authors-plus.php#L137
• Post Author
  • The context contains the id of the first post in the loop, so Post Author displays the author of the first post, which is often similar to the author query_var which might make it look this this is working:
  • https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/post-author/index.php#L18
• Post Author Name, Post Author Biography
  • They use post context only, so in an author archive template, they use the post context from the first post in the loop.

[douglas-johnson]

Stopping by with an updated as I continue working on this branch:
master...thoughtis:Co-Authors-Plus:block-exploration

I pushed things like:

• Placholder text for use when the post context is not available in full site editing.
• Support for typography and spacing settings.
• Ability to choose between inline and block layouts.
• Added inline layout specific features:
  • Adding a separator between authors and a distinct separator for the last author.
  • Adding a prefix and suffix around the authors.

Notes:

• I am looking into the useLayout hook that is being utilized in the Gutenberg / Core blocks since block spacing between elements in the "block" layout mentioned above would be advantageous.
• In the initial version I didn't see the need for distinct CoAuthors and CoAuthors Template blocks ( in the vein of Query Loop and Post Template blocks ). While thinking about how to solve the issue of context for author archives as well as saving prefixes and suffixes as HTML, the separation has become more appealing.
• I plan to work on REST API features next.

[douglas-johnson]

Since my last comment here I worked on:

• Added API endpoints
  
• Updated the edit component for the CoAuthors block to use the first API endpoint.
• Added the ability to turn the Display Name into a link to the author archive.
• Abandoned "Subscribe to existing CAP store so that a change to the assigned coauthors is reflected in the content."
  • Just like coauthors, other taxonomies like tags and categories require a refresh before they are reflected in the content. So the subscription idea is inconsistent with other user experiences.

I plan to work on avatars next.

[douglas-johnson]

Here's a video where I add coauthor bylines to a query loop on the front page through full site editing. I tried to click around to all the current features. I plan to work on layout settings next. I'm happy for feedback if anyone wants to try out the branch here.

cap-blocks-query-loop3.mp4

[GaryJones]

That's looking fantastic!

[alecgeatches]

@douglas-johnson Excellent demo! You've put a lot of work into customization in-editor and it looks amazing.

[douglas-johnson]

Since my last update I worked on layout settings as planned and tried to figure out how to provide the correct context to blocks used on the author archive.

I made a new branch when I started exploring the layout changes. It is available here: master...thoughtis:Co-Authors-Plus:issue#940/coauthor-blocks

Using block layout

I this video I use FSE to add Co-Authors to the Post Meta template part within the Single template. It uses the block layout which supports vertical spacing between coauthors.

cap-blocks-fse-single.mp4

Author archive context

In this video I add CAP blocks to the author archive template without wrapping them in the Co-Authors block.

To support this I added a filter on render_block_context that provides the queried author based on the author_name query var. This works in the condition where:

1. The request was for an author archive ( true === is_author() )
2. The block is not wrapped in a Co-Authors block like it would be if you used it in a query loop elsewhere on the author archive.

You can see that code here:
https://github.com/thoughtis/Co-Authors-Plus/blob/db8529990dd2d0dcc316ab9bd96f63e97af225fc/blocks/coauthor-display-name/class-cap-block-coauthor-display-name.php#L84

cap-blocks-fse-archive.mp4

Up Next

• Images
  • A block for guest author feature image
  • Option to hide the default gravatars or not show gravatars at all in avatar block.
• REST API
  • Use a schema instead of just making an associate array for the response data.
• Placeholders
  • Make a JavaScript module to provide unified placeholder data for editing templates in FSE.
  • Use a component for avatar block image placeholders instead of my made up SVGs.

[GaryJones]

Looking amazing! Intuitive, flexible, and just what's been missing all this time! Thank you for doing this.

[douglas-johnson]

Hi @GaryJones and @alecgeatches - I'm stopping by with one more demo. This time its for guest author feature images.

master...thoughtis:Co-Authors-Plus:issue#940/coauthor-blocks

With this working, I feel we have the intended features. There is still work I would like to do in documentation and developer experience as well as testing and fine tuning. I am out on vacation starting tomorrow and will be back on September 5th.

Post editor

cap-blocks-feature-image-post.mp4

Author archive in site editor

cap-blocks-feature-image-archive.mp4

New Changes

• Added coauthor feature image block.
• Updated avatar block with lessons learned from feature image.
• Updated display name block to allow changing the HTML element ( paragraph, span, headings )
• Added a Templating PHP class to do things like joining an array of HTML element attributes and rendering HTML elements with children.
• Updated author archive context so one filter function works for all the blocks.
• Updated REST API to support turning off avatars via site discussion options.
• Updated REST API with schema and tested ability to extend responses with rest_register_field
• Added custom store for FSE placeholder data with both server-side and client-side filters.
• Added a readme with info about how anyone else's custom blocks might utilize the author archive context and placeholder data.

Work before pull request

• PHP 7.4 compatibility.
• Testing with older versions of WordPress, I have only done 6.2 and 6.3 so far.
• Single build command for all blocks and related JavaScript assets.
• DRY the treatment of the "isLink" and "rel" attributes across blocks.
• Improve naming conventions.

[GaryJones]

Amazing 🤩

What's the difference between the Co-Author Avatar and Co-Author Feature Image blocks?

[douglas-johnson]

What's the difference between the Co-Author Avatar and Co-Author Feature Image blocks?

Avatar uses the avatar system. Its equivalent to calling get_avatar(). There are a limited number of sizes, they are always cropped square and will include Gravatars.

Feature Image is for higher resolution images and doesn't have the Gravatar fallback. Since it starts with an attachment id, we can provide the size, cropping and border settings from the core Feature Image block. Its similar to calling wp_get_attachment_image().