Wordpress mobile app - using 'block editor' does not support adding photos from phone Gallery

[ghost]

Describe the bug
I activated the 'block editor' in Wordpress online/pc mode. Now when I use the mobile app to add photos from my Samsung Galaxy 8 into a blog post they 'appear' to add correctly (as seen in the mobile app) and you are able to 'edit' them to add file details like title, caption etc. But upon returning to the online/PC version of Wordpress, the photos are not added correctly and the file data is lost.

This is a major failing - Customers to be able to add and edit photos (directly from their phone gallery) in the mobile app and have them appear correctly in the online version of Wordpress.

To Reproduce

Steps to reproduce the behavior:

1. On my Samsung Galaxy 8 open the Wordpress App.
2. Add a new blog post in Wordpress or open existing blog post
3. Click the + sign to add a new photo from device photo gallery
4. Click the tick sign at the top right corner to add the photo - Screenshot 1
5. Image inserts into post
6. Double click image to edit photo/file properties - add a title, caption etc - Screenshot 2
7. File details are saved correctly and visible on blog post in mobile app - Screenshot 3
8. Open Wordpress online/pc version (with new block mode) and edit the same blog post to view the images you've added. Images appear skewed to portrait, and with most of the image missing, because they are not in a 'block' - Screenshot 4
9. Skewed images appear to have a caption - Screenshot 5
10. At this point, you'd need to delete all the images you can see in the post, which were added and edited in the mobile app because they are all skewed. Start over, by adding them again via the new 'add block > add image' method
11. When adding the images, you'll see the original images have been saved to the media library. However upon checking the file details you will see all the info added via the mobile app have been lost - Screenshot 6.
12. Go into each image and repeat everything you just did in the mobile app - to enter file details.

Expected behavior
Repeat steps 1-7 above, and have all the images (added on the mobile app) appear correctly in the Wordpress online/pc version.

Desktop (please complete the following information):
Deaktop - Firefox browser
Phone - Samsung Galaxy 8

Additional context
Gutenberg version 5?

[ghost]

unable to add screenshots....????

[ghost]

OK screenshots available here: https://www.dropbox.com/sh/68vmphz9may2djc/AAAnZHRR2JIdFBRz4uA-QJ-fa?dl=0

screenshot 1 - select image from phone gallery
screenshot 2 - edit file details - title caption etc
screenshot 3 - photo added on mobile device with correct title and caption

screenshot 4 - photo added via mobile app as viewed from wordpress on pc - image is not in a block

screenshot 5 - photo added on mobile device seemingly has a caption

screenshot 6 - access media library from wordpress online - photo added and edited on mobile device is missing the title and caption

[youknowriad]

