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

Dynamically update block editor layout and styling #1033

Merged
merged 9 commits into from
Jan 9, 2019
Merged

Dynamically update block editor layout and styling #1033

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
64a1604
Dynamically update block editor layout and functionality and styling
tiagonoronha Dec 19, 2018
d782cc4
Add babel as a dependency
tiagonoronha Dec 19, 2018
5211ee6
Update .gitignore to exclude new file `editor.js` from grunt build
tiagonoronha Dec 19, 2018
2acfabe
Add babel as a Grunt task
tiagonoronha Dec 19, 2018
e1fe289
Merge branch 'master' of github.com:woocommerce/storefront into tweak…
tiagonoronha Dec 19, 2018
7254924
Update script dependencies
tiagonoronha Jan 9, 2019
2cb6d0e
Switch from updating block data to only visual tweaks
tiagonoronha Jan 9, 2019
36b11ae
Add `wp-edit-post` as a dependency for editor.js
tiagonoronha Jan 9, 2019
102d7de
Update Grunt watch task to include new editor.js file
tiagonoronha Jan 9, 2019
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
Switch from updating block data to only visual tweaks
  • Loading branch information
@tiagonoronha
tiagonoronha committed Jan 9, 2019
commit 2cb6d0e31e30b4e808af68470b89023031376950
28 changes: 18 additions & 10 deletions assets/js/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
/**
* Update editor wide support.
*
* @param {boolean} alignWide Whether to enable or disable
* @param {boolean} alignWide Whether the editor supports
* alignWide support.
*
* @return {void}
Expand All @@ -62,22 +62,28 @@
};

/**
* Update blocks to remove alignWide support.
* Update `data-align` attribute on each block.
*
* @param {boolean} alignWide Whether alignWide is supported.
*
* @return {void}
*/
const removeWideAlignFromBlocks = () => {
const updateAlignAttribute = ( alignWide ) => {
let blocks = wp.data.select( 'core/editor' ).getBlocks();

blocks.forEach( ( block ) => {
let align = '';

if ( block.attributes.hasOwnProperty( 'align' ) ) {
align = block.attributes.align;
}
let align = block.attributes.align;

if ( ! [ 'full', 'wide' ].includes( align ) ) {
return;
}

let blockWrapper = document.getElementById( 'block-' + block.clientId );

if ( 'full' === align || 'wide' === align ) {
wp.data.dispatch( 'core/editor' ).updateBlockAttributes( block.clientId, { 'align': '' } );
if ( blockWrapper ) {
blockWrapper.setAttribute( 'data-align', alignWide ? align : '' );
}
}
} );
};
Expand Down Expand Up @@ -112,13 +118,15 @@
if ( 'template-fullwidth.php' === getCurrentPageTemplate() ) {
updateWideSupport( true );
toggleCustomSidebarClass( false );
updateAlignAttribute( true );
} else if ( sidebarIsActive() ) {
updateWideSupport( false );
removeWideAlignFromBlocks();
toggleCustomSidebarClass( true );
updateAlignAttribute( false );
} else {
updateWideSupport( true );
toggleCustomSidebarClass( false );
updateAlignAttribute( true );
}
};

Expand Down