[FEATURE] Research option to copy wrapper data from one block to another

[iruzevic]

It would be cool to have option to copy wrapper options from one block to another

[goranalkovic-infinum]

Maybe something using localStorage for temporary "copy-paste"?

[iruzevic]

something like that so I can style one component and for example copy that options to another block

[moonbyt3]

Ive added new file to wrapper/components called wrapper-toolbar.js, and I've rendered it to wrapper.js There I've passed attributes and setAttributes to toolbar component to get all attributes that wrapper uses. (For example if i call card component, I will get all attributes from card + all attributes from wrapper)

Inside wrapper-toolbar.js I've rendered two icons one for copy and other for paste. I'm planing to make onClick event for copy button and to filter out wrapper attributes like this:

const copyAttributes = function() {
    localStorage.removeItem('copiedWrapperAttributes');

    const copiedWrapperAttributes = Object.keys(attributes).filter((key) => key.includes('wrapper'))
    .reduce((cur, key) => { 
        return Object.assign(cur, { [key]: attributes[key] })
    }, {});

    localStorage.setItem('copiedWrapperAttributes', JSON.stringify(copiedWrapperAttributes));
}

console logs only wrapper attributes which i plan to store to localStorage.

Then I'm planing to make handler function for pasting which will use object from localStorage and update attributes of wrapper that should use them.

Something like this:

const pasteAttributes = function() {
    const wrapperAttributesToBePasted = JSON.parse(localStorage.getItem('copiedWrapperAttributes'));
    setAttributes(wrapperAttributesToBePasted);
}

Is this a way to go?

[iruzevic]

sounds good. Great job

[iruzevic]

you have a bunch helpers here that you can use https://github.com/WordPress/gutenberg/blob/trunk/packages/blocks/src/api/raw-handling/paste-handler.js

and here https://github.com/WordPress/gutenberg/tree/trunk/packages/blocks/src/api/raw-handling