-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Footnotes: Attempt to iterate into nested blocks that use useInnerBlocksProps in the save function #52676
Conversation
…cksProps in the save function
Size Change: -2 B (0%) Total Size: 1.43 MB
ℹ️ View Unchanged
|
@@ -81,7 +83,7 @@ function addValuesForElements( children, ...args ) { | |||
function addValuesForBlocks( values, blocks ) { | |||
for ( let i = 0; i < blocks.length; i++ ) { | |||
const { name, attributes, innerBlocks } = blocks[ i ]; | |||
const saveElement = getSaveElement( name, attributes ); | |||
const saveElement = getSaveElement( name, attributes, innerBlocks ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should avoid passing this down as block because they'll be serialised, which is unperformant.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created an alternative PR: #52682
return; | ||
// `useInnerBlocksProps.save()` will return a `RawHTML` element, | ||
// so use this as an indicator to recurse into the children. | ||
return addValuesForBlocks( ...args ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How would you know that this is the correct RawHTML instance for which to process inner blocks?
Looks like #52682 has been merged already, closing this one for now. Thanks for jumping in on this one @andrewserong ! |
What?
Fixes #52628 (hopefully!)
Over in #52241
getRichTextValues
was updated to work withInnerBlocks.Content
, however as a result, it seems that nested blocks that don't use that component stopped being iterated over for extracting footnotes (e.g. the Group block, which usesuseInnerBlocksProps.save()
directly).This PR attempts to recognise where in the block's output inner blocks are being rendered, by looking for
RawHTML
— if we match against that, then assume that we need to iterate into the block's inner blocks. The assumption in this PR is that we won't have blocks that useuseInnerBlocksProps.save()
andRawHTML
in their output intentionally. This is a bit of a hack, however it is preferable to an alternative:In my first attempt at this PR, I thought I'd try adding a line to
addValuesToBlocks
so that it could recurse into itself around here: — basically, after working through all the elements for a block, iterate over its inner blocks. By doing that, we could then remove the explicit check forInnerBlocks.Content
. The problem, though, is that this would mean that the iterating over children would always happen after all the markup for the current block is processed. For the Quote block, this resulted in footnotes being in the wrong order, as in that block,InnerBlocks.Content
appears beforeRichtText.Content
. So, we need some way to ensure that the iteration always occurs at the correct place within the block's final markup.Looking for
RawHTML
is imperfect, but for the moment appears to achieve better results than we have on trunk. I'm very happy to throw this PR away if folks have better ideas about how to achieve this!Why?
Prior to this PR,
getRichTextValues
only iterates over blocks that useInnerBlocks.Content
(e.g. the Quote block, or List blocks). This means that blocks that are contained in Group blocks are never reached for extracting footnotes, as they do not useInnerBlocks.Content
.How?
innerBlocks
togetSaveElement
so that inner blocks are rendered to aRawHTML
component, so that we can useRawHTML
as a flag for when to iterate over inner blocks.addValuesForElement
, useRawHTML
in addition toInnerBlocks.Content
as a flag to continue iterating into inner blocks.Testing Instructions
Screenshots or screencast
0
or*