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.

Sign up for GitHub

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

Appender: fix outside canvas styles #66630

Merged
merged 1 commit into from
Oct 31, 2024
Merged

Appender: fix outside canvas styles #66630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,19 @@
}
}

// The black plus that shows up on the right side of an empty paragraph block,
// or the initial appender that exists only on empty documents.
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
Comment on lines +60 to +62
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the initial appender that exists only on empty documents.

In an empty document the classnames in use for the default appender appear to be .block-editor-default-block-appender .block-editor-inserter. Was that rule removed intentionally when moving to this separate file?

Also, it looks like the markup for the default block appender is rendered inside the iframe rather than outside it — so we might still need that rule in content.scss, unless there's another way to go about this. Here's where the default appender lives:

gutenberg/packages/block-editor/src/components/default-block-appender/index.js

Lines 94 to 99 in f699d2b

<Inserter
rootClientId={ rootClientId }
position="bottom right"
isAppender
__experimentalIsQuick
/>

position: absolute;
top: 0;
right: 0;
line-height: 0;

&:disabled {
display: none;
}
}

// Sibling inserter / "inbetweenserter".
.block-editor-block-list__empty-block-inserter,
.block-editor-block-list__insertion-point-inserter {
Expand Down
24 changes: 8 additions & 16 deletions packages/block-editor/src/components/default-block-appender/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,24 +62,12 @@
}
}

// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
// that exists only on empty documents.
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender .block-editor-inserter {
position: absolute;
top: 0;
right: 0;
line-height: 0;

&:disabled {
display: none;
}
}
Comment on lines -68 to -77
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this removal appears to have caused a regression for the default block appender as it no longer appears to the right of the "fake" empty paragraph before a user interacts with the editor:

Before this PR

image

After this PR

image



/**
* Fixed position appender.
* These styles apply to all in-canvas inserters that exist inside nesting containers.
* Fixed position appender (right bottom corner).
*
* These styles apply to all in-canvas inserters. All in-canvas inserters always
* exist within a block.
*/

.block-editor-block-list__block .block-list-appender {
Expand All @@ -96,6 +84,10 @@
line-height: 0;
}

.block-editor-inserter:disabled {
display: none;
}

.block-editor-default-block-appender {
height: $button-size-small;
}
Expand Down
Loading