feat: custom byline interfce

[allysonsouza]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This Pull Request implements the feature to allow the selection of author tokens from authors selected on Co-Authors Plus to compound a custom byline with them.

How to test the changes in this Pull Request:

1. Go to a post edit page and assign authors to the post on co-authors plus panel
2. Below it, you will see the Newspack Custom Byline panel. Set the toggle to active to enable custom byline.
3. You will see the custom byline field, which is a div with contenteditable. Below it you should see the authors assigned to the post as buttons that will insert the tokens on the content when clicked.
4. Click on buttons to add the token to the content
5. Click on buttons inside the byline content to remove token
6. Also, the tokens should be removed when editions are made to then with delete/backspace for example
7. Save the post, reload the page and see if the custom byline saved is what is expected
8. Check if the custom byline is editable as expected too after saving it

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[claudiulodro]

Overall I think this is coming together! The UX of it feels good. I noticed a few quirks in my testing:

1. In general it's kind of hard to read once there are a few authors in there:

Not sure if we should reduce the size of the author boxes or how best to handle that. What do you think, @thomasguillot?

2. Using the arrow keys, you can go into one of the boxes and then type to modify the content. I think it should not be editable.

3. If you select a portion of the text that includes a box and delete, the box doesn't go back into the available authors section:

4. Authors are always inserted at the end of the text box. I think the best experience would be for them to be inserted at the cursor position, otherwise it's tricky to edit existing bylines to add/change authors around.

[leogermani]

This is starting to look pretty good!

Here are two things I noticed:

• This feature should also work without CoAuthors Plus. In that case, it would list only the normal post author
• The input should be pre-filled with the default by byline
• The value stored in the post meta field should follow what's described here

The idea of storing the ID and the name is to have a fallback in case the user is deleted. When we render the byline, we'll always read the ID and get the Display name from the database, but if the ID is gone, we'll use the name that is stored there.

[leogermani]

Ah, and before you get crazy and go deep in a rabbit role, we DON'T NEED TO SUPPORT Guest Authors

[thomasguillot]

Overall I think this is coming together! The UX of it feels good. I noticed a few quirks in my testing:

1. In general it's kind of hard to read once there are a few authors in there:

Not sure if we should reduce the size of the author boxes or how best to handle that. What do you think, @thomasguillot?

You're right, this doesn't look good. Let me think about a different approach here.

[thomasguillot]

Note: The panel should simply be named "Byline", not "Newspack Custom Byline"

[thomasguillot]

Can we please make sure the style matches Core's FormTokenField

Also we can use @wordpress/base-styles/colors rather than hardcoding the values.

[miguelpeixe]

I've just tested on a fresh post and I still have issues with the backspace interaction:

custom-byline.mov

Another problem I faced while drafting the new post was that the additional authors only became available after I saved and refreshed the post. Ideally, the component would be aware of the edited changes and update the component's available tokens.