feat: add custom bylines by chickenn00dle · Pull Request #3667 · Automattic/newspack-plugin

chickenn00dle · 2025-01-11T16:52:52Z

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:

Closes https://app.asana.com/0/1208894036683495/1208945901567231 and https://app.asana.com/0/1208894036683495/1208945901567229

This PR adds a barebones custom byline feature to posts behind a NEWSPACK_BYLINES_ENABLED feature flag.

How to test the changes in this Pull Request:

Go to any post edit page
Confirm a new Newspack Custom Byline panel is present in the post editor sidebar
Enable the custom byline
Enter some text and confirm the byline appears in the post editor above the content
Add an author link to the byline by using the <Author id=USER_ID>Name</Author> tag
Confirm a link appears in the byline
Change the author ID to one that is not on the site
Confirm the link disappears but the author name is still present in the byline
Try to add any invalid tag (<Invalid>) and confirm an alert appears warning you only Author is supported
Disable custom byline and confirm the byline disappears from the post editor
Re-enable and confirm byline reappears as it was before

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?

chickenn00dle · 2025-01-14T00:23:00Z

+	const prependBylineToContent = text => {
+		const contentEl = document.querySelector( '.wp-block-post-content' );
+		if ( contentEl ) {
+			let bylineEl = document.getElementById( BYLINE_ID );
+			if ( ! bylineEl ) {
+				bylineEl = document.createElement( 'div' );
+				bylineEl.id = BYLINE_ID;
+				contentEl.insertBefore( bylineEl, contentEl.firstChild );
+			}
+			if ( isFetching ) {
+				bylineEl.innerHTML = __( 'Loading…', 'newspack-plugin' );
+				return;
+			}
+			// If there are author tags
+			if ( /<Author id=(\d+)>/.test( text ) ) {
+				console.info( 'Updating byline…' ); // eslint-disable-line no-console
+				text = text.replace( /<Author id=(\d+)>([^<]+)<\/Author>/g, ( match, authorId, authorName ) => {
+					const authorData = authors.find( a => a.id === parseInt( authorId ) );
+					return authorData ? `<a href="/author/${ authorData.name }">${ authorName }</a>` : authorName;
+				} );
+			}
+			bylineEl.innerHTML = text;
+		}
+	};


This is another super hacky solution to getting the byline to render in the editor. Ideally we replace this when implementing the full feature.

chickenn00dle · 2025-01-14T00:23:55Z

@leogermani, I've got this PR mostly ready for review assuming its enough to render the byline in the post editor only for the purposes of migration. I didn't want to do too much work on rendering this on the front-end without understanding the requirements fully here.

That said, if we'd rather figure this out now, I can get that added in the PR as well.

leogermani

The link was not added for me att first. Then I noticed you were checking to see if the ID exists, but the fetch for authors in the useEffect only returns 10 authors, so it will never find the ID I was using.

But even when I used one of the returned IDs, the link was broken, with nothing after the /author/ part.

I don't think we need to verify anything at this point. Just create a link. And I think we can go siteurl.com/?author=$ID, no need to get their slugs.

Finally, let's also add a filter to the_content and render the byline on the front end as well. This will make QA easier

chickenn00dle · 2025-01-17T16:43:30Z

Thanks for the review @leogermani!

I don't think we need to verify anything at this point. Just create a link. And I think we can go siteurl.com/?author=$ID, no need to get their slugs.

Sure thing! Updated in f8ec6b8

let's also add a filter to the_content and render the byline on the front end as well. This will make QA easier

Makes sense. Added in f8ceb44

leogermani

I've added a few more things to the Readme. Thanks for the changes!

github-actions · 2025-01-17T22:08:12Z

Hey @chickenn00dle, 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! ❤️

# [5.13.0-alpha.1](v5.12.2...v5.13.0-alpha.1) (2025-01-23) ### Bug Fixes * add supported gateways check ([#3650](#3650)) ([74f7773](74f7773)) * **corrections:** replace deprecated sanitize method ([#3694](#3694)) ([ce50e24](ce50e24)) * remove support for legacy form checkout ([#3691](#3691)) ([46a3c16](46a3c16)) * **wcs:** expire manual subscriptions after on-hold duration ([#3681](#3681)) ([658416c](658416c)) ### Features * add custom bylines ([#3667](#3667)) ([3f45a6f](3f45a6f)) * rate limit checkout attempts ([#3678](#3678)) ([d275524](d275524))

