Skip to content

Verse block: Block styling is different between Android and iOS #38081

Open

Description

Description

Comparing the visual styles of the Verse block between Android and iOS, I noticed the following items:

  1. Text caret is bigger on Android, in fact, looks even bigger than the text.
  2. Vertical space between lines is smaller than the one when a line is broken with long text.
  3. Selecting all text and pressing the backspace key removes the text style associated with the block.
  4. Placeholder text has different text style than content.

NOTE: I also reproduced items 1 and 2 in the Preformatted block.

Step-by-step reproduction instructions

Text caret is bigger on Android, in fact, looks even bigger than the text

  1. Add a Verse block.
  2. Type some text.
  3. Observe that the text caret is bigger than the text.

Vertical space between lines is smaller than the one when a line is broken with long text

  1. Add a Verse block.
  2. Type text on the same line until the line is broken.
  3. Tap enter key to create a new line.
  4. Type some text.
  5. Observe that the vertical-align is smaller between lines than lines broken due to long text.

Selecting all text and pressing the backspace key removes the text style associated with the block

  1. Add a Verse block.
  2. Type some text.
  3. Select all text and press the backspace key.
  4. Observe that the text style is removed and the content looks identical to a Paragraph block.

Placeholder text has different text styles than content

  1. Add a Verse block.
  2. Observe that the placeholder text has a different text style than content.

Expected behaviour

The Verse block should look similar on both platforms.

Actual behaviour

The Verse block has visual important differences between both platforms.

Screenshots or screen recording (optional)

Android iOS
android-verse-block.mp4
ios-verse-block.MP4

WordPress information

  • WordPress version: N/A
  • Gutenberg version: N/A
  • Are all plugins except Gutenberg deactivated? N/A
  • Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

  • Device: Samsung Galaxy S20 FE 5G
  • Operating system: Android 10
  • WordPress app version: develop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)[Block] VerseAffects the Verse block[Priority] LowUsed to indicate that the issue at hand isn't a top priority to address and can be handled later[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions