Skip to content

Commit

Permalink
Resizable editor experiment
Browse files Browse the repository at this point in the history
  • Loading branch information
tellthemachines committed Dec 12, 2019
1 parent 2ebfb64 commit 709e363
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 4 deletions.
10 changes: 8 additions & 2 deletions package-lock.json

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

1 change: 1 addition & 0 deletions packages/edit-post/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@wordpress/url": "file:../url",
"@wordpress/viewport": "file:../viewport",
"classnames": "^2.2.5",
"css-mediaquery": "^0.1.2",
"lodash": "^4.17.15",
"memize": "^1.0.5",
"refx": "^3.0.0",
Expand Down
52 changes: 50 additions & 2 deletions packages/edit-post/src/components/editor-regions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,47 @@
* External dependencies
*/
import classnames from 'classnames';

import { match } from 'css-mediaquery';
import { difference } from 'lodash';
/**
* WordPress dependencies
*/
import { navigateRegions } from '@wordpress/components';
import { navigateRegions, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';

const styleStorage = {};

function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
const [ contentWidth, updatecontentWidth ] = useState( {} );
const getMQs = ( width ) => {
const leastWidth = width < window.innerWidth ? `${ width }px` : `${ window.innerWidth }px`;
Object.values( document.styleSheets )
.filter( ( sheet ) => sheet.href && ( sheet.href.includes( 'editor-style' ) || sheet.href.includes( 'block-editor' ) || sheet.href.includes( 'block-library' ) ) )
.forEach( ( sheet, index ) => {
if ( ! styleStorage[ index ] ) {
styleStorage[ index ] = [];
} else {
const rulesToInsert = styleStorage[ index ].filter( ( rule ) => rule.media && match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) );
rulesToInsert.forEach( ( rule ) => sheet.insertRule( rule.cssText, sheet.cssRules.length ) );
styleStorage[ index ] = difference( styleStorage[ index ], rulesToInsert );
}
const rulesToDelete = Object.values( sheet.cssRules ).reduce( function( result, rule, rulesIndex ) {
if ( rule.media && ! match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) ) {
result.push( rulesIndex );
}
return result;
}, [] );
let countDeleted = 0;
rulesToDelete.forEach( ( item ) => {
if ( Number.isInteger( item ) ) {
styleStorage[ index ].push( sheet.cssRules[ item - countDeleted ] );
sheet.deleteRule( item - countDeleted );
countDeleted++;
}
} );
} );
};
return (
<div className={ classnames( className, 'edit-post-editor-regions' ) }>
{ !! header && (
Expand All @@ -24,12 +57,27 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
</div>
) }
<div className="edit-post-editor-regions__body">
<div className="edit-post-editor-regions__width-toggles">
<Button isTertiary isLarge onClick={ () => {
updatecontentWidth( {} );
getMQs( 2000 );
} }>Desktop</Button>
<Button isTertiary isLarge onClick={ () => {
updatecontentWidth( { width: '780px', margin: '0 auto', flexGrow: 0 } );
getMQs( 780 );
} }>Tablet</Button>
<Button isTertiary isLarge onClick={ () => {
updatecontentWidth( { width: '340px', margin: '0 auto', flexGrow: 0 } );
getMQs( 340 );
} }>Mobile</Button>
</div>
<div
className="edit-post-editor-regions__content"
role="region"
/* translators: accessibility text for the content landmark region. */
aria-label={ __( 'Editor content' ) }
tabIndex="-1"
style={ contentWidth }
>
{ content }
</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/edit-post/src/components/editor-regions/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,14 @@ html {
overscroll-behavior-y: none;
}

.edit-post-editor-regions__width-toggles {
position: absolute;
top: 30px;
z-index: 31;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.edit-post-editor-regions__content {
flex-grow: 1;

Expand Down

0 comments on commit 709e363

Please sign in to comment.