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().

[GaryJones]

How does the Co-Author Feature Image block differ from the core Feature Image block?

[douglas-johnson]

How does the Co-Author Feature Image block differ from the core Feature Image block?

The core block needs to be in a post context. The co-author block uses the author context I've set up. It supports resizing, aspect ratios, and border settings, but I didn't incorporate the overlay capability of the core block.

[IvanPigarev]

When will these changes see the light of day? So missing working with the plugin in the block editor :( Very much waiting for the new version!

[douglas-johnson]

When will these changes see the light of day? So missing working with the plugin in the block editor :( Very much waiting for the new version!

Hi @IvanPigarev I'm happy to know someone else wants to use this. I can't promise when it will be released, but I will be back at work September 5th and working on the pull request as soon as possible after that. You are welcome to test with the current branch and provide any feedback.

https://github.com/thoughtis/Co-Authors-Plus/tree/issue%23940/coauthor-blocks

[philcable]

@douglas-johnson The blocks are looking great, and I'd very much like to use them on a project that's launching in a couple months. To that end, please let me know if there's anything specific you'd like to get feedback or thorough testing on, or if there's any other way I can help out!

[douglas-johnson]

Hi @philcable thanks so much for the offer. I would be happy for your feedback on whatever use case is relevant to your project. If you could use the current branch to implement some portion of your project and let me know how it goes that would be great.

I am espescially interested to have someone test the ability to make a custom block and extend the REST API data to support whatever unique data is in their custom block. But, I understand that would be an unnecessary time commitment if it's not relevant to your project.

[douglas-johnson]

@philcable I want to send an update in case you are actually trying to add a custom block that uses author data. I just updated the pull request to address some feedback and there are three changes that would need to be reflected in a custom block.

• The name of the author context changed to co-authors-plus/author
  • Using in the editor
  • Using in a render_callback
• The name of the author placeholder data store changed to co-authors-plus/blocks
  • Using this placeholder data in the editor
  • Extending this placeholder data on the server-side
• The way you opt-in to using author context in the author archive template got easier.
  • Previously it required a server-side filter. Now it uses the useContext property from the block metadata.
  • Example from Co-Author Description Block

[philcable]

Thank you for keeping me posted, @douglas-johnson! I haven't had a chance to test things out just yet, but I'll let you know when I do.

[audunmb]

Any more work happening on this? This is the exact functionality I need, but it seems on the wp.org site that this plugin is more or less abandonded for the last 8 months? I can't contribute with code, but if I can do anything else to help, please let me know.

[alecgeatches]

@audunmb Great question! @douglas-johnson's work in #997 is essentially done, and it's my fault that this hasn't been merged in yet. We'll get this tested and merged this week.

[alecgeatches]

@douglas-johnson The next release with your changes is very nearly ready to go in #1032! I'm going to wait until next week to check with @GaryJones and ensure the release is correct, but that should be straightforward. Thank you for all of your hard work and patience, we'll get this in shortly.

[douglas-johnson]

@alecgeatches That's great! I'm looking forward to getting it into production.

[douglas-johnson]

@alecgeatches I imagine we can close this issue. Before we say goodbye to it I wanted to gauge your interest in adding support for Social Icons. We needed this at work and I think I came up with something decent. It can be a separate issue though.

Removed AIM, YahooIM and Jabber. Added TikTok, Instagram and Twitter. Kept the website input.
https://github.com/thoughtis/cata-co-authors-plus/blob/0.6.3/includes/meta-fields/class-meta-fields.php

Added functions to get URLs. They are forgiving so that either usernames / handles or URLs can be stored.
https://github.com/thoughtis/cata-co-authors-plus/blob/0.6.3/includes/api/block-schema/social-links/global-functions.php

Used those functions to add social_links to the coauthors/v1/ API responses.
https://github.com/thoughtis/cata-co-authors-plus/blob/0.6.3/includes/api/block-schema/social-links/class-social-links.php

Added a filter on register_block_type_args so the core/social-link block is opted in to co-author context.
Added a filter on render_block so we can update the url attribute of a core/social-link block when the co-author context is available.
https://github.com/thoughtis/cata-co-authors-plus/blob/0.6.3/blocks/social-links/social-links.php

Now we can drop the Social Icons block into the Co-Authors block, select the services we want to display, and they will be filled in on render based on what data is available for that author. In my example video my Guest Author profile has several filled in, but the other author has none.

co-authors-social-icons.mp4

[dhanson-wp]

Social Icons block is a great idea! +1.