Skip to content

Commit

Permalink
Revert "Browse Mode: Add snackbar notices (#50794)" (#50937)
Browse files Browse the repository at this point in the history
This reverts commit a2d8295.
  • Loading branch information
talldan authored May 25, 2023
1 parent 277a9ff commit 0fb3f60
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 21 deletions.
1 change: 1 addition & 0 deletions packages/components/src/snackbar/list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export function SnackbarList( {

return (
<motion.div
layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
initial={ 'init' }
animate={ 'open' }
exit={ 'exit' }
Expand Down
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,12 @@ export default function Editor( { isLoading } ) {
'is-loading': isLoading,
}
) }
notices={ <EditorSnackbars /> }
notices={
( isEditMode ||
window?.__experimentalEnableThemePreviews ) && (
<EditorSnackbars />
)
}
content={
<>
<GlobalStylesRenderer />
Expand Down
17 changes: 6 additions & 11 deletions packages/edit-site/src/components/editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,11 @@
}

// Adjust the position of the notices
.edit-site {
.components-editor-notices__snackbar {
position: fixed;
right: 0;
bottom: 0;
padding: 16px;
}
.is-edit-mode .components-editor-notices__snackbar {
bottom: 24px;
}
.edit-site .components-editor-notices__snackbar {
position: fixed;
right: 0;
bottom: 40px;
padding-left: 16px;
padding-right: 16px;
}

@include editor-left(".edit-site .components-editor-notices__snackbar")
12 changes: 3 additions & 9 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ export default function Layout() {
whileHover={
isEditorPage && canvasMode === 'view'
? {
scale: 1.006,
scale: 1.005,
transition: {
duration:
disableMotion ||
Expand All @@ -227,14 +227,8 @@ export default function Layout() {
}
: {}
}
// Setting a transform property (in this case scale) on an element makes it act as a containing block for its descendants.
// This means that the snackbar notices inside this component are repositioned to be relative to this element.
// To avoid the snackbars jumping about we need to ensure that a transform property is always set.
// Setting a scale of 1 is interpred by framer as no change, so once the animation completes
// the transform property of this element is set to none, thus removing its role as a container block.
// Instead we set the initial scale of this element to 1.0001 so that there is always a transform property set.
// If we set the initial scale to less than 1.001 then JavaScript rounds it to 1 and the problem reoccurs.
initial={ { scale: 1.001 } }
initial={ false }
layout="position"
className="edit-site-layout__canvas"
transition={ {
type: 'tween',
Expand Down

1 comment on commit 0fb3f60

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 0fb3f60.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5076306248
📝 Reported issues:

Please sign in to comment.