feat(author-profile): add block variations for layout selection

[rbcorrales]

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:

When inserting the Author Profile block in a block theme, publishers can now choose from four layout variations: Default (avatar left), Avatar right, Centered, and Compact (no avatar). Each variation provides the same set of author fields so publishers can remove what they don't need without worrying about losing fields they can't add back.

After choosing a layout, a "Change layout" button in the toolbar lets publishers switch to a different variation. A confirmation dialog warns that switching will replace the current block content. A "Reset" button restores the current variation's original layout.

Closes NPPD-1221.

How to test the changes in this Pull Request:

1. Open a post editor in a block theme environment.
2. Insert a new Author Profile block and verify a layout picker appears with 4 options.
3. Select each variation and verify the inner blocks match the expected layout.
4. In the list view and sidebar, verify each variation shows its name (e.g., "Author Profile (Centered)") with a blue icon.
5. Click "Change layout" in the toolbar and verify the currently active variation is highlighted.
6. Click a different variation, confirm the dialog appears, accept it, and verify inner blocks are replaced.
7. Cancel the dialog on a different attempt and verify nothing changes.
8. Remove some inner blocks, then click "Reset" and verify the block resets to the current variation's full template.
9. Add the Author Profile block in the site editor and verify the variation picker and layout switching work correctly.

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?

[Copilot]

Pull request overview

This pull request adds block variation support to the Author Profile block, enabling publishers to choose from four different layout options when inserting the block in a block theme. The implementation follows WordPress block editor conventions by using the standard block variations API along with custom variation switcher UI for changing layouts after initial selection.

Changes:

• Adds four layout variations (Default, Avatar right, Centered, and Compact) with visual picker UI
• Refactors template definitions into a separate module with shared constants for reusability
• Implements variation switching with confirmation dialog to prevent accidental content loss

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/blocks/author-profile/variations.js	Defines four block variations with custom icons and layout configurations
src/blocks/author-profile/templates.js	Extracts and organizes block templates with shared constants for all variations
src/blocks/author-profile/index.js	Registers variations with the block
src/blocks/author-profile/edit.js	Adds variation picker, switcher modal, and auto-populate logic
src/blocks/author-profile/block.json	Adds variation attribute to track selected layout
src/blocks/author-profile/editor.scss	Styles for the variation switcher modal UI

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[laurelfulford]

This works really well, @rbcorrales! The layouts make for some solid starting points for publishers, and it's all really smooth! I just have a couple nits 🙂

For this testing step:

6. Click a different variation, confirm the dialog appears, accept it, and verify inner blocks are replaced.

I don't get the confirmation dialog at this point, I only get it when I've actually changed something within the layout then switch it. How it works seems correct to me, both logically and based on the code, but I just wanted to flag it in case the current behaviour's unexpected.

The rest is kind if UI/UX related so I defer to @thomasguillot on each point if he feels differently:

I think it might be good to make the variation picker behaviour a little closer to core blocks. For example:

In the Query Block, the icon used for the block remains the same regardless of starting point -- the Author Profile block's icon changes to reflect the layout. This makes it a little harder identify by icon alone, and also makes it seem like that icon will let you change the layout:

The icon used for the layout is actually the same as the Post Template block:

@thomasguillot might be able to suggest a different icon. Or alternatively, for consistency we could technically get away with not allowing the layout switch 🙂 Using the Query block as an example again, once it's inserted, you can edit it but to change the layout to one of other starting points, you have to reinsert it.

The last one's just around how the block is labelled once inserted:

Probably not standard, but once it's inserted a user can change the layout, making the label maybe no necessary/inaccurate.

Just let me know if you have any questions about any of that!

[laurelfulford]

Suggested change

	instructions={ __( 'Select a layout to start with.', 'newspack-blocks' ) }
	instructions={ __( 'Select a layout to start with:', 'newspack-blocks' ) }

Teeniest tiniest nit, but it helps the label line up with the Query Block.

[rbcorrales]

