diff --git a/package-lock.json b/package-lock.json index d4ef5dc8f10958..7ed715f7450797 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14160,10 +14160,59 @@ "@wordpress/viewport": "file:packages/viewport", "@wordpress/warning": "file:packages/warning", "classnames": "^2.2.5", + "framer-motion": "^4.1.3", "lodash": "^4.17.19", "memize": "^1.1.0", "rememo": "^3.0.0", "uuid": "8.3.0" + }, + "dependencies": { + "framer-motion": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.3.tgz", + "integrity": "sha512-WJ3iZiMgzR3cf/W5/o5OwGyNeXvjuIriItPnDtqbAGgd8rCq5ysAW3RS4cC2i2wVA9EfrlxWmosTt+lKhaVI3Q==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.5", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, + "framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "requires": { + "tslib": "^2.1.0" + } + }, + "popmotion": { + "version": "9.3.5", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.5.tgz", + "integrity": "sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw==", + "requires": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, + "style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" + } } }, "@wordpress/edit-site": { diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js index 587a151c3b946d..f90e67604f31d8 100644 --- a/packages/block-editor/src/components/use-resize-canvas/index.js +++ b/packages/block-editor/src/components/use-resize-canvas/index.js @@ -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; diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 70fe724b6347e8..db05d8718c5fd1 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -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", diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index a78806557eb6e3..5a50f3b601fa57 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { motion, AnimatePresence } from 'framer-motion'; /** * WordPress dependencies @@ -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, @@ -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 || {}; @@ -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(), @@ -85,10 +102,11 @@ export default function VisualEditor( { styles } ) { const blockSelectionClearerRef = useBlockSelectionClearer( true ); return ( -
{ themeSupportsLayout && ( @@ -109,37 +127,46 @@ export default function VisualEditor( { styles } ) { { __( 'Back' ) } ) } -
- - { ! isTemplateMode && ( -
- -
- ) } - - -
+ + + + { ! isTemplateMode && ( +
+ +
+ ) } + + + + + <__experimentalBlockSettingsMenuFirstItem> { ( { onClose } ) => ( ) } -
+ ); } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 6a687b1d454f0f..8696a841c24f2e 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -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. @@ -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 { @@ -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