feat: Correction box & Loop item blocks

[Takshil-Kunadia]

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:

Addresses https://app.asana.com/0/1209292256643614/1209292256643625

How to test the changes in this Pull Request:

Testing Corrections Box Block:-

1. Create a post add corrections/clarifications.
2. Add Corrections box block to see the corrections.
3. Save the post and view the corrections on the front-end.
4. Modify the corrections on the editor/Add new corrections and click on refresh button to view updated corrections.

Testing Corrections Loop template:-

1. Create a new Page and select Archive Newspack Corrections template.
2. Edit the template to change the title/description.
3. View the page on front-end.

For individual testing of the Corrections Loop item block

1. Add a Query Loop block and add Post Template and Pagination blocks inside it.
2. In Post Template block, Add correction Item block.
3. Set Post type as Corrections in Query Loop block settings. Per page count can also be set here.
4. View the corrections archive.

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?

Demo:-

Corrections Box block:-

Screen.Recording.2025-02-17.at.12.27.17.PM.mov

Archive Corrections Loop Item/Template block:-

Screen.Recording.2025-02-17.at.12.25.41.PM.mov

[thomasguillot]

Hi @Takshil-Kunadia , I pushed a few changes. Overall it works well but I noticed the blocks need to support all the settings properly.

Also, the idea of the Corrections block (the one you named Correction Box) is to have it within the Single template. Not inside an actual post.

With the "Block Spacing" setting, it's supposed to control the spacing between corrections

[thomasguillot]

Can we change "Archive Newspack Corrections" to "Corrections Archive"?

[thomasguillot]

See comments:
#312 (comment)
#312 (comment)

[Takshil-Kunadia]

Thanks! @thomasguillot for taking a look.

Hi @Takshil-Kunadia , I pushed a few changes. Overall it works well but I noticed the blocks need to support all the settings properly.

I have fixed this, all settings are supported now.

With the "Block Spacing" setting, it's supposed to control the spacing between corrections

The blockGap setting will work partially ( spacing is visible in front-end but not in the editor ), blockGap doesn't work well with ServerSideRender. It seems to be a core issue. If you can confirm this, I will raise it on Gutenberg and solve it.

Also, the idea of the Corrections block (the one you named Correction Box) is to have it within the Single template. Not inside an actual post.

Yes, this block will work in the Single template.

Please review 🙇

[thomasguillot]

In the editor, the styles are being applied to 2 divs.

We also need the block to come with some default settings:

• Font size: small
• Text (and link) colour: contrast-3
• Block spacing: spacing--30

Overall, I do think the empty state can be improved (and it will fix the way it looks when added to a Template):

1. Change the placeholder to some text: "This is the Corrections block, it will display all the corrections and clarifications". If the block is added to a post we can even add more context to a new paragraph: "[...] There are no corrections or clarifications for this post."
2. In a template, we don't need the refresh functionality
3. Can we avoid the whole "loading corrections" placeholder since it's empty? Especially when it's added to a template

[Takshil-Kunadia]

Thanks for the input @thomasguillot .

The blockgap is not working because it doesn't seem to work well with SSR blocks. Should I raise an issue?(#312 (comment))

[thomasguillot]

The blockgap is not working because it doesn't seem to work well with SSR blocks. Should I raise an issue?(#312 (comment))

Sorry @Takshil-Kunadia, I clearly missed this. I don't think it'll be fixed anytime soon but it's worth reporting, yes. 👍

[Takshil-Kunadia]

@thomasguillot Had a dig at the mentioned issues.

I do think the empty state can be improved

Agreed, added a separate UI for site editor with the custom message as you mentioned. No loading placeholders & refresh.

In the editor, the styles are being applied to 2 divs.

This shouldn't be the case. Can you please confirm this behaviour?

We also need the block to come with some default settings

I also hit a road block with this one as this is a know issue of Gutenberg( ref: WordPress/gutenberg#7342 ), we can set defaults for block support styles and they do appear in the editor as expected, but these attributes do not get saved unless there is a manual change in one of the settings. So if this block is added, since the styles are available in editor it will display the default styles but they won't be saved and take effect in the front-end. This is what it results in:-

Editor	Front-end
Default Markup on Block insert	Ideally what should be saved

Due to this, I don't feel confident in adding default block support styles for this block. Regardless, if you feel it is a necessity, I'll add it 🙇 .

[thomasguillot]

This shouldn't be the case. Can you please confirm this behaviour?

Yes, it’s fixed. Not sure what happened.

[thomasguillot]

I also hit a road block with this one as this is a know issue of Gutenberg

2018! Wow... ok let's ignore default settings 👍

[thomasguillot]

Looks great. Thank you @Takshil-Kunadia. I have one more request... I forgot to comment on this:

Had to add the layout support as it is necessary for blockGap to work. (WordPress/gutenberg#53254)

I didn't realise we needed layout to support blockGap. I don't like this. Can we remove blockGap (and layout) and have the .correction margin top/bottom to be --wp--preset--spacing--30 (note: first-item should have top: 0, and last-item should have bottom: 0)

[leogermani]

Thanks @thomasguillot and @Takshil-Kunadia ,

Sorry to do this again, but once this is ready to ship, I think it actually should live somewhere else. I discussed with @laurelfulford and it makes sense for this to live in the main plugin, alongside the rest of the feature implementation. Isn't that one of the beauties of Block Themes? Now we can more easily have theme agnostic features.

We could also argue to add it to the newspack-blocks plugin, but we often say we want to merge that with the main plugin so...

[Takshil-Kunadia]

No worries @leogermani 😄 , created a PR to add the blocks to plugin. Automattic/newspack-plugin#3787. We can safely close this PR.

cc: @thomasguillot @laurelfulford