feat: custom byline interface by allysonsouza · Pull Request #3746 · Automattic/newspack-plugin

allysonsouza · 2025-02-12T21:54:44Z

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:

Go to a post edit page and assign authors to the post on co-authors plus panel
Below it, you will see the Newspack Custom Byline panel. Set the toggle to active to enable custom byline.
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.
Click on buttons to add the token to the content
Click on buttons inside the byline content to remove token
Also, the tokens should be removed when editions are made to then with delete/backspace for example
Save the post, reload the page and see if the custom byline saved is what is expected
Check if the custom byline is editable as expected too after saving it

Things to check:

The authors set on Co-Authors Plus are being displayed as tokens to be used on Custom Byline?
When I click on token "+", the author token is inserted at the end of the byline?
Does the token get removed after a change on it's content is made (by using delete, backspace or by adding additional characters)?
Does the token get removed when I click on "x" on it after inserted into the byline?
Does additional space after the token is inserted to allow more text to be typed after it?
Does the byline get save properly?
After saving, does the available tokens (the ones that aren't in use) are correctly displayed below the byline field?

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:

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?

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.

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:

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 · 2025-02-13T21:48:45Z

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 · 2025-02-13T21:49:29Z

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

thomasguillot · 2025-02-14T14:06:38Z

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

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 · 2025-02-14T14:07:18Z

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

thomasguillot · 2025-02-14T14:12:34Z

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 · 2025-02-20T16:31:41Z

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.

allysonsouza · 2025-02-25T00:54:33Z

The latest commit fixes the backspace interaction, @miguelpeixe. About authors, it was expected that for the first version that would be acceptable (to have to refresh the page to make them available to use on byline), can you confirm that, @claudiulodro?

miguelpeixe · 2025-02-25T13:54:58Z

Thanks for the revisions @allysonsouza!

Backspace interaction is working well for deleting the token when the cursor is at the end of it. I'm facing a couple of issues still:

The cursor repositions to the beginning after deleting a token
Removing (via delete or backspace) multiple selected text doesn't restore the token

bylines.mov

allysonsouza · 2025-03-21T22:16:20Z

After struggling to handle the state of the content, which was not being managed by React state, @goldenapples started working on a simplification to use onInput instead of MutationObserver, which lead to a simpler and shorter code.

He's proposing it on this PR on our fork, I've been testing it and it seems like we need to deal with the removal of the tokens itself when there's a change to the token content (like adding characters or removing them with backspace or delete).

That seems possible to be handled by onInput too, by adding an onInput on each token to remove itself when changes happen and to keep the onInput on the wrapper contenteditable div.

…uthors

…tingsPanel

leogermani · 2025-03-26T18:55:07Z

Heads up that I've implemented the data structure changes that this PR does in trunk to allow us to move on with some tests. This might create conflicts that should be easily resolved - just ignore the changes on trunk

#3863

miguelpeixe

Thank you for all the revisions, the code is well organized and very readable!

I ran into a couple of issues, but I'm not considering them blockers because we can address them separately:

When backspacing a token, my cursor gets reset to position zero
Making changes to the post authors does not update the available tokens. This is also the case after saving the changes. Only after a page refresh I'm able to use the new authors. This only happens when using Co-Authors Plus.

Other than that, I'm able to make changes to the byline and save with different token/text variations without issues.

changes addressed

github-actions · 2025-03-28T21:01:20Z

Hey @allysonsouza, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

matticbot · 2025-04-02T11:55:49Z

🎉 This PR is included in version 6.3.0-hotfix-just-to-test-ci-changes.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

* fix: path to autoload (#3808) * fix(ia): render all emails on reset (#3867) This fixes an issue where resetting an email template in Newspack > Settings > Emails would only render Woo templates on success. * refactor(corrections): remove feature flag (#3866) * feat: custom byline interface (#3746) * feat: modify textarea to RichText and add TagInlineBlock with dummy authors * feat: fetch authors from co-authors plus and set tokens on BylinesSettingsPanel * chore: improve inline documentation * feat: [WIP] add author tokens on click * feat: append users to the end of the byline * feat: add author tokens to custom byline * feat: handling tokens with vanilla JS (WIP) * feat: useRef to manage tokens in use * chore: improve inline docs * feat: check custom byline after DOM ready * chore: addEventListener trough ref instead of DOM directly Also adds the return of a function on useEffect to allow React cleanup on unmount * feat: display icons on tokens (plus to insert and close to remove) * feat: add mutation observer to remove tokens on erasing with backspace/delete * chore: enhance inline documentation * fix: stylize tokens according to FormTokenField * fix: remove token when characterData changes * fix: improved mutation observer callback logic to update data correctly * fix: initilize only on DOM ready and main byline element ready * fix: properly add the mutation observer after child component is ready * fix: implement setTokensInUse function to better reuse code * fix: split byline "textarea" and tokens to avoid unwanted re-rendering * feat: parse meta with <Author> before rendering byline * feat: store byline meta according to the expected format * chore: refacot bylineParser function * feat: make custom bylines to work without co-author plus activated * feat: make custom byline field to be displayed on a modal * fix: mystype newspackByline.is_co_authors_plus_active * fix: adding space after token insertion at the end of byline * fix: improve byline innerHTML assignment * fix: typo isTokensdReady * docs: update docs * fix: remove non used authors query * fix: cubic-bezier transition typo * fix: remove updateBylineMeta from click on x/removal callback event * fix: remove unnecessary "backwards" compatibility since it's new feature * refactor: replace MutationObserver with event listeners Replaced the MutationObserver with an event listener, replaced some of the DOM interaction with a useRef element, and tried to refactor some of the data getters and setters. * fix: update effect registration so it only runs on mounting * refactor: remove unneded "remove token" handler * fix: look up the byline meta on mount, not just on initial render * fix: set contenteditable="false" on token spans Prevents editing the content in these spans, and makes it so that deleting (with backspace) will remove the whole span at once rather than editing within the span. * chore: add some missing docblocks and fix some lint issues * fix: set default insert location to end of editable field Updates the "cursorPos" variable logic to use the end of the line if there's no cursor position set yet, and to add a non-breaking space at the end of the text if necessary. Also updates the white-space styling of the editable area, to ensure that users can select any point in the text they may need to. * fix: remove margin from last token to prevent confusion with whitespace * feat: add preview to sidebar interface * fix: rename panel to Byline * fix: make modal width fixed * feat: add function to parse meta for preview * feat: default custom byline on first toggle * feat: set default custom byline meta on toggle * feat: update styles to match new designs * feat: update styles to match designs * chore: cleanup, comments, organization --------- Co-authored-by: Leo Germani <leogermani@automattic.com> Co-authored-by: goldenapples <goldenapplesdesign@gmail.com> Co-authored-by: Joeleen Kennedy <joeleen@humanmade.com> * feat: frontend display of bylines (#3856) * feat: modify textarea to RichText and add TagInlineBlock with dummy authors * feat: fetch authors from co-authors plus and set tokens on BylinesSettingsPanel * chore: improve inline documentation * feat: [WIP] add author tokens on click * feat: append users to the end of the byline * feat: add author tokens to custom byline * feat: handling tokens with vanilla JS (WIP) * feat: useRef to manage tokens in use * chore: improve inline docs * feat: check custom byline after DOM ready * chore: addEventListener trough ref instead of DOM directly Also adds the return of a function on useEffect to allow React cleanup on unmount * feat: display icons on tokens (plus to insert and close to remove) * feat: add mutation observer to remove tokens on erasing with backspace/delete * chore: enhance inline documentation * fix: stylize tokens according to FormTokenField * fix: remove token when characterData changes * fix: improved mutation observer callback logic to update data correctly * fix: initilize only on DOM ready and main byline element ready * fix: properly add the mutation observer after child component is ready * fix: implement setTokensInUse function to better reuse code * fix: split byline "textarea" and tokens to avoid unwanted re-rendering * feat: parse meta with <Author> before rendering byline * feat: store byline meta according to the expected format * chore: refacot bylineParser function * feat: make custom bylines to work without co-author plus activated * feat: make custom byline field to be displayed on a modal * fix: mystype newspackByline.is_co_authors_plus_active * fix: adding space after token insertion at the end of byline * fix: improve byline innerHTML assignment * docs: update docs * fix: typo isTokensdReady * fix: remove non used authors query * fix: cubic-bezier transition typo * fix: remove updateBylineMeta from click on x/removal callback event * fix: remove unnecessary "backwards" compatibility since it's new feature * feat: add byline output to pre_newspack_posted_by hook * Tried to simplify some things Replaced the MutationObserver with an event listener, replaced some of the DOM interaction with a useRef element, and tried to refactor some of the data getters and setters. * Update effects on mounting * Remove unneded remove handler. * Look up the byline on mount, not just on initial render. * feat: modify textarea to RichText and add TagInlineBlock with dummy authors * feat: fetch authors from co-authors plus and set tokens on BylinesSettingsPanel * chore: improve inline documentation * feat: [WIP] add author tokens on click * feat: append users to the end of the byline * feat: add author tokens to custom byline * feat: handling tokens with vanilla JS (WIP) * feat: useRef to manage tokens in use * chore: improve inline docs * feat: check custom byline after DOM ready * chore: addEventListener trough ref instead of DOM directly Also adds the return of a function on useEffect to allow React cleanup on unmount * feat: display icons on tokens (plus to insert and close to remove) * feat: add mutation observer to remove tokens on erasing with backspace/delete * chore: enhance inline documentation * fix: stylize tokens according to FormTokenField * fix: remove token when characterData changes * fix: improved mutation observer callback logic to update data correctly * fix: initilize only on DOM ready and main byline element ready * fix: properly add the mutation observer after child component is ready * fix: implement setTokensInUse function to better reuse code * fix: split byline "textarea" and tokens to avoid unwanted re-rendering * feat: parse meta with <Author> before rendering byline * feat: store byline meta according to the expected format * chore: refacot bylineParser function * feat: make custom bylines to work without co-author plus activated * feat: make custom byline field to be displayed on a modal * fix: mystype newspackByline.is_co_authors_plus_active * fix: adding space after token insertion at the end of byline * fix: improve byline innerHTML assignment * fix: typo isTokensdReady * docs: update docs * fix: remove non used authors query * fix: cubic-bezier transition typo * fix: remove updateBylineMeta from click on x/removal callback event * fix: remove unnecessary "backwards" compatibility since it's new feature * refactor: replace MutationObserver with event listeners Replaced the MutationObserver with an event listener, replaced some of the DOM interaction with a useRef element, and tried to refactor some of the data getters and setters. * fix: update effect registration so it only runs on mounting * refactor: remove unneded "remove token" handler * fix: look up the byline meta on mount, not just on initial render * fix: set contenteditable="false" on token spans Prevents editing the content in these spans, and makes it so that deleting (with backspace) will remove the whole span at once rather than editing within the span. * chore: add some missing docblocks and fix some lint issues * fix: set default insert location to end of editable field Updates the "cursorPos" variable logic to use the end of the line if there's no cursor position set yet, and to add a non-breaking space at the end of the text if necessary. Also updates the white-space styling of the editable area, to ensure that users can select any point in the text they may need to. * fix: remove margin from last token to prevent confusion with whitespace * feat: add preview to sidebar interface * fix: rename panel to Byline * fix: make modal width fixed * feat: add function to parse meta for preview * feat: default custom byline on first toggle * feat: set default custom byline meta on toggle * feat: replace author shortcodes on output * feat: update styles to match new designs * feat: update styles to match designs * chore: cleanup, comments, organization * feat: return an array of coauthors plus authors object, for authors in use in the byline * chore: few tweaks and linting --------- Co-authored-by: Leo Germani <leogermani@automattic.com> Co-authored-by: goldenapples <goldenapplesdesign@gmail.com> Co-authored-by: Joeleen Kennedy <joeleen@humanmade.com> * fix: handle missing Mailchimp API key in auth status (#3873) * fix: remove Mailchimp for WooCommerce from wizard (#3876) * fix(notices): fix PHP notice (#3872) * chore: remove unused `react-daterange-picker` package (#3879) * chore: prevent PHP notice with is_singular (#3874) * fix(guest-contributors): return them in authors query * fix: remove the Design link from the Appearance menu (#3878) * feat(esp-sync): add constant contact support (#3832) * fix: add constant contact list id setting * fix: add constant contact to Sync settings * fix: add constant contact to reader activation settings * chore: refactor esp settings component * fix: regressions --------- Co-authored-by: dkoo <derrick.koo@automattic.com> * ci: build distributable after release --------- Co-authored-by: Ron Chambers <116242607+ronchambers@users.noreply.github.com> Co-authored-by: Rasmy Nguyen <raz@automattic.com> Co-authored-by: Takshil Kunadia <71006004+Takshil-Kunadia@users.noreply.github.com> Co-authored-by: Allyson <2000638+allysonsouza@users.noreply.github.com> Co-authored-by: Leo Germani <leogermani@automattic.com> Co-authored-by: goldenapples <goldenapplesdesign@gmail.com> Co-authored-by: Joeleen Kennedy <joeleen@humanmade.com> Co-authored-by: Camilla Krag Jensen <naxoc@users.noreply.github.com> Co-authored-by: matticbot <sysops+ghmatticbot@automattic.com> Co-authored-by: Adam Cassis <adam@adamcassis.com> Co-authored-by: Adam Cassis <adam.cassis@automattic.com> Co-authored-by: Laurel <laurel.fulford@automattic.com> Co-authored-by: dkoo <derrick.koo@automattic.com>

# [6.3.0-alpha.1](v6.2.2...v6.3.0-alpha.1) (2025-04-04) ### Bug Fixes * **guest-contributors:** return them in authors query ([3703559](3703559)) * handle missing Mailchimp API key in auth status ([#3873](#3873)) ([6df6fda](6df6fda)) * **ia:** render all emails on reset ([#3867](#3867)) ([c6a71c0](c6a71c0)) * **notices:** fix PHP notice ([#3872](#3872)) ([cc928b2](cc928b2)) * path to autoload ([#3808](#3808)) ([97fa24a](97fa24a)) * remove Mailchimp for WooCommerce from wizard ([#3876](#3876)) ([f6b2484](f6b2484)) * remove the Design link from the Appearance menu ([#3878](#3878)) ([e24f147](e24f147)) ### Features * custom byline interface ([#3746](#3746)) ([289f55e](289f55e)) * **esp-sync:** add constant contact support ([#3832](#3832)) ([8198956](8198956)) * frontend display of bylines ([#3856](#3856)) ([9feeba8](9feeba8))

matticbot · 2025-04-04T14:00:30Z

🎉 This PR is included in version 6.3.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.4.0-alpha.1](v6.3.0...v6.4.0-alpha.1) (2025-04-09) ### Bug Fixes * **guest-contributors:** return them in authors query ([3703559](3703559)) * handle missing Mailchimp API key in auth status ([#3873](#3873)) ([6df6fda](6df6fda)) * **ia:** render all emails on reset ([#3867](#3867)) ([c6a71c0](c6a71c0)) * **notices:** fix PHP notice ([#3872](#3872)) ([cc928b2](cc928b2)) * path to autoload ([#3808](#3808)) ([97fa24a](97fa24a)) * remove Mailchimp for WooCommerce from wizard ([#3876](#3876)) ([f6b2484](f6b2484)) * remove the Design link from the Appearance menu ([#3878](#3878)) ([e24f147](e24f147)) ### Features * custom byline interface ([#3746](#3746)) ([289f55e](289f55e)) * **esp-sync:** add constant contact support ([#3832](#3832)) ([8198956](8198956)) * frontend display of bylines ([#3856](#3856)) ([9feeba8](9feeba8))

matticbot · 2025-04-09T15:52:26Z

🎉 This PR is included in version 6.4.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.4.0](v6.3.1...v6.4.0) (2025-04-14) ### Bug Fixes * **guest-contributors:** return them in authors query ([3703559](3703559)) * handle missing Mailchimp API key in auth status ([#3873](#3873)) ([6df6fda](6df6fda)) * **ia:** render all emails on reset ([#3867](#3867)) ([c6a71c0](c6a71c0)) * **notices:** fix PHP notice ([#3872](#3872)) ([cc928b2](cc928b2)) * path to autoload ([#3808](#3808)) ([97fa24a](97fa24a)) * remove Mailchimp for WooCommerce from wizard ([#3876](#3876)) ([f6b2484](f6b2484)) * remove the Design link from the Appearance menu ([#3878](#3878)) ([e24f147](e24f147)) ### Features * custom byline interface ([#3746](#3746)) ([289f55e](289f55e)) * **esp-sync:** add constant contact support ([#3832](#3832)) ([8198956](8198956)) * frontend display of bylines ([#3856](#3856)) ([9feeba8](9feeba8))

