Try: Custom block insertion hooks

[joshuatf]

Changes proposed in this Pull Request:

This PR uses a custom callback for the before/after block visitors and introduces custom hooks to allow insertion of blocks. It differs in the current block hooks in that:

• We can insert the entire block and block attributes in a single hook
• We have access to the entire anchor block and attributes for conditional insertion
• Inserted blocks can also be hooked onto to further insert blocks

How to test the changes in this Pull Request:

1. Install the latest WP 6.5 beta 2 release
2. Make sure the product editor is enabled under WooCommerce -> Settings -> Advanced -> Features.
3. Navigate to Products -> Add new
4. Note the inserted blocks

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi @ockham, @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[joshuatf]

This needs further investigation to make sure this won't break things. I suspect this could be problematic depending on existing chunks in innerContent.

[ockham]

I think you need to prepend/append the hooked block to innerBlocks rather than innerContent:

Suggested change

	array_unshift( $parsed_inserted_block['innerContent'], $first_chunk );
	array_unshift( $parsed_inserted_block['innerBlocks'], $first_chunk );

Additionally, you also need to insert a null in the corresponding position in innerContent, so it should actually read

Suggested change

	array_unshift( $parsed_inserted_block['innerContent'], $first_chunk );
	array_unshift( $parsed_inserted_block['innerBlocks'], $first_chunk );
	array_unshift( $parsed_inserted_block['innerContent'], null );

The way it works is that innerContent can have items that are either HTML strings, or null to mark a position where an item from innerBlocks needs to be interpolated. E.g.

$group_block_with_some_inner_block = array(
	'blockName' => 'core/group',
	'attrs'     => array(),
	'innerBlocks' => array( $some_inner_block ),
	'innerContent' => array(
		'<div class="wp-block-group">',
		null,
		'</div>'
	),
);

[ockham]

This is still not the full picture BTW if you want to account for some subtleties: As the Group block example demonstrates, you might not actually want to put the null marker for first_child in the very first position in innerContent (or the one for last_child in the very last one), as you might want to account for the wrapping HTML:

$group_block_with_some_inner_block = array(
	'blockName' => 'core/group',
	'attrs'     => array(),
	'innerBlocks' => array( $hooked_first_child, $some_inner_block ),
	'innerContent' => array(
		null, // $hooked_first_child is going to be rendered outside the wrapping div :/
		'<div class="wp-block-group">',
		null,
		'</div>'
	),
);

Instead, you'll likely want to find the first (last) non-HTML location in innerContent. For the original Block Hooks implementation (in GB's WP 6.4 compat shim), we ended up with the following logic: https://github.com/WordPress/gutenberg/blob/98552b2486b52e4dd3c90775c2a029b95e64253c/lib/compat/wordpress-6.4/block-hooks.php#L157-L182

[github-actions]

Test Results Summary

Commit SHA: 73fce83

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	287	0	1	21	0	309	13m 8s

⚠️ Warning

Please address the following issues prior to merging this pull request:

• FAILED/BROKEN TESTS. There were failed and/or broken API and E2E tests.

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.