How to completely delete a block?

Blocks
1

I was working my way through the Flex Theme tutorial and I somehow broke my ‘logo’ block, a sub-block of the ‘logos’ section block.

When exported, the ‘logos’ block displays 5 instances of my broken ‘logo’ block, each with the error,

“Your site doesn’t include support for the “pinegrow-flex-tutorial/logo” block. You can leave this block intact or remove it entirely.”

When I delete each ‘logo’ block and save the page, the broken blocks reappear in the parent.

In Pinegrow, I found that if I change the parent and sub-block types to Dynamic PHP (but not Hybrid), they load as expected in the editor, but I don’t need a Dynamic PHP block.

I attempted to fix the issue by removing all of the block’s WP actions and attributes in Pinegrow. I saw another topic that advised closing the page and reopening it to make the page ‘forget’ about the block, which I did, as well as exported the theme. I then attempted to recreate a default React block with the same ID ‘logo’, with the same result: 5 broken blocks in the editor with the ‘not supported’ message.

I then removed the ‘logos’ parent block from the editor and saved the page. I recreated the ‘logo’ block with a new block id: ‘logo1’. A new ‘logo1’ directory was created in the theme’s blocks directory, and I was surprised that the old ‘logo’ block directory was still present. When I reloaded the page and added the ‘logos’ parent block, I now saw 5 broken blocks with the ‘not supported’ message, but the block ID had changed to ‘logo1’.

What’s going on here? Is there a way to completely delete a block from Pinegrow and have WP forget about it?

2

I’ve found the reason my blocks are breaking. The edit and save methods in [block].js return el('div', { ...blockProps }, [' ', props[...bunch of stuff here]). This should be an unbroken line of code representing the elements of the block, but in my case one of the strings in this line contained a line break, which broke the code.

...loading: 'lazy', sizes: '100vw,
(min-width: 1024px) 32vw' , alt: propOrDefault( ...

When I remove the line break in my IDE, the block works again. However, when I re-export the block, the line break returns. I’m not sure why it suddenly appeared in the first place but hopefully this can help the team find a resolution.

2 Likes
3

Edit: I figured out why it’s breaking in the first place. I don’t know if this is specific to a particular image I’m using, but when I add an <img> element and configure it in PG by clicking the ‘Calculate Sizes’ button in the Properties panel, the resulting string contains a line break, which seems like a possible bug. When I edit this to one line, the block works again.

2 Likes