matticbot · 2025-04-14T16:55:30Z

🎉 This PR is included in version 6.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

allysonsouza self-assigned this Feb 12, 2025

allysonsouza changed the title ~~Feat: custom byline interfce~~ feat: custom byline interfce Feb 12, 2025

allysonsouza added the [Status] Needs Review The issue or pull request needs to be reviewed label Feb 13, 2025

allysonsouza marked this pull request as ready for review February 13, 2025 18:44

allysonsouza requested a review from a team as a code owner February 13, 2025 18:44

claudiulodro previously requested changes Feb 13, 2025

View reviewed changes

claudiulodro added [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Feb 13, 2025

allysonsouza changed the title ~~feat: custom byline interfce~~ feat: custom byline interface Feb 25, 2025

allysonsouza requested a review from claudiulodro March 13, 2025 20:49

leogermani reviewed Mar 18, 2025

View reviewed changes

Comment thread src/bylines/index.js Outdated

goldenapples reviewed Mar 18, 2025

View reviewed changes

goldenapples force-pushed the feat/byline-interface branch from b49dbc5 to 0867dfa Compare March 25, 2025 12:22

allysonsouza added 8 commits March 25, 2025 15:15

feat: modify textarea to RichText and add TagInlineBlock with dummy a…

a367a74

…uthors

feat: fetch authors from co-authors plus and set tokens on BylinesSet…

c18b8b5

…tingsPanel

chore: improve inline documentation

f319231

feat: [WIP] add author tokens on click

a971770

feat: append users to the end of the byline

c7fce76

feat: add author tokens to custom byline

63563d9

feat: handling tokens with vanilla JS (WIP)

772a101

feat: useRef to manage tokens in use

7d74e71

feat: add function to parse meta for preview

d403417

goldenapples force-pushed the feat/byline-interface branch from ef23903 to d403417 Compare March 25, 2025 19:18

leogermani mentioned this pull request Mar 26, 2025

feat: update custom bylines data structure #3863

Merged

6 tasks

allysonsouza and others added 5 commits March 27, 2025 12:37

feat: default custom byline on first toggle

95ac5a6

feat: set default custom byline meta on toggle

1781934

feat: update styles to match new designs

111b539

feat: update styles to match designs

c82d575

chore: cleanup, comments, organization

b2edadb

joeleenk added [Status] Needs Review The issue or pull request needs to be reviewed and removed [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Mar 28, 2025

miguelpeixe approved these changes Mar 28, 2025

View reviewed changes

Merge branch 'trunk' into feat/byline-interface

65fd450

leogermani merged commit 289f55e into trunk Mar 28, 2025

leogermani deleted the feat/byline-interface branch March 28, 2025 21:01

github-actions Bot added the needs-changelog label Mar 28, 2025

leogermani removed the needs-changelog label Mar 28, 2025

matticbot added the released on @hotfix/just-to-test-ci-changes label Apr 2, 2025

matticbot added the released on @alpha label Apr 4, 2025

matticbot added the released label Apr 14, 2025

Conversation

allysonsouza commented Feb 12, 2025 • edited by joeleenk Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

claudiulodro left a comment

Choose a reason for hiding this comment

Uh oh!

leogermani commented Feb 13, 2025

Uh oh!

leogermani commented Feb 13, 2025

Uh oh!

thomasguillot commented Feb 14, 2025

Uh oh!

thomasguillot commented Feb 14, 2025

Uh oh!

thomasguillot commented Feb 14, 2025

Uh oh!

miguelpeixe commented Feb 20, 2025

Uh oh!

allysonsouza commented Feb 25, 2025

Uh oh!

miguelpeixe commented Feb 25, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

allysonsouza commented Mar 21, 2025

Uh oh!

leogermani commented Mar 26, 2025

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 28, 2025

Uh oh!

matticbot commented Apr 2, 2025

Uh oh!

matticbot commented Apr 4, 2025

Uh oh!

matticbot commented Apr 9, 2025

Uh oh!

matticbot commented Apr 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

allysonsouza commented Feb 12, 2025 •

edited by joeleenk

Loading