Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix renderInnerBlocks so it doesn't change prop names in the DOM #8471

Merged
merged 1 commit into from
Feb 27, 2023
Merged
Changes from all commits
Commits
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
21 changes: 15 additions & 6 deletions assets/js/atomic/utils/render-parent-block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ const renderInnerBlocks = ( {
children,
// Current depth of the children. Used to ensure keys are unique.
depth = 1,
}: renderInnerBlocksProps ): ( JSX.Element | null )[] | null => {
}: renderInnerBlocksProps ): ( string | JSX.Element | null )[] | null => {
if ( ! children || children.length === 0 ) {
return null;
}
Expand All @@ -147,11 +147,10 @@ const renderInnerBlocks = ( {
* convert the HTMLElement to a React component.
*/
const { blockName = '', ...componentProps } = {
key: `${ block }_${ depth }_${ index }`,
...( node instanceof HTMLElement ? node.dataset : {} ),
className: node instanceof Element ? node?.className : '',
};

const componentKey = `${ block }_${ depth }_${ index }`;
const InnerBlockComponent = getBlockComponentFromMap(
blockName,
blockMap
Expand Down Expand Up @@ -190,13 +189,20 @@ const renderInnerBlocks = ( {
} )
: undefined;

// We pass props here rather than componentProps to avoid the data attributes being renamed.
return renderedChildren
? cloneElement(
parsedElement,
componentProps,
{
key: componentKey,
...( parsedElement?.props || {} ),
},
renderedChildren
)
: cloneElement( parsedElement, componentProps );
: cloneElement( parsedElement, {
key: componentKey,
...( parsedElement?.props || {} ),
} );
}

// This will wrap inner blocks with the provided wrapper. If no wrapper is provided, we default to Fragment.
Expand All @@ -215,7 +221,10 @@ const renderInnerBlocks = ( {
showErrorBlock={ CURRENT_USER_IS_ADMIN as boolean }
>
<InnerBlockComponentWrapper>
<InnerBlockComponent { ...componentProps }>
<InnerBlockComponent
key={ componentKey }
{ ...componentProps }
>
{
/**
* Within this Inner Block Component we also need to recursively render it's children. This
Expand Down