154 lines
3.9 KiB
JavaScript
154 lines
3.9 KiB
JavaScript
/**
|
|
* Block editor enhancements.
|
|
*
|
|
* Contains functionality to dynamically update the block editor
|
|
* configuration and styling.
|
|
*/
|
|
(function () {
|
|
/**
|
|
* Check if the main sidebar is active (has widgets).
|
|
*
|
|
* This uses a custom property `mainSidebarActive` added via the
|
|
* `block_editor_settings` filter.
|
|
*
|
|
* @return {boolean} Whether sidebar is active.
|
|
*/
|
|
var sidebarIsActive = function sidebarIsActive() {
|
|
var settings = wp.data.select('core/editor').getEditorSettings();
|
|
|
|
if (settings.hasOwnProperty('mainSidebarActive') && !!settings.mainSidebarActive) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
/**
|
|
* Get current page template name.
|
|
*
|
|
* @return {string} The page template name.
|
|
*/
|
|
|
|
|
|
var getCurrentPageTemplate = function getCurrentPageTemplate() {
|
|
return wp.data.select('core/editor').getEditedPostAttribute('template');
|
|
};
|
|
/**
|
|
* Check if the active theme supports a wide layout.
|
|
*
|
|
* @return {boolean} Whether the theme supports wide layout.
|
|
*/
|
|
|
|
|
|
var themeSupportsWide = function themeSupportsWide() {
|
|
var settings = wp.data.select('core/editor').getEditorSettings();
|
|
|
|
if (settings.hasOwnProperty('alignWide') && !!settings.alignWide) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
/**
|
|
* Update editor wide support.
|
|
*
|
|
* @param {boolean} alignWide Whether the editor supports
|
|
* alignWide support.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
|
|
|
|
var updateWideSupport = function updateWideSupport(alignWide) {
|
|
wp.data.dispatch('core/editor').updateEditorSettings({
|
|
'alignWide': !!alignWide
|
|
});
|
|
};
|
|
/**
|
|
* Update `data-align` attribute on each block.
|
|
*
|
|
* @param {boolean} alignWide Whether alignWide is supported.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
|
|
|
|
var updateAlignAttribute = function updateAlignAttribute(alignWide) {
|
|
var blocks = wp.data.select('core/editor').getBlocks();
|
|
blocks.forEach(function (block) {
|
|
if (block.attributes.hasOwnProperty('align')) {
|
|
var align = block.attributes.align;
|
|
|
|
if (!['full', 'wide'].includes(align)) {
|
|
return;
|
|
}
|
|
|
|
var blockWrapper = document.getElementById('block-' + block.clientId);
|
|
|
|
if (blockWrapper) {
|
|
blockWrapper.setAttribute('data-align', alignWide ? align : '');
|
|
}
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
* Add custom class to editor wrapper if main sidebar is active.
|
|
*
|
|
* @param {boolean} showSidebar Whether to add custom class.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
|
|
|
|
var toggleCustomSidebarClass = function toggleCustomSidebarClass(showSidebar) {
|
|
var editorWrapper = document.getElementsByClassName('editor-writing-flow');
|
|
|
|
if (!editorWrapper.length) {
|
|
return;
|
|
}
|
|
|
|
if (!!showSidebar) {
|
|
editorWrapper[0].classList.add('storefront-has-sidebar');
|
|
} else {
|
|
editorWrapper[0].classList.remove('storefront-has-sidebar');
|
|
}
|
|
};
|
|
/**
|
|
* Update editor and blocks when layout changes.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
|
|
|
|
var maybeUpdateEditor = function maybeUpdateEditor() {
|
|
if ('template-fullwidth.php' === getCurrentPageTemplate()) {
|
|
updateWideSupport(true);
|
|
toggleCustomSidebarClass(false);
|
|
updateAlignAttribute(true);
|
|
} else if (sidebarIsActive()) {
|
|
updateWideSupport(false);
|
|
toggleCustomSidebarClass(true);
|
|
updateAlignAttribute(false);
|
|
} else {
|
|
updateWideSupport(true);
|
|
toggleCustomSidebarClass(false);
|
|
updateAlignAttribute(true);
|
|
}
|
|
};
|
|
|
|
wp.domReady(function () {
|
|
// Don't do anything if the theme doesn't declare support for `align-wide`.
|
|
if (!themeSupportsWide()) {
|
|
return;
|
|
}
|
|
|
|
maybeUpdateEditor();
|
|
var pageTemplate = getCurrentPageTemplate();
|
|
wp.data.subscribe(function () {
|
|
if (getCurrentPageTemplate() !== pageTemplate) {
|
|
pageTemplate = getCurrentPageTemplate();
|
|
maybeUpdateEditor();
|
|
}
|
|
});
|
|
});
|
|
})();
|