Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ist-item inline pseudo ::after element renders incorrectly in the editor #68727

Open
3 of 6 tasks
djcowan opened this issue Jan 17, 2025 · 0 comments · May be fixed by #68732 or #68731
Open
3 of 6 tasks

ist-item inline pseudo ::after element renders incorrectly in the editor #68727

djcowan opened this issue Jan 17, 2025 · 0 comments · May be fixed by #68732 or #68731
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@djcowan
Copy link
Contributor

djcowan commented Jan 17, 2025

Description

Adding an inline/inline-block pseudo ::after element to a list-item renders incorrectly in the editor due to the inclusion of the "list text" div within the 'RichText' element.within the Editor.

Possibly related 22834

Step-by-step reproduction instructions

To recreate the issue;

  1. add an inline or inline-block pseudo ::after element via css to a core/list-item.
  2. note the element appears on the same line as the list-item text on the public front end
  3. note the element appears on the following line within the editor due to the inclusion of the 'list text' div

Styles used to generate screenshots:

\register_block_style( 
    'core/list-item' , 
    array(
        'default'      => false,
        'name'         => 'acme-list',
        'lable'         => 'ACME List',
        'inline_style' => '.is-style-acme-list { position: relative; } .is-style-acme-list::after { content: "This is a fancy orange box."; background-color: #ffba10; } '
    )
);

Screenshots, screen recording, code snippet

public:

Image

page editor

Image

Image

editor insector code

Image
<li tabindex="0" class="block-editor-block-list__block wp-block is-selected is-style-acme-list is-style-acme-list-6331769d-ce86-406f-a038-b87f0e962fce wp-block-list-item block-editor-block-list__layout" id="block-6331769d-ce86-406f-a038-b87f0e962fce" role="document" aria-label="Block: List item" data-block="6331769d-ce86-406f-a038-b87f0e962fce" data-type="core/list-item" data-title="List item" data-draggable="true">
    <div role="textbox" aria-multiline="true" aria-label="List text" contenteditable="true" class="block-editor-rich-text__editable rich-text" data-wp-block-attribute-key="content" style="white-space: pre-wrap; min-width: 1px;">more additional information</div>
</li>

Environment info

Wordpress | Version 6.7.1
Gutenberg | Version 20.0.0

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@djcowan djcowan added the [Type] Bug An existing feature does not function as intended label Jan 17, 2025
@fabiankaegy fabiankaegy added the [Block] List Affects the List Block label Jan 17, 2025
@rinkalpagdar rinkalpagdar linked a pull request Jan 17, 2025 that will close this issue
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
2 participants