matticbot · 2025-01-23T19:47:06Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [5.13.0](v5.12.5...v5.13.0) (2025-02-03) ### Bug Fixes * add supported gateways check ([#3650](#3650)) ([74f7773](74f7773)) * **corrections:** replace deprecated sanitize method ([#3694](#3694)) ([ce50e24](ce50e24)) * remove support for legacy form checkout ([#3691](#3691)) ([46a3c16](46a3c16)) * **wcs:** expire manual subscriptions after on-hold duration ([#3681](#3681)) ([658416c](658416c)) ### Features * add custom bylines ([#3667](#3667)) ([3f45a6f](3f45a6f)) * rate limit checkout attempts ([#3678](#3678)) ([d275524](d275524)) * **reader-revenue:** add PayPal Payments gateway to wizard ([#3665](#3665)) ([1476eed](1476eed))

matticbot · 2025-02-03T20:08:33Z

🎉 This PR is included in version 5.13.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

chickenn00dle added the wip label Jan 11, 2025

chickenn00dle force-pushed the feat/add-custom-bylines branch from 1f7fe38 to 5094dbd Compare January 11, 2025 21:22

chickenn00dle added 4 commits January 13, 2025 14:43

feat: add custom bylines

42708a7

feat: add byline textarea and meta

1c4afac

fix: correctly update meta

dc226f9

feat: render byline in editor

5a259e9

chickenn00dle force-pushed the feat/add-custom-bylines branch from 7790cc7 to 5a259e9 Compare January 13, 2025 22:17

chickenn00dle added 2 commits January 13, 2025 17:22

feat: add readme

2d4b7c8

fix: handle author link

64c71cf

chickenn00dle commented Jan 14, 2025

View reviewed changes

chickenn00dle marked this pull request as ready for review January 14, 2025 00:23

chickenn00dle requested a review from a team as a code owner January 14, 2025 00:23

chickenn00dle added [Status] Needs Review The issue or pull request needs to be reviewed and removed wip labels Jan 14, 2025

fix: use correct author links

6b6de23

chickenn00dle force-pushed the feat/add-custom-bylines branch from 757b191 to 6b6de23 Compare January 14, 2025 00:25

leogermani requested changes Jan 17, 2025

View reviewed changes

chickenn00dle added 2 commits January 17, 2025 11:21

fix: remove author validation

f8ec6b8

fix: output byline on post

f8ceb44

chickenn00dle requested a review from leogermani January 17, 2025 16:43

docs: more info to README

334f5d4

leogermani approved these changes Jan 17, 2025

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Jan 17, 2025

chickenn00dle merged commit 3f45a6f into trunk Jan 17, 2025

chickenn00dle deleted the feat/add-custom-bylines branch January 17, 2025 22:08

github-actions Bot added the needs-changelog label Jan 17, 2025

chickenn00dle removed the needs-changelog label Jan 17, 2025

matticbot added the released on @alpha label Jan 23, 2025

matticbot added the released label Feb 3, 2025

leogermani mentioned this pull request Mar 26, 2025

feat: update custom bylines data structure #3863

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add custom bylines#3667

feat: add custom bylines#3667
chickenn00dle merged 10 commits into
trunkfrom
feat/add-custom-bylines

chickenn00dle commented Jan 11, 2025 •

edited

Loading

Uh oh!

chickenn00dle Jan 14, 2025

Uh oh!

chickenn00dle commented Jan 14, 2025

Uh oh!

leogermani left a comment

Uh oh!

chickenn00dle commented Jan 17, 2025

Uh oh!

leogermani left a comment

Uh oh!

github-actions Bot commented Jan 17, 2025

Uh oh!

matticbot commented Jan 23, 2025

Uh oh!

matticbot commented Feb 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

chickenn00dle commented Jan 11, 2025 • edited 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!

chickenn00dle Jan 14, 2025

Choose a reason for hiding this comment

Uh oh!

chickenn00dle commented Jan 14, 2025

Uh oh!

leogermani left a comment

Choose a reason for hiding this comment

Uh oh!

chickenn00dle commented Jan 17, 2025

Uh oh!

leogermani left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 17, 2025

Uh oh!

matticbot commented Jan 23, 2025

Uh oh!

matticbot commented Feb 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chickenn00dle commented Jan 11, 2025 •

edited

Loading