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

Jump to bottom

Animate the canvas transitions #30802

Merged
merged 5 commits into from
Apr 14, 2021
Merged

Animate the canvas transitions #30802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d94be2
Animate the canvas transitions
youknowriad Apr 13, 2021
e23bc1a
Use framer motion and add a fade animation
youknowriad Apr 13, 2021
985a7fd
Fix animation
youknowriad Apr 14, 2021
e9e394d
full height for the added div
youknowriad Apr 14, 2021
f3fb997
Initially, make the height 100%
youknowriad Apr 14, 2021
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
49 changes: 49 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 1 addition & 4 deletions packages/block-editor/src/components/use-resize-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,10 @@ export default function useResizeCanvas(
return {
width: getCanvasWidth( device ),
margin: marginValue() + 'px auto',
flexGrow: 0,
height,
minHeight: height,
maxHeight: height,
overflowY: 'auto',
borderRadius: '2px',
border: '1px solid #ddd',
overflowY: 'auto',
};
default:
return null;
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@wordpress/viewport": "file:../viewport",
"@wordpress/warning": "file:../warning",
"classnames": "^2.2.5",
"framer-motion": "^4.1.3",
"lodash": "^4.17.19",
"memize": "^1.1.0",
"rememo": "^3.0.0",
Expand Down
77 changes: 52 additions & 25 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { motion, AnimatePresence } from 'framer-motion';

/**
* WordPress dependencies
Expand Down Expand Up @@ -40,6 +41,7 @@ import { store as editPostStore } from '../../store';

export default function VisualEditor( { styles } ) {
const ref = useRef();

const { deviceType, isTemplateMode } = useSelect( ( select ) => {
const {
isEditingTemplate,
Expand All @@ -61,10 +63,18 @@ export default function VisualEditor( { styles } ) {
const { setIsEditingTemplate } = useDispatch( editPostStore );
const desktopCanvasStyles = {
height: '100%',
width: '100%',
margin: 0,
// Add a constant padding for the typewritter effect. When typing at the
// bottom, there needs to be room to scroll up.
paddingBottom: hasMetaBoxes ? null : '40vh',
};
const templateModeStyles = {
...desktopCanvasStyles,
borderRadius: '2px',
border: '1px solid #ddd',
paddingBottom: null,
};
const resizedCanvasStyles = useResizeCanvas( deviceType );
const defaultLayout = useEditorFeature( 'layout' );
const { contentSize, wideSize } = defaultLayout || {};
Expand All @@ -73,6 +83,13 @@ export default function VisualEditor( { styles } ) {
? [ 'wide', 'full' ]
: [ 'left', 'center', 'right' ];

let animatedStyles = isTemplateMode
? templateModeStyles
: desktopCanvasStyles;
if ( resizedCanvasStyles ) {
animatedStyles = resizedCanvasStyles;
}

const mergedRefs = useMergeRefs( [
ref,
useClipboardHandler(),
Expand All @@ -85,10 +102,11 @@ export default function VisualEditor( { styles } ) {
const blockSelectionClearerRef = useBlockSelectionClearer( true );

return (
<div
<motion.div
className={ classnames( 'edit-post-visual-editor', {
'is-template-mode': isTemplateMode,
} ) }
animate={ isTemplateMode ? { padding: '48px' } : { padding: 0 } }
ref={ blockSelectionClearerRef }
>
{ themeSupportsLayout && (
Expand All @@ -109,37 +127,46 @@ export default function VisualEditor( { styles } ) {
{ __( 'Back' ) }
</Button>
) }
<div
<motion.div
ref={ mergedRefs }
className="editor-styles-wrapper"
style={ resizedCanvasStyles || desktopCanvasStyles }
animate={ animatedStyles }
initial={ desktopCanvasStyles }
>
<WritingFlow>
{ ! isTemplateMode && (
<div className="edit-post-visual-editor__post-title-wrapper">
<PostTitle />
</div>
) }
<BlockList
__experimentalLayout={
themeSupportsLayout
? {
type: 'default',
// Find a way to inject this in the support flag code (hooks).
alignments: themeSupportsLayout
? alignments
: undefined,
}
: undefined
}
/>
</WritingFlow>
</div>
<AnimatePresence>
<motion.div
key={ isTemplateMode ? 'template' : 'post' }
initial={ { opacity: 0 } }
animate={ { opacity: 1 } }
>
Copy link
Member

Choose a reason for hiding this comment

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

Why the need for a second div? Can't this be part of the motion.div above?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It needs to be unmounted/remounted to trigger the exit transition and it needs to fade/in out just the content and not the frame.

Copy link
Member

Choose a reason for hiding this comment

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

What's the difference visually? Fading out the frame or content would look the same?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The frame resizes itself at the same time, if we remount it, we kill that animation.

<WritingFlow>
{ ! isTemplateMode && (
<div className="edit-post-visual-editor__post-title-wrapper">
<PostTitle />
</div>
) }
<BlockList
__experimentalLayout={
themeSupportsLayout
? {
type: 'default',
// Find a way to inject this in the support flag code (hooks).
alignments: themeSupportsLayout
? alignments
: undefined,
}
: undefined
}
/>
</WritingFlow>
</motion.div>
</AnimatePresence>
</motion.div>
<__experimentalBlockSettingsMenuFirstItem>
{ ( { onClose } ) => (
<BlockInspectorButton onClick={ onClose } />
) }
</__experimentalBlockSettingsMenuFirstItem>
</div>
</motion.div>
);
}
13 changes: 5 additions & 8 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.edit-post-visual-editor {
position: relative;


// The button element easily inherits styles that are meant for the editor style.
// These rules enhance the specificity to reduce that inheritance.
// This is duplicated in edit-site.
Expand All @@ -24,14 +25,6 @@
flex-basis: 100%;
}

&.is-template-mode {
padding: $grid-unit-60;

.editor-styles-wrapper {
border-radius: 2px;
border: 1px solid $gray-300;
}
}
}

.editor-styles-wrapper {
Expand All @@ -44,6 +37,10 @@
> * {
cursor: auto;
}

> div {
min-height: 100%;
}
}

// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
Expand Down