0

Why blocks.getSaveElement is not working for the core/social-link ? Is it because it is child of the core/social-links ?

When I modify example from the https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/, and replace core/cover with the core/social-link, it doesn't do anything:

function wrapCoverBlockInContainer( element, blockType, attributes ) {
    // skip if element is undefined
    if ( ! element ) {
        return;
    }

    // only apply to cover blocks
    if ( blockType.name !== 'core/social-link' ) { // replaced core/cover with core/social-link
        return element;
    }

    // return the element wrapped in a div
    return <div className="cover-block-wrapper">{ element }</div>;
}

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'my-plugin/wrap-cover-block-in-container',
    wrapCoverBlockInContainer
);
Improve this question
3
  • 1
    you need a higher order component to do this rather than a plain function
    – Tom J Nowell ♦
    Commented May 24 at 17:30
  • It works on editor.BlockEdit, but I can't find a way to do this on save
    – Tahi Reu
    Commented May 25 at 6:37
  • 1
    note that this all assumes a static block, if any of the core/social-link block is rendered in PHP then it doesn't matter what the save component generates it'll be ignored and PHP will be used. There's also a very high chance that you should not be doing this in the first place and there is a better way to do it, but without knowing why you want to do this it's hard to suggest the correct alternative. Generally what the code is trying to do is not good practice
    – Tom J Nowell ♦
    Commented May 25 at 16:47

1 Answer 1

Reset to default
2

That code probably does exactly what you wanted it to, and if we look at the database or try to copy the block we'd see the new <div> that was added. But core/social-link is rendered in PHP so it doesn't matter, and what the code is doing is not portable. When the code is deactivated or the content migrated/imported/syndicated the block will fail validation when opened in the editor.

See here for how WordPress renders that block: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/social-link/index.php

To wrap it in a div you need to do it in PHP by filtering the rendering of that block, not in javascript. Though there's a very very high chance that what you're trying to do is both unnecessary and bad practice.

For example, what the code is trying to do would be better done with a group block, then added as a block pattern. If you need to modify the core blocks that implies a mistake or a misunderstanding.

In this case I suspect you're trying to treat a block as a design unit, rather than a building block. Patterns built out of blocks are what are supposed to be the unit of design, not blocks themselves.

Improve this answer
2
  • Thanks Tom. What I want to do here is to add new custom icons. I already did it with PHP, but having to use both PHP and JS doesn't seem like the best way to do it, so I wanted to check if I am missing something here. But seems like not. cameronjonesweb.com.au/blog/…
    – Tahi Reu
    Commented May 27 at 6:58
  • Ah then this is an X Y problem. There’s a method in the github issue that tracks this problem involving block variants, but that couldn't have been left as an answer without knowing the original use case you aimed for
    – Tom J Nowell ♦
    Commented May 27 at 20:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.