PLANET-7511 Migrate Articles block to Posts List block

[sagarsdeshmukh]

Ref. https://jira.greenpeace.org/browse/PLANET-7511

Summary

Articles block migration to post List block

---

Testing

1. Run this PR in your local environment.
2. Add an Articles block to a post or page. You can also directly copy/paste block code snippet below in the code editor:

<!-- wp:planet4-blocks/articles -->
<div class="wp-block-planet4-blocks-articles"><div data-hydrate="planet4-blocks/articles" data-attributes="{&quot;article_heading&quot;:&quot;Related Articles&quot;,&quot;articles_description&quot;:&quot;&quot;,&quot;article_count&quot;:3,&quot;tags&quot;:[],&quot;posts&quot;:[],&quot;post_types&quot;:[],&quot;read_more_text&quot;:&quot;Load more&quot;,&quot;read_more_link&quot;:&quot;&quot;,&quot;button_link_new_tab&quot;:false,&quot;ignore_categories&quot;:false}"></div></div>
<!-- /wp:planet4-blocks/articles -->

<!-- wp:planet4-blocks/articles {"article_heading":"Articles block with Select tags","articles_description":"Test description\u003cbr\u003eTags: Climate, Consumption, Oceans","article_count":4,"tags":[6,8,26]} -->
<div class="wp-block-planet4-blocks-articles"><div data-hydrate="planet4-blocks/articles" data-attributes="{&quot;article_heading&quot;:&quot;Articles block with Select tags&quot;,&quot;articles_description&quot;:&quot;Test description&lt;br&gt;Tags: Climate, Consumption, Oceans&quot;,&quot;article_count&quot;:4,&quot;tags&quot;:[6,8,26],&quot;posts&quot;:[],&quot;post_types&quot;:[],&quot;read_more_text&quot;:&quot;Load more&quot;,&quot;read_more_link&quot;:&quot;&quot;,&quot;button_link_new_tab&quot;:false,&quot;ignore_categories&quot;:false}"></div></div>
<!-- /wp:planet4-blocks/articles -->

<!-- wp:planet4-blocks/articles {"article_heading":"Articles block with Post types","articles_description":"test description\u003cbr\u003epost types: story, Press Release","article_count":2,"post_types":[16,14]} -->
<div class="wp-block-planet4-blocks-articles"><div data-hydrate="planet4-blocks/articles" data-attributes="{&quot;article_heading&quot;:&quot;Articles block with Post types&quot;,&quot;articles_description&quot;:&quot;test description&lt;br&gt;post types: story, Press Release&quot;,&quot;article_count&quot;:2,&quot;tags&quot;:[],&quot;posts&quot;:[],&quot;post_types&quot;:[16,14],&quot;read_more_text&quot;:&quot;Load more&quot;,&quot;read_more_link&quot;:&quot;&quot;,&quot;button_link_new_tab&quot;:false,&quot;ignore_categories&quot;:false}"></div></div>
<!-- /wp:planet4-blocks/articles -->

<!-- wp:planet4-blocks/articles {"article_heading":"Articles block with Manual override posts ","articles_description":"Test description\u003cbr\u003eManual override Posts","article_count":5,"posts":[256,260,263,1107,1111,1113]} -->
<div class="wp-block-planet4-blocks-articles"><div data-hydrate="planet4-blocks/articles" data-attributes="{&quot;article_heading&quot;:&quot;Articles block with Manual override posts &quot;,&quot;articles_description&quot;:&quot;Test description&lt;br&gt;Manual override Posts&quot;,&quot;article_count&quot;:5,&quot;tags&quot;:[],&quot;posts&quot;:[256,260,263,1107,1111,1113],&quot;post_types&quot;:[],&quot;read_more_text&quot;:&quot;Load more&quot;,&quot;read_more_link&quot;:&quot;&quot;,&quot;button_link_new_tab&quot;:false,&quot;ignore_categories&quot;:false}"></div></div>
<!-- /wp:planet4-blocks/articles -->

<!-- wp:planet4-blocks/articles {"article_heading":"","articles_description":"empty title"} -->
<div class="wp-block-planet4-blocks-articles"><div data-hydrate="planet4-blocks/articles" data-attributes="{&quot;article_heading&quot;:&quot;&quot;,&quot;articles_description&quot;:&quot;empty title&quot;,&quot;article_count&quot;:3,&quot;tags&quot;:[],&quot;posts&quot;:[],&quot;post_types&quot;:[],&quot;read_more_text&quot;:&quot;Load more&quot;,&quot;read_more_link&quot;:&quot;&quot;,&quot;button_link_new_tab&quot;:false,&quot;ignore_categories&quot;:false}"></div></div>
<!-- /wp:planet4-blocks/articles -->

3. Run the migrator command: npx wp-env run cli wp p4-run-activator
4. Check whether the migration worked as expected.
5. To reset the environment database back to the latest default content and repeat the tests, run: npm run db:reset.

[planet-4]

Test instance is ready 🚀

🌑 mars | admin | blocks report | CircleCI | composer-local.json

⌚ 2025.02.26 11:17:48

[Osong-Michael]

👍 tested on local, works as expected

[mardelnet]

@sagarsdeshmukh, shouldn't we remove the Articles block from the codebase, too?

[sagarsdeshmukh]

@sagarsdeshmukh, shouldn't we remove the Articles block from the codebase, too?

Yes, we should, but I’m waiting for confirmation on how to handle the 'Include Articles In Post' option if we remove the articles block. I’ve added a comment on JIRA.

[mardelnet]

Nice job @sagarsdeshmukh!
We also have to migrate the Additional CSS class(es).

[mardelnet]

@sagarsdeshmukh, we also have to migrate the Additional CSS class(es):

[mardelnet]

This is very picky and completely optional: I wonder if we should create a separate class for Query blocks since this migration and migration M037 share most of the code. By moving the reusable code to a separate class, it will be easier and faster to migrate Query blocks in the future and we'll avoid the Sonar Cloud analysis to fail because of duplicated code.

[Osong-Michael]

@sagarsdeshmukh, we also have to migrate the Additional CSS class(es):

Those classes we already add here, WP declares them as "Additional classes" since we added them during the block variation regsitration

[mardelnet]

@sagarsdeshmukh, we also have to migrate the Additional CSS class(es):

Those classes we already add here, WP declares them as "Additional classes" since we added them during the block variation regsitration

Thanks @Osong-Michael
Locally, when I add a new additional class to the Articles block, that class is not part of the Post List block after running the migration script.