cc @koke for awareness (I'm pretty sure I saw a PR about this merged recently right?)

[koke]

Thanks for the heads up, I don't think it's related.

At first I thought this was about using the existing editor in the apps to edit a post with blocks, which is supported to an extent. But I just tested with a new post and it's equally broken.

I think the issue is that the apps upload images at full size and don't resize them, so Gutenberg correctly converts everything to a classic block when opening the post, but it renders the images without fitting them to the available width, which makes everything look broken: it looks like the caption is gone, but it's just offscreen, if you zoom out enough it appears. Also, if you edit any of the images to a smaller size (e.g. Medium) they fit in the screen and the caption is visible.

I think that's the part that Gutenberg should handle better: trying to fit any images to the width of the block.

As for the apps, the good news is that we're close to launching our first version with the block editor in a few weeks, so this should become less problematic. We'll have a post with more details next week on https://make.wordpress.org/mobile/

[designsimply]

@Tinytramper thank you for including the detail and screenshots that you did! I can see two separate issues here:

1. Images added via the mobile app appear skewed when viewed in the block editor.
2. Saving image meta data such as title and caption are not working as you expected.

The first issue has been reported at #12168 and is waiting for review.

I think I can help you with the second issue by explaining how image details such as title, caption, etc are handled in WordPress and then providing a set of steps for you that should hopefully help you reach your end goal to publish images with captions in a way that works for both the editor in the app and the editor on the web.

Photo properties such as title, caption, etc are only saved in the Media Library if you edit those details directly in the Media Library or from a Media Modal (screenshot). Once an image has been inserted into a post, it becomes a separate instance and if you edit the caption directly in the editor (this is the only way to do that while in the editor in the mobile app) then the details are not saved back to the Media Library. At that point, if you deleted the image then the title and caption would be lost (step 10 from your example). If you edit the image on the web using the pencil icon, it will open a Media Modal and that will work to update the Media Library details and also send those updates back into the post. It can be a little confusing when switching between the different editors because of how the Media Modal works differently in some places compared to others. Work is currently underway to make those flows more consistent. I'm sorry that it has caused you some frustration in this case!

To help you reach your end goal, in your case I would like to recommend that you upload all of your images into the Media Library directly first and edit the image details there before adding those images into your posts if you would like to make sure the titles, captions, etc are always available even if you remove and re-add the images. If you'd prefer to continue uploading images directly into posts and would still like to be able to switch back and forth between mobile and the new editor, then consider manually setting the image size to "Large" in the mobile app when you update the image details (screenshot) because that will make the images a bit easier to work with until #12168 can be addressed. Another option would be to use the "Convert to Blocks" option (screenshot) in the web-based editor but I would only recommend that for you right now if you do not switch back and forth between mobile and web for editing often and only if your posts have straightforward formatting such as headings, paragraphs, images, and page breaks. This is because, as @koke mentioned above, the mobile app version of the block editor are not ready yet but will be getting updated very soon.

[designsimply]

I think the issue is that the apps upload images at full size and don't resize them

@koke, I tested this by adding a title, caption, and alt text to an image using the WordPress App on Android and comparing the HTML output for an image inserted using Gutenberg.

HTML for an image added using the app:

[caption width="4032"]<img src="https://madefortesting347.blog/wp-content/uploads/2019/02/00100lPORTRAIT_00100_BURST20190206080248135_COVER-1.jpg" class="wp-image-327 size-full" width="4032" height="3024" title="title" alt="alt text">caption[/caption]

HTML for an image added using Gutenberg:

<figure class="wp-block-image"><img src="https://madefortesting347.blog/wp-content/uploads/2019/02/00100lPORTRAIT_00100_BURST20190206080248135_COVER-1024x768.jpg" alt="alt text" class="wp-image-321"/><figcaption>caption</figcaption></figure>

The main difference in this case, which is causing images to look skewed and explode outside the confines of the editor, is that the CSS used to constrain the image width to 100% in the editor view doesn't affect the image if it has a width attribute. This problem was originally reported at #12168 and so I am closing this issue as a duplicate to continue the conversation there.

Noteworthy: an update was made in #11682 (Gutenberg 4.4) to default to inserting images as "large" instead of "full size." It might be worth considering whether to do the same in the mobile apps.

[designsimply]

@Tinytramper, even though this issues has been closed, I will keep an eye out for any replies from you if you still have questions or concerns about what I've outlined above. If we discover I've missed anything in testing or in my explanation, we can re-open the issue if needed. Thank you for using WordPress and for reporting so clearly about your experience!

[ghost]

Hi there,
@designsimply
**Photo properties such as title, caption, etc are only saved in the Media Library if you edit those details directly in the Media Library or from a Media Modal ** - Before I activated the block editor, that was not the case. I was adding images straight from my phone gallery into a blog post via the app (using the + sign), then double clicking on the image directly from the blog post to edit it. ALL the image metadata was saving to the image everywhere.. the Media library, WP MySites online and the WPAdmin pages. I have never added my photos directly from the media library.

Activating the block editor has completely broken the way my Wordpress worked, both online and on the app. I have spent hours on Support/chat with your colleagues over the past few couple of days, and Wordpress is still no closer to fixing the problems it caused. I have been assured that the WP developers are looking into this issue, so that I will be able to work the way I used to. Wordpress essentially broke the functionality I was using, and naturally, as a paying Business customer, I expect them to fix it to exactly as it was before the block editor broke it.
Many thanks, Julie

[designsimply]

The best way I can think of to help explain is with a video showing what I mean: 5m40s.

In the video, it shows that image details added using the mobile app are not saved in the Media Library—both in the app itself as well as from the web. The test was done with WordPress 4.9.9 which does not have the block editor.

Activating the block editor has completely broken the way my WordPress worked […] WordPress essentially broke the functionality I was using

The block editor is definitely different, and I do see that the image sizing isn't working properly and made sure that was filed separately. The image details, however, I believe are working as expected. Please consider checking back in with the support team except this time approach the issue from a standpoint of saying exactly the end goal you're wanting and ask them to work together with you to figure out a new path forward (knowing the steps may be a little different compared to what you were doing before) with a goal to find something that works best with the latest versions of the editors including the block editor.