search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
315 stars 29 forks source link

Headline with <span> breaking in Gutenberg #600

Open sfries79 opened 5 years ago

sfries79 commented 5 years ago

Describe the bug I was trying to build a headline for a Gutenberg block with <span> inside the h-tag. The headline was supposed to look like in the first image, so I had to add “display: inline” and “box-decoration-break: clone”. When editing the headline in Gutenberg I selected the text by double clicking and my styles disappeared when typing. It looks like <span> is selected along with its content. As a result, new text is sometimes added outside of <span> (screenshot 2) and sometimes <span> disappears completely. For some reason this behavior isn’t there if I remove “display: inline”.

To Reproduce Steps to reproduce the behavior:

  1. Create new block in O2
  2. Add headline
  3. Edit headline and add <span>
  4. Add some Styles
  5. Add “display: inline” to custom CSS
  6. Use block in Gutenberg
  7. Select text by via double click
  8. Edit text
  9. Look at stuff breaking

Expected behavior I would expect Gutenberg not to break my styling in any way.

What actually happens Gutenberg selects the <span>-tag and breaks my styling in the process.

Desktop (please complete the following information) I encountered this behavior in Firefox, will test Chrome tomorrow. Was able to reproduce this in 3.0.1 and 3.1 Alpha.

Headline-001 Headline-002

KittenCodes commented 4 years ago

@sfries79 If you're still able to reproduce this in the latest version of Oxygen/Gutenberg, please recreate the issue on a Sandbox site and send us a link so that we can take a look.

You can create a Sandbox site here: https://oxygenbuilder.com/try/.

sfries79 commented 4 years ago

@KittenCodes This is still an issue in the sandbox. I created a block and a single post (something with 600 in the title) and tried to edit the headline in Gutenberg.

Selecting the headline via double click and then typing breaks the styling applied to the <span>. Regarding the font colour this isn’t a problem as it can be applied to the h-tag, but in this case it’s unfortunately not possible to do the same with the background colour.

Link to the Sandbox: https://oxygen-qhm8rwwqkhg7k.oxygen-demo.qsandbox.me/wp-admin/index.php

KittenCodes commented 4 years ago

@sfries79 Thank you for setting that up. Would you mind recording a quick video showing what's happening when you edit the span and also letting me know which browser/OS you're using? I don't seem to be able to break it using Chrome on Windows.

You can use Loom to record a video: https://www.loom.com/.

sfries79 commented 4 years ago

I recorded a video and put it on YouTube, hope that works too.

https://www.youtube.com/watch?v=5jLzbds0y4w

I’m using Firefox 71 on Windows 10. Would have tried Chrome myself, but I can’t get my sandbox to open in another browser since I don’t have any login credentials.

KittenCodes commented 4 years ago

Thanks @sfries79! It seems to only be an issue in Firefox, but I've opened an internal bug report so that our developers can investigate.