Add site logo crop

[ajlende]

Description

Part of #30406.

Also fixes #29217 in 93dc9675cb448586621a840a310202fe3acdee65. This can be moved to another PR if people would prefer to keep the fix separate.

Adds cropping to the site logo by:

1. Moving the cropping component to the @wordpress/block-editor package and exporting it as an __experimental component
2. Using the exported cropper in the SiteLogo block

How has this been tested?

1. Add SiteLogo block.
2. See that toolbar doesn't appear when the logo is empty.
3. Apply a crop when a logo is present.
4. See that the site logo is updated when the crop is applied.

Screenshots

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[jasmussen]

This is going to be so extremely useful for the site logo block, thanks for working on it! (Oh and by the way, I feel like at this point you've deserved to be admitted as a contributor, if you'd like to work on the main branch rather than your fork 😉). This is what I see:

In general this seems to be working well. There are some flow aspects to the cropping system that could be refined to benefit both this and the Image block, but we can look at that separately.

As shown at the end of the GIF, if I change the aspect ratio of the Site Logo the general shape/silhouette of the overall block does not appear to be updated. I wonder if that's related to #29217?

[ajlende]

I wonder if that's related to #29217?

It seems like it might be. The width calculation seems to be a render behind which causes issues both here and when the resize happens.

[ajlende]

@jasmussen I finally circled back around on this, and I think the issue is fixed now after the rebase. Give it another look, and if everything is good we can get this merged :)

EDIT: I was able to reproduce it again now. Looking into the fix.

[jasmussen]

I was just about to compile this, then saw the edit :D

Please do ping me as soon as you can use my help, whether as a review or otherwise.

[jasmussen]

Very nice, thank you!

If you can get a sanity check on the code it would be nice, but functionally this is solid!

[jasmussen]

Is this one blocked?

[ajlende]

There was a bug with the applied image not showing up in trunk for a while, but it seems to be resolved. I merged in the changes and it seems to be working as intended again.

[ajlende]

Using currentWidth and currentHeight fixes the bug described in #29217

[vcanales]

When cropping, if we deselect the image block the crop tool stays on. This creates a couple of issues;

1. At first it's hard to tell that the crop hasn't been applied, even after updating the post. I think it might be good to either Apply or Cancel when deselecting the block, or Applying when the post is saved while cropping.

2. It becomes hard to select the image block again; dragging seems to interfere with clicking on the block. A way I found to achieve it was to tab into the block, and then clicking it.

I'm also wondering if it is possible to allow to "decrop" the image; as of right now, Applying the crop creates a new one, and in order to un-do from this point it's necessary to replace the cropped image with the original one.

[ajlende]

1. At first it's hard to tell that the crop hasn't been applied, even after updating the post. I think it might be good to either Apply or Cancel when deselecting the block, or Applying when the post is saved while cropping.

2. It becomes hard to select the image block again; dragging seems to interfere with clicking on the block. A way I found to achieve it was to tab into the block, and then clicking it.

Nice catch! Deselecting should match the behavior of the image block now.

I'm also wondering if it is possible to allow to "decrop" the image; as of right now, Applying the crop creates a new one, and in order to un-do from this point it's necessary to replace the cropped image with the original one.

Seems like a good idea—we could update the cropper to make sure an undo layer is created when hitting apply so we can, at least, hit ctrl+z to undo it until a page refresh.

Right now, this matches the behavior of the image block, so it's probably best left as a follow-up to fix in both places.

[vcanales]

Right now, this matches the behavior of the image block, so it's probably best left as a follow-up to fix in both places.

Agreed! LGTM :)