Skip to content

Feature: Added CoreListItem Block and updated CoreList block #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
colinmurphy wants to merge 4 commits into from
Closed

Feature: Added CoreListItem Block and updated CoreList block #331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d3a0bc1
Added a CoreListItem block and updated the CoreList block with new fi…
colinmurphy Jan 14, 2025
0503245
Merge branch 'main' into feature-refactor-core-list-block
colinmurphy Jan 20, 2025
78c1edc
Made changes and removed some of the new schema as not required.
colinmurphy Jan 20, 2025
0793285
phpcs fixes
colinmurphy Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions .changeset/khaki-forks-prove.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
"@wpengine/wp-graphql-content-blocks": patch
---

Added CoreListItem block for WPGraphQL Content Blocks.

```gql
query postQuery($id: ID!) {
post(id: $id, idType: DATABASE_ID, asPreview: false) {
title
editorBlocks(flat: false) {
name
... on CoreList {
type
name
renderedHtml
innerBlocks {
... on CoreListItem {
type
name

renderedHtml
}
}
}
}
}
}
```

```json
{
"data": {
"post": {
"title": "Hello world!",
"editorBlocks": [
{
"name": "core/list",
"type": "CoreList",
"renderedHtml": "\n<ol class=\"wp-block-list\">\n<li>List item 1</li>\n\n\n\n<li>List item 2\n<ul class=\"wp-block-list is-style-default\">\n<li>Child list item 1\n<ul class=\"wp-block-list\">\n<li>Third level list item</li>\n</ul>\n</li>\n\n\n\n<li>Child list item 2</li>\n</ul>\n</li>\n\n\n\n<li>List item 3</li>\n\n\n\n<li>List item 4</li>\n</ol>\n",
"innerBlocks": [
{
"type": "CoreListItem",
"name": "core/list-item",
"renderedHtml": "\n<li>List item 1</li>\n"
},
{
"type": "CoreListItem",
"name": "core/list-item",
"renderedHtml": "\n<li>List item 2\n<ul class=\"wp-block-list is-style-default\">\n<li>Child list item 1\n<ul class=\"wp-block-list\">\n<li>Third level list item</li>\n</ul>\n</li>\n\n\n\n<li>Child list item 2</li>\n</ul>\n</li>\n"
},
{
"type": "CoreListItem",
"name": "core/list-item",
"renderedHtml": "\n<li>List item 3</li>\n"
},
{
"type": "CoreListItem",
"name": "core/list-item",
"renderedHtml": "\n<li>List item 4</li>\n"
}
]
},
{
"name": "core/paragraph"
}
]
}
}
}
```
27 changes: 27 additions & 0 deletions includes/Blocks/CoreListItem.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php
/**
* Core List Item Block
*
* @package WPGraphQL\ContentBlocks\Blocks
*/

namespace WPGraphQL\ContentBlocks\Blocks;

/**
* Class CoreListItem
*/
class CoreListItem extends Block {
/**
* {@inheritDoc}
*
* @var array|null
*/
protected ?array $additional_block_attributes = [
'cssClassName' => [
'type' => 'string',
'selector' => 'li',
'source' => 'attribute',
'attribute' => 'class',
],
];
}
123 changes: 123 additions & 0 deletions tests/unit/CoreListTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

namespace WPGraphQL\ContentBlocks\Unit;

/**
* @group block
* @group core-list
*/
final class CoreListTest extends PluginTestCase {
/**
* The ID of the post created for the test.
Expand Down Expand Up @@ -701,4 +705,123 @@ className
$block['attributes'],
);
}


public function test_retrieve_core_list_item_values(): void {
$block_content = <<<HTML
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>List item 1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 2<!-- wp:list {"className":"is-style-checkmark-list"} -->
<ul class="wp-block-list is-style-checkmark-list"><!-- wp:list-item -->
<li>Child list item 1<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Third level list item</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Child list item 2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 3</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 4</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
HTML;
// Set post content.
wp_update_post(
[
'ID' => $this->post_id,
'post_content' => $block_content,
]
);

$query = '
query postQuery($id: ID!) {
post(id: $id, idType: DATABASE_ID, asPreview: false) {
title
editorBlocks(flat: false) {
name
... on CoreList {
type
name
renderedHtml
innerBlocks {
... on CoreListItem {
type
name

renderedHtml
}
}
}
}
}
}
';

$variables = [
'id' => $this->post_id,
];

$actual = graphql( compact( 'query', 'variables' ) );

$this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' );
$this->assertArrayHasKey( 'data', $actual, 'The data key should be present' );
$this->assertArrayHasKey( 'post', $actual['data'], 'The post key should be present' );

$editorBlocks = $actual['data']['post']['editorBlocks'];
$this->assertEquals( 1, count($editorBlocks));

$editorBlock = $editorBlocks[0];
$this->assertEquals( 'core/list', $editorBlock['name'], 'The block name should be core/list' );
$this->assertEquals( 'CoreList', $editorBlock['type'], 'The block type should be CoreList' );
$this->assertArrayHasKey( 'renderedHtml', $editorBlock);
$this->assertArrayHasKey( 'innerBlocks', $editorBlock);

$innerBlocks = $editorBlock['innerBlocks'];
$this->assertEquals( 4, count($innerBlocks));
$firstBlock = $innerBlocks[0];
$secondBlock = $innerBlocks[0];

/**
* No child list items
*/
$this->assertEquals('CoreListItem', $firstBlock['type'], 'The block type should be CoreListItem');
$this->assertEquals('core/list-item', $firstBlock['name'], 'The block name should be core/list-item');
$this->assertEquals('<li>List item 1</li>', trim($firstBlock['renderedHtml']), 'The block should have valid HTML block');


/**
* Child list items
*/
$html = <<<HTML
<li>List item 2
<ul class="wp-block-list is-style-checkmark-list">
<li>Child list item 1
<ul class="wp-block-list">
<li>Third level list item</li>
</ul>
</li>
<li>Child list item 2</li>
</ul>
</li>
HTML;

$html = trim(preg_replace('/\s+/', ' ', $html));
$renderedHtml = trim(preg_replace('/\s+/', ' ', $innerBlocks[1]['renderedHtml'] ));
$this->assertEquals($html, $renderedHtml, 'The block should have valid HTML block');

}
}
Loading