[AMP Stories] Optional rounded corners for Text and Image block

[miina]

See #2013.

[miina]

@swissspidy registerBlockStyle seems to be generally for a block type, added the rounded corners Toggle by using the existing filters instead.

[swissspidy]

@miina I'm not sure I follow, what exactly was the issue you were facing with that method?

[miina]

@swissspidy registerBlockStyle seems to add a new style for all the blocks of a certain type, however, we'd only need the style for a specific single block where the user has chosen to use rounded corners. So it seems like registerBlockStyle is not suitable for this case. Unless I'm missing something :)

[swissspidy]

registerBlockStyle seems to add a new style for all the blocks of a certain type

Not exactly 🤔. registerBlockStyle provides the user alternative styles for blocks. It works by adding a class name to the block’s wrapper.

Try inserting a button block in Gutenberg and click on its icon. You can then see the different styles:

See https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#block-style-variations

So if we use this:

registerBlockStyle( 'amp/amp-story-text', {
    name: 'rounded',
    label: __( 'Rounded', 'amp' )
} );

The user can choose between the default style and the Rounded style. With Rounded, an is-rounded class name is added to the block.

So if the user wants rounded corner, they can simply switch the block style.

[miina]

Oh, looks like I completely misunderstood this one. Thanks, will rework.