Extending Core Blocks Markup

Morning all!

I’ve been working with the new Gutenberg editor for a while now and I’ve extending some core blocks & I’ve created my own custom blocks.

One thing I haven’t been able to workout yet though is, if it’s possible to extend the current markup of core blocks?

For example, if I wanted to add an <a> tag inside the cover block? I’ve made a plugin that adds the ability to add a link to the cover block and I put a wrapper ontop of this like so

const addElementsFrontEnd = (element, blockType, attributes) => {
    const { rel, href } = attributes;

    if (!element) {
        return;
    }

    if (blockType.name !== "core/cover") {
        return element;
    }

    if (!href) {
        return element;
    }

    return (
            <a style="padding: 0;" className={element.props.className} href={href.url} rel={rel}>
                {element}
            </a>
    );
};

addFilter(
    "blocks.getSaveElement",
    "extend-core-blocks/cover/add-element-front-end",
    addElementsFrontEnd
);

This used to work but there must have been a recent change as it breaks the layout due to CSS hierachy. Is there anyway I can insert the <a> tag inside {element} rather than outside?

I know it’s possible with PHP but not sure with JS?

Any help is greatly appreciated! Thank you!

• This topic was modified 3 years, 6 months ago by craigo1.