Gutenberg-mobile: Remove additional padding below image on image block

[iamthomasbishop]

I started noticing a regression recently (in the last week or so), where there is too much padding below the image inside an Image block.

I’m not sure where this is coming from, but it looks like it’s about 12px height.

Screenshot:

Tested on iPhone 11 Pro, WPiOS 14.2n, iOS 13.3.1, Mobile Gutenberg 1.22(?)

[jbinda]

@iamthomasbishop

You're right. That's 12px extra space. I think it is connected with the Caption component.

Initially I thought it's something with bordering logic but I exclude that scenario because the Caption component which is render after selecting the image block does not have its own clientID so the bordering logic isn't applied to it. Also in the inspector I have noticed that the extra space is caused by applying padding to a component ( the bordering logic applies mainly margins and after check the scenario which applies the padding I conclude they do not cause any changes on the Caption ).

After a closer look I have noticed that during changes bring with this PR the padding value of 12 was elevate from Caption block to it's new parent Block Caption. There is also shouldDisplay prop which tells when to hide the Caption. However it do not hide the Block Caption but only it's child Caption - so the mentioned padding was visible all the time.

After applying below changes it should work as expected:

diff --git a/packages/block-editor/src/components/block-caption/index.native.js b/packages/block-editor/src/components/block-caption/index.native.js
index 818bc3b41c..b0d00201de 100644
--- a/packages/block-editor/src/components/block-caption/index.native.js
+++ b/packages/block-editor/src/components/block-caption/index.native.js
@@ -20,7 +20,7 @@ const BlockCaption = ( {
        shouldDisplay,
        text,
 } ) => (
-       <View style={ { flex: 1, padding: 12 } }>
+       <View style={ { flex: 1, padding: shouldDisplay ? 12 : 0 } }>
                <Caption
                        accessibilityLabelCreator={ accessibilityLabelCreator }
                        accessible={ accessible }

However I'm not sure if we should't move that padding value to styles and connect with $block-selected-to-content variable which ensure to always align the padding with rest of the content

@geriux can you take a look on this and check if that make sense ?

[hypest]

👋 @pinarol , can this perhaps be added to a GutenPages project?

[jbinda]

@hypest I had a conversation with @iamthomasbishop on Slack and raised a PR to fix that. I started with the simplest solution but have alternate solution which might be better in long run. Please check the PR for more details

[hypest]

Thanks for the headsup @jbinda ! I'll go ahead and add this one to In-Progress in the Callstack related board 👍.

[pinarol]

@jbinda thank you for the fix!