@laurelfulford sure, I can update that to a semicolon. I just followed the "Select a type." pattern that @thomasguillot previously established here, in this commit: d5d61f2, if he's okay with this.

[laurelfulford]

I don't get the confirmation dialog at this point, I only get it when I've actually changed something within the layout then switch it. How it works seems correct to me, both logically and based on the code, but I just wanted to flag it in case the current behaviour's unexpected.

The docs confirmed we're on the same page with this one, so you can disregard that bit! It's really just the UI/UX stuff but whatever @thomasguillot says there trumps any feedback I have 🙂 I think the only bit I'd think should be a blocker from my perspective is the main icon changing.

[thomasguillot]

I agree with @laurelfulford's comments.

• The block needs to stay the same we have now (Icon, Title, etc...)
• For the placeholder. I'd start with:
  • Step 1: "Select a layout to start with:" (rename "Default" to "Avatar left")
  • Step 2: "Select a type:"
• We don't need a "Change layout" and a "Reset". The block is simple enough users can just delete/re-insert.

[thomasguillot]

Updated the icons to visually match the style of the query block: aba5f33

[rbcorrales]

I don't get the confirmation dialog at this point, I only get it when I've actually changed something within the layout then switch it. How it works seems correct to me, both logically and based on the code, but I just wanted to flag it in case the current behaviour's unexpected.

Yeah, sorry, I changed the behavior in 8a8a06a after I created the PR to detect changes explicitly, but didn't update the PR description.

Probably not standard, but once it's inserted a user can change the layout, making the label maybe no necessary/inaccurate.

The label and icon were updated dynamically depending on the currently selected layout, so this wasn't an issue. I followed the pattern from here, where the icons and title changed to reflect the current layout:
https://developer.wordpress.org/news/2023/08/an-introduction-to-block-variations/#adding-custom-icons

I understand that consistency with other blocks is preferred and that cleanliness in the layout is important, but it's not great UX for authors to have to remove and re-add a block just because of a layout change. This reduces the ability to quickly audit/prototype how a specific layout will look in the current context without having to do like 8+ extra clicks. But that's only my personal take 🙂

That said, I'll remove all the requested UI elements.

[rbcorrales]

@laurelfulford editor updates addressed here: ecd06ef.

[laurelfulford]

Thanks @rbcorrales!

Yeah, sorry, I changed the behavior in 8a8a06a after I created the PR to detect changes explicitly, but didn't update the PR description.

No worries! I kind of figured that was the case (and then your docs confirmed it!).

The label and icon were updated dynamically depending on the currently selected layout, so this wasn't an issue. I followed the pattern from here, where the icons and title changed to reflect the current layout:

That's kind of like the Group/Row/Stack blocks too. I think the difference is that they are like discreet blocks themselves -- you can insert a Row block directly from the block picker as well as inserting a Group block and picking Row as the variation. The Text & Media block in that example looks the same way; the actual Media & Text block's icon doesn't change when you swap the image alignment.

This reduces the ability to quickly audit/prototype how a specific layout will look in the current context without having to do like 8+ extra clicks.

That's fair! I think keeping the block simpler is a good trade off, though 🙂 Publishers may want to test different layouts at first, but once they pick one they'll be consistently choosing that one when they insert the block.

Thanks for making the changes! They look good to me.

I only have one other suggestion but it can be in this PR or a separate one: for the left-aligned layout, the avatar ends up underneath the author bio text on mobile. There's a block style that's baked into the Newspack Blocks plugin that will fix this -- to use it:

• The columns block should have the avatar in the first column
• The columns block should have the 'Move first column to second' style (is-style-first-col-to-second) -- this will swap the column order on desktop, but leave the avatar in the first column on mobile.

(I also found a super random bug that my test site's setup was masking, but I'll file that separately -- it's nothing to do with the changes here!).

[rbcorrales]

Thanks! I tracked the vertical position bug in NPPD-1349.
I'll merge this one for now!

[github-actions]

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