Pattern Directory: Allow container blocks to pass validation if they have child-blocks

[ryelle]

Fixes #82 — Container blocks were not considered valid, because the content they have in innerHTML is technically empty, the actual child block content is in innerBlocks. This updates the validation code to check into innerBlocks too, so groups and columns are correctly validated.

It also updates how paragraphs are validated - now any empty paragraph is considered "empty", even if the user maybe customized the font or color. A pattern should contain more content than just an empty styled paragraph.

How to test the changes in this Pull Request:

1. Make sure the tests pass: yarn test:php or ✅ on the actions here
2. Create a Block Pattern in wp-admin
3. Add a group or column block, but don't change background color or any other attributes
   Or copy this content into the block editor (by switching to the code editor)

Group block code

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->

<!-- wp:image {"align":"center","id":null,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://s.w.org/images/core/5.8/portrait.jpg" alt="A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed." width="150" height="150"/></figure></div>
<!-- /wp:image -->

<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->

<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->

Columns block code

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"21px"},"color":{"text":"#000000"}}} -->
<p class="has-text-color" style="color:#000000;font-size:21px"><strong>We have worked with:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"24px","lineHeight":"1.2"}}} -->
<p style="font-size:24px;line-height:1.2"><a href="https://wordpress.org">EARTHFUND™<br>ARCHWEEKLY<br>FUTURE ROADS<br>BUILDING NY</a></p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer {"height":160} -->
<div style="height:160px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"24px","lineHeight":"1.2"}}} -->
<p style="font-size:24px;line-height:1.2"><a href="https://wordpress.org">DUBAI ROOFS<br>MAY WATSON STUDIO<br>Y.O.L<br>RUDIMENTAR</a></p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

4. Save the block pattern, it should successfully save, no validation errors.

[StevenDufresne]

It appears like self-closing blocks wouldn't pass. Not sure if that's intentional.

Tested using:

	/**
	 * Test valid block content: an archive block.
	 */
	public function test_valid_self_closing_block() {
		wp_set_current_user( self::$user );
		$response = $this->save_block_content( "<!-- wp:group --><div class=\"wp-block-group\"><!-- wp:archives /--></div><!-- /wp:group -->");
		$this->assertFalse( $response->is_error() );
	}

[ryelle]

Hmmm, I think it's okay to leave. The goal is to make sure we're accepting patterns that are sufficiently customized, "Does it meet some minimum size/length? (At least one block with non-default attributes or content?)" (see #22).

If either the group or archive block in your example was customized, that would pass - like either of these:

<!-- wp:group {"backgroundColor":"pale-cyan-blue"} -->
<div class="wp-block-group has-pale-cyan-blue-background-color has-background"><!-- wp:archives /--></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:archives {"displayAsDropdown":true,"showPostCounts":true} /--></div>
<!-- /wp:group -->

The error message might be the problem. We could update the error message to say "Pattern content should be customized" or something like that— none of these strings should be considered final :)

[StevenDufresne]

The error message might be the problem. We could update the error message to say "Pattern content should be customized" or something like that— none of these strings should be considered final :)

Ah fair. I think that would be helpful.

[StevenDufresne]

When you are ready.....