search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Inline CSS is lost in a List block when amending the content of the list #49954

Open pendantry opened 3 years ago

pendantry commented 3 years ago

Steps to reproduce the behavior

  1. Add a list block

  2. Enter text image

  3. Select 'Edit as HTML' from 'More options'

  4. Replace all occurrences of '<li>' with '<li style="margin-bottom: 10px;">' image

  5. Select 'Edit visually' from 'More options'

  6. Note that the display does not render the white space that should be inserted by the inline CSS (this is another bug!)

  7. Preview in new tab. Note that the output does render the expected white space after each list item when previewed: image

  8. Switch between 'Edit as HTML' and 'Edit visually' as many times as you care to. Note that the inline CSS is retained.

  9. Make a single change to the text in the list while in 'Edit visually' mode image

  10. Switch to 'Edit as HTML' and note that the inline CSS has disappeared image

What I expected to happen

I expected the inline CSS I added in 'Edit as HTML' mode to be retained even after amending the text in the list

What actually happened

The inline CSS was stripped out when making a change to the text in the list

Context

Browser / OS version

Firefox version 85.0.2 (64-bit) on Windows 8.1 and Google Chrome Version 88.0.4324.150 (Official Build) (64-bit) on Windows 8.1

Is this specific to the applied theme? Which one?

Tested on Twenty-Ten and Colinear themes -- both behave in exactly the same way

Does this happen on simple or atomic sites or both?

I have no idea what constitutes a 'simple' or an 'atomic' site

Is there any console output or error text?

No

Level of impact (Does it block purchases? Does it affect more than just one site?)

Tested on both pendantry.wordpress.com and oldpompeiians.wordpress.com

Screenshot / Video: If applicable, add screenshots to help explain your problem.

Screen clips included above

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

pendantry commented 3 years ago

I regret closing this issue. The issue may be 'stale', but it's still a valid bug report that should, at some point, be addressed.

pendantry commented 3 years ago

Here's a blog post I wrote that illustrates the problem (and reveals more block editor bugginess, too): https://pendantry.wordpress.com/2021/05/15/defeating-the-list-block-walloftext-problem-using-css/

vijayhardaha commented 2 years ago

Similar issue report on WP Forum, where classes are being removed from the list. Reference: https://wordpress.org/support/topic/bug-gutenberg-editor-deletes-classes-of-elements/

I have tested and can reproduce the issue with the plugin. WP Block editor doesn't have this problem but Gutenberg has.