Bug Description

The image entered during editing renders differently (erroneously) once published.

Expected Behaviour

Story should visually look the same in the editor and once published.

Steps to reproduce

1. Add image block to page
2. Preview/Publish
3. Image block displays incorrectly

Screenshots

Additional context

• WordPress version:
• Plugin version: 1.3-rc
• Gutenberg plugin version (if applicable):
• AMP plugin template mode:
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• AC1: When creating stories in the editor, image within image blocks should display the same in the preview/publish view.

Implementation brief

• The issue of 0% displaying as 5% comes from PHP where empty gives positive value for 0, this causes using the default 5 as the value:
  On 0% being displayed as 5%: yep, 5 is indeed the default value for positionLeft. Looks like the issue comes from PHP where 0 is considered empty :
  

  amp-wp/includes/class-amp-story-post-type.php

  Line 1534 in 5799032

  $style['left'] = empty( $atts['positionLeft'] ) ? '5%' : $atts['positionLeft'] . '%';

We should replace using empty by something more reliable, perhaps with isset or strict equals for 0.

• The weird displaying of images due to display:table can be fixed by overriding the value in the plugin's amp-stories-frontend.css file for .wp-block-image.is-resized and other .wp-block-image.* values. See /gutenberg/packages/block-library/src/image/style.scss to check where the display:table is set. The value should be display: block instead.

QA testing instructions

Test 1

1. Add image block to the page
2. Preview/Publish
3. Verify that the block matches the view in the editor and in the FE (unlike on the screenshots above)

Test 2

1. Add an image block to the Page
2. Place the image exactly on the left border of the Page
3. Verify that it displays on the border of the Page in the FE as well.

Demo

• https://youtu.be/P_WEsErfmUk

Changelog entry

• Improved rendering of images on the frontend to be more accurate