Link for button canvas.

[myroslavve]

Description

Button-block, link should be adding to canvas area (wrapper) otherwise link will not work on designs where we are using BG Layers https://jam.dev/c/2de04a6a-fe96-4f9e-b87f-9528d616a24d

Originally posted by @Olekrut in https://github.com/maxi-blocks/maxi-blocks/pull/5459#pullrequestreview-1908620940

Other plugins or websites examples

No response

How to implement it

No response

Other information

No response

[dosubot[bot]]

🤖

Hey again, @myroslavve! Nice to see your digital footprints crossing paths with ours once more. 🚀

Based on the context provided, it seems you want to add a link to the button-block within the canvas area to ensure functionality when using background layers. This issue was previously addressed in the Wrapper blocks link issues and resolved with a pull request: Issue 4966 - disable links in higher blocks when tags/cats links enabled.

To implement this, you can modify the ButtonSaver component to include a link (<a>) element that wraps the button content. This will allow the button to act as a clickable link in the frontend, which is useful for navigation or linking to external resources.

Here's a sample implementation:

save: props => {
    const { buttonSettings } = props.attributes;
    const buttonSettingsParsed = JSON.parse(buttonSettings);
    const { linkOptions } = buttonSettingsParsed;

    // Assuming linkOptions contains a url property for the link's href attribute
    const url = linkOptions.url || '#';

    return (
        <a href={url} className="button-link">
            <ButtonSaver
                className="some-class"
                buttonSettings={buttonSettings}
            />
        </a>
    );
}

In this modification:

1. The save function of the block type is updated to parse the buttonSettings attribute to access the linkOptions.
2. It then extracts the URL (assuming linkOptions contains a url property) to be used as the href attribute of the <a> element.
3. The <ButtonSaver> component is wrapped inside an <a> element with the href set to the extracted URL, making the entire button clickable as a link.

This approach ensures that the button acts as a link in the frontend, leveraging the existing buttonSettings structure to include link options. Make sure to adjust the linkOptions structure and extraction logic based on your actual implementation details and requirements.

Unfortunately, I couldn't find the current structure of the buttonSettings attribute in the ButtonSaver component within the repository. You might need to adjust the code snippet above according to your actual buttonSettings structure.

For more information, you can refer to the Button Components documentation.

If you need further assistance or if there's anything unclear, feel free to ask.

Sources

• Wrapper blocks link issues
• Button Components

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[Olekrut]

https://jam.dev/c/67994145-0f9b-4003-8989-2b9ae4e09dc2 guess, not just canvas, we should have ability to chose > block or canvas