⚛️ Use a wp-inner-block attribute for each inner block
#77
Conversation
|
We cannot use a regexp that detects the class name for inner blocks, as there could be blocks without it (e.g., Paragraph). However, we can mark all inner blocks of interactive blocks, adding a callback to the Then, we can read that flag during |
DAreRodz
changed the title
wp-inner-blocks wrapper and add wp-inner-block attribute for each childwp-inner-block attribute for each inner block
|
There's an issue with inner blocks' hydration. I'm taking a look. |
Some text nodes with white spaces were making hydration fail (again). I fixed it by preserving those nodes that appeared between inner blocks. |
There was a problem hiding this comment.
LGTM!!
I'm going to merge this and resolve conflicts in #74.
| const isInnerBlock = ({ props }) => props && 'wp-inner-block' in props; | ||
| if (children.some(isInnerBlock)) { |
There was a problem hiding this comment.
Note for the future: this is probably not the best approach because, although key in obj is fast, it's doing it multiple times.
If we continue with this approach, we could create a nice set of benchmarks for the toVdom function 🙂
| if (children.some(isInnerBlock)) { | ||
| const first = children.findIndex(isInnerBlock); | ||
| const last = children.findLastIndex(isInnerBlock); | ||
| innerBlocksFound = children.slice(first, last + 1); |
There was a problem hiding this comment.
Note for the future: As we are not doing out-of-order hydration for the moment, we could bypass the toVdom processing of the client component inner nodes.
| $class_pattern = '/class="\s*(?:[\w\s-]\s+)*' . $block_classname . '(?:\s+[\w-]+)*\s*"/'; | ||
| $class_replacement = '$0 ' . $block_wrapper_attributes; | ||
| $block_content = preg_replace( $class_pattern, $class_replacement, $block_content, 1 ); | ||
| $pattern = '/^\s*<[^>]+/'; |
There was a problem hiding this comment.
Ok, so this is now looking for the first tag opener, whatever it is, and it could be replaced with this, right?
$w = new WP_HTML_Tag_Processor($block_content);
$w->next_tag();
foreach ($attributes as $key => $value) {
$w->set_attribute($key, $value);
}With a bit more logic for the style and class attributes.
| * TODO: use `WP_HTML_Tag_Processor` (see https://github.com/WordPress/gutenberg/pull/42485) once | ||
| * the API is released. | ||
| */ | ||
| function bhe_append_attributes($block_name, $block_content, $attributes) |
There was a problem hiding this comment.
$block_name doesn't seem to be used anymore.
Will fix #76