Skip to content

Editor: Move the resizing of the editor to the EditorCanvas component #61896

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

Merged
youknowriad merged 5 commits into from
May 23, 2024
Merged

Editor: Move the resizing of the editor to the EditorCanvas component #61896

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e27d24d
Editor: Move the resizing of the editor to the EditorCanvas component
youknowriad May 23, 2024
124e247
Fix build
youknowriad May 23, 2024
ecbed8e
Fix canvas height
youknowriad May 23, 2024
f801285
Fix stylebook
youknowriad May 23, 2024
caca649
Fix linting
youknowriad May 23, 2024
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
Prev Previous commit
Next Next commit
Fix stylebook
  • Loading branch information
@youknowriad
youknowriad committed May 23, 2024
commit f801285564285566df60877161bde18908202594
40 changes: 21 additions & 19 deletions packages/edit-site/src/components/editor-canvas-container/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,25 +124,27 @@ function EditorCanvasContainer( {

return (
<EditorCanvasContainerFill>
<ResizableEditor enableResizing={ enableResizing }>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
<section
className="edit-site-editor-canvas-container"
ref={ shouldShowCloseButton ? focusOnMountRef : null }
onKeyDown={ closeOnEscape }
aria-label={ title }
>
{ shouldShowCloseButton && (
<Button
className="edit-site-editor-canvas-container__close-button"
icon={ closeSmall }
label={ closeButtonLabel || __( 'Close' ) }
onClick={ onCloseContainer }
/>
) }
{ childrenWithProps }
</section>
</ResizableEditor>
<div className="edit-site-editor-canvas-container">
<ResizableEditor enableResizing={ enableResizing }>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
<section
className="edit-site-editor-canvas-container__section"
ref={ shouldShowCloseButton ? focusOnMountRef : null }
onKeyDown={ closeOnEscape }
aria-label={ title }
>
{ shouldShowCloseButton && (
<Button
className="edit-site-editor-canvas-container__close-button"
icon={ closeSmall }
label={ closeButtonLabel || __( 'Close' ) }
onClick={ onCloseContainer }
/>
) }
{ childrenWithProps }
</section>
</ResizableEditor>
</div>
</EditorCanvasContainerFill>
);
}
Expand Down
8 changes: 8 additions & 0 deletions packages/edit-site/src/components/editor-canvas-container/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
.edit-site-editor-canvas-container {
height: 100%;

.edit-site-layout.is-full-canvas & {
padding: $grid-unit-30 $grid-unit-30 0;
}
}

.edit-site-editor-canvas-container__section {
background: $white; // Fallback color, overridden by JavaScript.
border-radius: $radius-block-ui;
bottom: 0;
Expand Down
7 changes: 0 additions & 7 deletions packages/editor/src/components/editor-canvas/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,6 @@

&.is-resizable {
max-height: 100%;

// To hide the horizontal scrollbar and show the drag handle on the
// left and right of the container.
.components-resizable-box__container {
overflow: visible;
margin: 0 auto;
}
}

&.has-padding {
Expand Down
9 changes: 8 additions & 1 deletion packages/editor/src/components/resizable-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -32,7 +37,9 @@ function ResizableEditor( { className, enableResizing, height, children } ) {
}, [] );
return (
<ResizableBox
className={ className }
className={ clsx( 'editor-resizable-editor', className, {
'is-resizable': enableResizing,
} ) }
ref={ ( api ) => {
resizableRef.current = api?.resizable;
} }
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/resizable-editor/resize-handle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
<>
<Tooltip text={ __( 'Drag to resize' ) }>
<motion.button
className={ `resizable-editor__resize-handle is-${ direction }` }
className={ `editor-resizable-editor__resize-handle is-${ direction }` }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={ resizableHandleHelpId }
onKeyDown={ handleKeyDown }
Expand Down
9 changes: 8 additions & 1 deletion packages/editor/src/components/resizable-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
.resizable-editor__resize-handle {
// To hide the horizontal scrollbar and show the drag handle on the
// left and right of the container.
.editor-resizable-editor.is-resizable {
overflow: visible;
margin: 0 auto;
}

.editor-resizable-editor__resize-handle {
position: absolute;
top: 0;
bottom: 0;
Expand Down