Add wrapperless blocks, hook shims and a block support

[luisherranz]

Continuing the tests here, I've added support for:

• Wrapperless hydration: now, the Block component can control the wrapper div as well.
• Hook shims: I've added support for useState and useEffect in Block using @fabiankaegy's trick. This will need to replace replaced with something natively supported by Gutenberg. I'd like to take a look at the custom serializer with @gziolo.
• Block supports (only in the wrapper node, no skip-serialization): I'm serializing the block props (which include the has-text-color... class names) because I thought React would remove them, but it doesn't seem to do so. I need to investigate more.

The block now hides/shows the children to test that it can destroy and recreate them while preserving hydration correctly.

[fabiankaegy]

I'm curious whether your thinking here is to leave these as noop functions forever or whether it is using a tree shaken smaller version of react instead of the WordPress global? 🤔

[luisherranz]

The noop functions are for Save and in the Editor it doesn't make much sense to do tree-shaking (at least is not an urgent priority). In the frontend we need the real hooks.

By the way, I'd love to not use globals in the frontend. They are not needed for backwards compatibility so we can switch to regular imports 🙂

[fabiankaegy]

Ahh yeah, I mistook that as something that was being used on the frontend. And was confused about why we don't want/need reactivity on there.

[luisherranz]

Funny thing, if we remove blockProps, React doesn't remove the classes present in the HTML on hydration.

I want to investigate this more.

[fabiankaegy]

I think we somehow need to expose the useBlockProps.save funciton call to the developer in the frontent/block.js file because that is the only way to add additional attributes like the className to it.

Mayve we can make it completely hidden though. What if the developer would be able to import a Block component that works like this:

function BlockSave(props) {
    const { attributes } = props;

    return (
        <Block className="custom-class">
            <Title message={attributes.message} />
        </Block>
    );
}

which would call useBlockProps.save under the hood and spread all the props into the useBlockProps.save callback

[luisherranz]

Yes, that's definitely an implementation detail that should be hidden because it doesn't add any value to the developer. Let's see if we can get rid of it 🙂

[luisherranz]

I've added a Readme. Feel free to add more items to the list.

[luisherranz]

I'm going to merge this one to continue opening other PRs on top of it.