About the code for next steps tips in Transforms block

[miminari]

Hi, thank you so much for sharing such excellent recipes!

I have tried them up a bit to take them up at the Meetup with @t-hamano and others. I want to report a small error in the following area.

https://blockdevelopercookbook.com/recipes/block-transforms/

const transformers = {
    to: [
        {
            type: 'block',
            blocks: [ 'core/cover' ],
            transform: ( { message }, innerBlocks ) => {
                const newInnerBlocks = [
                    ...innerBlocks,
                    createBlock( 'core/paragraph', {
                        align: 'center',
                        content: message,
                        fontSize: 'large',
                        placeholder: 'Write title…',
                    } ),
                ];

                return createBlock(
                    'core/cover',
                    {
                        customOverlayColor: '#be0b24',
                    },
                    newInnerBlocks
                );
            },
        },
    ],
    from: [
        {
            type: 'block',
            blocks: [ 'core/cover' ],
            transform: ( attributes, innerBlocks ) => {
                const [ firstBlock ] = innerBlocks;
                const { content } =
                    firstBlock.attributes || 'More that meets the eye!';
                return createBlock( 'block-developers-cookbook/transforms', {
                    message: content,
                } );
            },
        },
    ],
};
export default transformers;

This handling of content would result in an error when the cover block is empty, so it would be better to do the following.

const content =
    ( firstBlock?.name === 'core/paragraph' &&
        firstBlock?.attributes?.content ) ||
        'More that meets the eye!';

I'm sorry to be so detailed. It is a nice Next Step, and it would be fantastic if it got better.

[ryanwelcher]

Thank you for opening this issue!

I'll test this out and get it updated ASAP so it's in place for the meet up.

[ryanwelcher]

I just did some testing on this and I can't actually get it to break. It doesn't seem possible to have an empty cover block as the the default block (paragraph) will always be added back if all blocks removed manually. I created a cover with only an image block inside and when I transformed it, it used the default text as expected.

I also don't want to restrict the inner blocks to only core/paragraph blocks as others like the core/heading and core/code blocks have the content attribute.

That being said, I do think that the syntax I am using is odd so I think I'm going to change it from

const { content } = firstBlock.attributes || 'More that meets the eye!';

to your suggestion of:

const content = firstBlock?.attributes?.content || 'More that meets the eye!';

Thanks again for opening the issue!

[t-hamano]

Hi @ryanwelcher!

This problem occurs when you try to convert immediately after inserting a cover block, that is, when the cover block has a placeholder.

https://github.com/ryanwelcher/block-developer-cookbook/assets/54422211/9de2687c-1c16-4b71-b8a6-353d73eadedc

However, this issue seems to have been resolved in #28 🚀