Image settings

[koke]

Implement the image inspector with image settings. Since we're not likely to have the block inspector in the beta, it's OK to present the image settings on a modal view or similar, we'll have to figure out a temporary UI that looks good and it's easy to implement.

For reference, the image settings I'm seeing on the web:

• Alt text
• Image size
• Link settings

[koke]

From @mzorz:

Assuming the UI is defined beforehand, I’d give this roughly 1 week (I’m actually thinking 1 to 2 days for implementation but I expect some back and forth with design iterations plus testing). What I’m thiking this internally does is:

• create the modal showing current settings for width/height and alt, and link settings
• with that, take the values and validate params, then re-write the html correspondingly when the user hits OK to accept any modifications they may have done
• re-render block if applies (probably this is done automatically, it’s React after all)

Estimation: 1 week

[etoledom]

Create the modal showing current settings for width/height and alt, and link settings

Looking at the web version, that modal should look something like this:

I have the following question:

• Are all those controls required for this ticket?

And also looking at the web version, if we follow closely, the button that would make that modal appear would be a new "settings" button like this one:

Leaving the edit "pencil" button to change the image.

cc @koke @hypest @iamthomasbishop

[hypest]

Are all those controls required for this ticket?

I'd say yes, but it should be fine to tackle them in steps.

And also looking at the web version, if we follow closely, the button that would make that modal appear would be a new "settings" button like this one:

I think we can use the "cog" button we already have on the inline toolbar, at least for now.

[koke]

I think parity with Aztec should be the minimum, which IIRC means that image dimensions is the only optional one. It can be a nice to have if it’s not too much extra effort

[hypest]

We chatted over Slack with @iamthomasbishop and @etoledom and we think that the most "straightforward" route right now for the February Beta is to go full-RN with the image settings, since that will be less moving parts to wrangle and less developer resources to allocate. 🤞

It's understood that full-RN will not give us the platform-native look and feel we'd like for this but, it's sacrifice we can iterate on afterwards.

[etoledom]

As we discussed, we are dropping the Image size setting due to the necessity of networking, that is not scoped to be worked for the first Beta.

[etoledom]

This task was developed in small parts, with these corresponding PRs:

• Image setting button (Fill Slot pattern in inline toolbar) Image settings button WordPress/gutenberg#13597
• Implement bottom-sheet Mobile bottom sheet component WordPress/gutenberg#13612
• Alt image setting Alt image setting WordPress/gutenberg#13631
• Improve bottom-sheet design Mobile: BottomSheet design tweaks WordPress/gutenberg#13633
• Link image settings Mobile: Link image setting WordPress/gutenberg#13654
• UI for image size settings (Picker and Picker Cell) [Mobile] UI for size image settings WordPress/gutenberg#13728
• Roll back image size setting cell Mobile: Remove size settings WordPress/gutenberg#13750
• Reset to original button Mobile: Implementing Clear All Settings button on Image Settings WordPress/gutenberg#13753

[etoledom]

First iteration of Image Settings is ready via all the PR mentioned on #202 (comment)