Oxygen Gutenberg Block Styles + Previews

[jgladwill]

Describe the feature you'd like to see included in Oxygen. A set of features that would greatly improve Oxygenberg

Natively add styles to Oxygen User Blocks

I was able to get most of the way by creating the following code snippet, but it doesn't actually apply the styles

In PHP …

$blocks = ['content-aside'];

$styles = [
    ['section-dark', 'Dark'],
    ['section-swoosh', 'Swoosh'],
    ['reverse-columns', 'Reverse'],
    ['no-cta', 'No CTA']
];

foreach ($blocks as $block) {
    foreach ($styles as $style) {
        register_block_style(
            'oxygen-vsb/ovsb-' . $block, [
                'name'       => $style[0],
                'label'      => __( $style[1], $style[0] ),
                'style_handle'   => $style[0]
            ]
        );
    }
}

Example of selectors in Oxygen

Assuming the block style adds the additional classes to the block's top-level element (<section></section>)

[class*="section-dark"] {
    background-color: #111;
    color: #eee;
    fill: #eee;
}
[class*="section-dark"] svg {
    fill: inherit;
}
[class*="section-swoosh"] {
    background-image: url('https://placehold.co/1920x1280');
}
[class*="reverse-columns"] .columns {
    display: flex; flex-direction: row-reverse;
}
[class*="no-cta"] .button {
    display: hidden;
}

Use Oxygen component's screenshot as a block preview

What are the use cases for this feature? hand-off to a content development team or client

Examples of this feature or functionality. If another product has done it well, provide examples here.

[Kpudlo]

Use Oxygen component's screenshot as a block preview

This part is a duplicate of https://github.com/soflyy/oxygen-bugs-and-features/issues/598.