Extended image editing capabilities

[swissspidy]

Gutenberg supports cropping images in the editor, but that relies on the server to do.

Instead, this can all be done in the browser.

Also, new editing capabilities can be added, such as:

• Regenerate thumbnails with smarter cropping
• Manually set focal point for thumbnails
  • See #410
• Using selfie segmentation, allow removing/changing the background behind a person (blur, make it transparent, or use a solid color)

[swissspidy]

Current Gutenberg implementation:

https://github.com/WordPress/gutenberg/blob/e0a413d213a2a829ece52c6728515b10b0154d8d/packages/block-library/src/image/image.js#L518-L536

https://github.com/WordPress/gutenberg/blob/3f27f269562e9ac44151fada12eb7eefbece8bbd/packages/block-editor/src/components/image-editor/index.js

https://github.com/WordPress/gutenberg/blob/3f27f269562e9ac44151fada12eb7eefbece8bbd/packages/block-editor/src/components/image-editor/context.js

https://github.com/WordPress/gutenberg/blob/3f27f269562e9ac44151fada12eb7eefbece8bbd/packages/block-editor/src/components/image-editor/use-save-image.js

The default image editing capabilities in Gutenberg can be disabled via the imageEditing setting in the core/block-editor store.

wp.data.select( 'core/block-editor').getSettings().imageEditing / wp.data.dispatch( 'core/block-editor').updateSettings( { imageEditing: false })

[swissspidy]

Icon to remove the background:

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:background_replace:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=background+replace&icon.size=24&icon.color=%235f6368

Can use the same image segmentation library as for blurring (see also #223)

Related: https://github.com/google-ai-edge/mediapipe/issues/4630

https://codepen.io/swissspidy/pen/jOjRLNg