Image and text masks

[dhanson-wp]

• Text mask are images inside text (see Wix)
• Could be fun as a "Shape" block, which you can mask images in, like grouping.

[otakupahp]

This could be achieved as a style applied to any text block. This is a quick CodePen to show how it works

https://codepen.io/otakupahp/pen/raBwXpP

[dhanson-wp]

@otakupahp, would you like to move forward and build this? Or would you need/want designs for the UI?

[otakupahp]

@dhanson-wp I can do this.

Text mask are images inside text (see Wix)

Is it ok to create a Heading block variation? I don't think it will be useful for a Paragraph block

Could be fun as a "Shape" block, which you can mask images in, like grouping.

For this, I need a bit of explanation

[dhanson-wp]

Heading Block variation makes the most sense.

Shape masks similar to what is offered in this block plugin https://wpstackable.com/advanced-image-block/. Or this plugin here https://wordpress.org/plugins/wp-image-mask/

[otakupahp]

Got it. Please assign me this. I can't take it myself

[dhanson-wp]

@otakupahp just assigned it to you. I don't believe there are UI designs for this feature. Are you okay building this without a design?

[otakupahp]

Yes, I'll work on this and ask for feedback when needed

[otakupahp]

Hi @dhanson-wp, I checked the https://wordpress.org/plugins/wp-image-mask/ plugin, and it adds the mask as an addition to the image block.

I can either create a new block variation for the heading and image blocks or add the mask options via PluginDocumentSettingPanel for heading and image blocks

New block variations are a good idea to let the user know what to expect with the block, but adding features to custom blocks, let the users add masks to any image or heading without changing manually each block.

Which path would you prefer?

[dhanson-wp]

@otakupahp I'd like to allow @Nyiriland or another designer to offer their thoughts on this block. This issue was created from the original ideas document from Studio 51. I don't know if there are more details or functionality beyond that.