Skip to content

Commit

Permalink
Merge branch 'release/2.11.6'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Misplon
Misplon committed Dec 3, 2020
2 parents 815bc56 + ac8b222 commit 68147e8
Show file tree
Hide file tree
Showing 11 changed files with 114 additions and 97 deletions.
2 changes: 1 addition & 1 deletion build
Submodule build updated 1 files
+4 −3 gulpfile.js
71 changes: 26 additions & 45 deletions compat/js/siteorigin-panels-layout-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,29 +48,10 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var _lodash = lodash,
isEqual = _lodash.isEqual,
debounce = _lodash.debounce,
isEmpty = _lodash.isEmpty,
isFunction = _lodash.isFunction;
var registerBlockType = wp.blocks.registerBlockType;
var _wp$element = wp.element,
Component = _wp$element.Component,
Fragment = _wp$element.Fragment,
RawHTML = _wp$element.RawHTML,
createRef = _wp$element.createRef;
var BlockControls = wp.editor.BlockControls;
var _wp$components = wp.components,
Toolbar = _wp$components.Toolbar,
IconButton = _wp$components.IconButton,
Spinner = _wp$components.Spinner;
var _window = window,
soPanelsBlockEditorAdmin = _window.soPanelsBlockEditorAdmin;

var SiteOriginPanelsLayoutBlock =
/*#__PURE__*/
function (_Component) {
_inherits(SiteOriginPanelsLayoutBlock, _Component);
function (_wp$element$Component) {
_inherits(SiteOriginPanelsLayoutBlock, _wp$element$Component);

var _super = _createSuper(SiteOriginPanelsLayoutBlock);

Expand All @@ -80,15 +61,15 @@ function (_Component) {
_classCallCheck(this, SiteOriginPanelsLayoutBlock);

_this = _super.call(this, props);
var editMode = soPanelsBlockEditorAdmin.defaultMode === 'edit' || isEmpty(props.panelsData);
var editMode = window.soPanelsBlockEditorAdmin.defaultMode === 'edit' || lodash.isEmpty(props.panelsData);
_this.state = {
editing: editMode,
loadingPreview: !editMode,
previewHtml: '',
previewInitialized: !editMode
};
_this.panelsContainer = createRef();
_this.previewContainer = createRef();
_this.panelsContainer = wp.element.createRef();
_this.previewContainer = wp.element.createRef();
_this.panelsInitialized = false;
return _this;
}
Expand All @@ -102,7 +83,7 @@ function (_Component) {
this.setupPanels();
} else if (!this.state.editing && !this.previewInitialized) {
this.fetchPreview(this.props);
this.fetchPreview = debounce(this.fetchPreview, 500);
this.fetchPreview = lodash.debounce(this.fetchPreview, 500);
}
}
}, {
Expand All @@ -121,7 +102,7 @@ function (_Component) {
this.setupPanels();
} else if (this.state.loadingPreview) {
this.fetchPreview(this.props);
this.fetchPreview = debounce(this.fetchPreview, 500);
this.fetchPreview = lodash.debounce(this.fetchPreview, 500);
} else if (!this.state.previewInitialized) {
jQuery(document).trigger('panels_setup_preview');
this.setState({
Expand All @@ -138,8 +119,8 @@ function (_Component) {
var config = {
editorType: 'standalone',
loadLiveEditor: false,
postId: soPanelsBlockEditorAdmin.postId,
liveEditorPreview: soPanelsBlockEditorAdmin.liveEditor
postId: window.soPanelsBlockEditorAdmin.postId,
liveEditorPreview: window.soPanelsBlockEditorAdmin.liveEditor
};
var builderModel = new panels.model.builder();
this.builderView = new panels.view.builder({
Expand All @@ -150,14 +131,14 @@ function (_Component) {
var panelsData = JSON.parse(JSON.stringify(jQuery.extend({}, this.props.panelsData))); // Disable block selection while dragging rows or widgets.

var rowOrWidgetMouseDown = function rowOrWidgetMouseDown() {
if (isFunction(_this2.props.onRowOrWidgetMouseDown)) {
if (lodash.isFunction(_this2.props.onRowOrWidgetMouseDown)) {
_this2.props.onRowOrWidgetMouseDown();
}

var rowOrWidgetMouseUp = function rowOrWidgetMouseUp() {
jQuery(document).off('mouseup', rowOrWidgetMouseUp);

if (isFunction(_this2.props.onRowOrWidgetMouseUp)) {
if (lodash.isFunction(_this2.props.onRowOrWidgetMouseUp)) {
_this2.props.onRowOrWidgetMouseUp();
}
};
Expand Down Expand Up @@ -186,10 +167,10 @@ function (_Component) {
this.builderView.on('content_change', function () {
var newPanelsData = _this2.builderView.getData();

_this2.panelsDataChanged = !isEqual(panelsData, newPanelsData);
_this2.panelsDataChanged = !lodash.isEqual(panelsData, newPanelsData);

if (_this2.panelsDataChanged) {
if (_this2.props.onContentChange && isFunction(_this2.props.onContentChange)) {
if (_this2.props.onContentChange && lodash.isFunction(_this2.props.onContentChange)) {
_this2.props.onContentChange(newPanelsData);
}

Expand Down Expand Up @@ -221,7 +202,7 @@ function (_Component) {
previewInitialized: false
});
var fetchRequest = this.currentFetchRequest = jQuery.post({
url: soPanelsBlockEditorAdmin.previewUrl,
url: window.soPanelsBlockEditorAdmin.previewUrl,
data: {
action: 'so_panels_layout_block_preview',
panelsData: JSON.stringify(props.panelsData)
Expand Down Expand Up @@ -263,7 +244,7 @@ function (_Component) {
};

if (this.state.editing) {
return React.createElement(Fragment, null, React.createElement(BlockControls, null, React.createElement(Toolbar, null, React.createElement(IconButton, {
return React.createElement(wp.element.Fragment, null, React.createElement(wp.editor.BlockControls, null, React.createElement(wp.components.Toolbar, null, React.createElement(wp.components.IconButton, {
icon: "visibility",
className: "components-icon-button components-toolbar__control",
label: wp.i18n.__('Preview layout.', 'siteorigin-panels'),
Expand All @@ -275,7 +256,7 @@ function (_Component) {
}));
} else {
var loadingPreview = this.state.loadingPreview;
return React.createElement(Fragment, null, React.createElement(BlockControls, null, React.createElement(Toolbar, null, React.createElement(IconButton, {
return React.createElement(wp.element.Fragment, null, React.createElement(wp.editor.BlockControls, null, React.createElement(wp.components.Toolbar, null, React.createElement(wp.components.IconButton, {
icon: "edit",
className: "components-icon-button components-toolbar__control",
label: wp.i18n.__('Edit layout.', 'siteorigin-panels'),
Expand All @@ -285,21 +266,21 @@ function (_Component) {
className: "so-panels-block-layout-preview-container"
}, loadingPreview ? React.createElement("div", {
className: "so-panels-spinner-container"
}, React.createElement("span", null, React.createElement(Spinner, null))) : React.createElement("div", {
}, React.createElement("span", null, React.createElement(wp.components.Spinner, null))) : React.createElement("div", {
className: "so-panels-raw-html-container",
ref: this.previewContainer
}, React.createElement(RawHTML, null, this.state.previewHtml))));
}, React.createElement(wp.element.RawHTML, null, this.state.previewHtml))));
}
}
}]);

return SiteOriginPanelsLayoutBlock;
}(Component);
}(wp.element.Component);

var hasLayoutCategory = wp.blocks.getCategories().some(function (category) {
return category.slug === 'layout';
});
registerBlockType('siteorigin-panels/layout-block', {
wp.blocks.registerBlockType('siteorigin-panels/layout-block', {
title: wp.i18n.__('SiteOrigin Layout', 'siteorigin-panels'),
description: wp.i18n.__("Build a layout using SiteOrigin's Page Builder.", 'siteorigin-panels'),
icon: function icon() {
Expand All @@ -326,7 +307,7 @@ registerBlockType('siteorigin-panels/layout-block', {
toggleSelection = _ref.toggleSelection;

var onLayoutBlockContentChange = function onLayoutBlockContentChange(newPanelsData) {
if (!_.isEmpty(newPanelsData.widgets)) {
if (!lodash.isEmpty(newPanelsData.widgets)) {
// Send panelsData to server for sanitization.
wp.data.dispatch('core/editor').lockPostSaving();
jQuery.post(panelsOptions.ajaxurl, {
Expand Down Expand Up @@ -367,12 +348,12 @@ registerBlockType('siteorigin-panels/layout-block', {
},
save: function save(_ref2) {
var attributes = _ref2.attributes;
return attributes.hasOwnProperty('contentPreview') ? React.createElement(RawHTML, null, attributes.contentPreview) : null;
return attributes.hasOwnProperty('contentPreview') ? React.createElement(wp.element.RawHTML, null, attributes.contentPreview) : null;
}
});

(function (jQuery) {
if (soPanelsBlockEditorAdmin.showAddButton) {
if (window.soPanelsBlockEditorAdmin.showAddButton) {
jQuery(function () {
setTimeout(function () {
var editorDispatch = wp.data.dispatch('core/editor');
Expand Down Expand Up @@ -411,11 +392,11 @@ registerBlockType('siteorigin-panels/layout-block', {
}, 100);
});
}
})(jQuery);
})(jQuery); // Detect preview mode changes, and trigger resize.


// Detect preview mode changes, and trigger resize.
jQuery(document).on('click', '.block-editor-post-preview__button-resize', function (e) {
if (!jQuery(this).hasClass('has-icon')) {
jQuery(window).trigger('resize');
}
});
});
73 changes: 33 additions & 40 deletions compat/js/siteorigin-panels-layout-block.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
const { isEqual, debounce, isEmpty, isFunction } = lodash;
const { registerBlockType } = wp.blocks;
const { Component, Fragment, RawHTML, createRef } = wp.element;
const { BlockControls } = wp.editor;
const { Toolbar, IconButton, Spinner } = wp.components;
const { soPanelsBlockEditorAdmin } = window;

class SiteOriginPanelsLayoutBlock extends Component {
class SiteOriginPanelsLayoutBlock extends wp.element.Component {
constructor( props ) {
super( props );
const editMode = soPanelsBlockEditorAdmin.defaultMode === 'edit' || isEmpty( props.panelsData );
const editMode = window.soPanelsBlockEditorAdmin.defaultMode === 'edit' || lodash.isEmpty( props.panelsData );
this.state = {
editing: editMode,
loadingPreview: ! editMode,
previewHtml: '',
previewInitialized: ! editMode,
};
this.panelsContainer = createRef();
this.previewContainer = createRef();
this.panelsContainer = wp.element.createRef();
this.previewContainer = wp.element.createRef();
this.panelsInitialized = false;
}

Expand All @@ -27,7 +20,7 @@ class SiteOriginPanelsLayoutBlock extends Component {
this.setupPanels();
} else if ( ! this.state.editing && ! this.previewInitialized ) {
this.fetchPreview( this.props );
this.fetchPreview = debounce( this.fetchPreview, 500 );
this.fetchPreview = lodash.debounce( this.fetchPreview, 500 );
}
}

Expand All @@ -43,7 +36,7 @@ class SiteOriginPanelsLayoutBlock extends Component {
this.setupPanels();
} else if ( this.state.loadingPreview ) {
this.fetchPreview( this.props );
this.fetchPreview = debounce( this.fetchPreview, 500 );
this.fetchPreview = lodash.debounce( this.fetchPreview, 500 );
} else if ( ! this.state.previewInitialized ) {
jQuery( document ).trigger( 'panels_setup_preview' );
this.setState( {
Expand All @@ -58,8 +51,8 @@ class SiteOriginPanelsLayoutBlock extends Component {
var config = {
editorType: 'standalone',
loadLiveEditor: false,
postId: soPanelsBlockEditorAdmin.postId,
liveEditorPreview: soPanelsBlockEditorAdmin.liveEditor,
postId: window.soPanelsBlockEditorAdmin.postId,
liveEditorPreview: window.soPanelsBlockEditorAdmin.liveEditor,
};

var builderModel = new panels.model.builder();
Expand All @@ -74,12 +67,12 @@ class SiteOriginPanelsLayoutBlock extends Component {

// Disable block selection while dragging rows or widgets.
let rowOrWidgetMouseDown = () => {
if ( isFunction( this.props.onRowOrWidgetMouseDown ) ) {
if ( lodash.isFunction( this.props.onRowOrWidgetMouseDown ) ) {
this.props.onRowOrWidgetMouseDown();
}
let rowOrWidgetMouseUp = () => {
jQuery( document ).off( 'mouseup', rowOrWidgetMouseUp );
if ( isFunction( this.props.onRowOrWidgetMouseUp ) ) {
if ( lodash.isFunction( this.props.onRowOrWidgetMouseUp ) ) {
this.props.onRowOrWidgetMouseUp();
}
};
Expand Down Expand Up @@ -109,9 +102,9 @@ class SiteOriginPanelsLayoutBlock extends Component {

this.builderView.on( 'content_change', () => {
const newPanelsData = this.builderView.getData();
this.panelsDataChanged = !isEqual( panelsData, newPanelsData );
this.panelsDataChanged = !lodash.isEqual( panelsData, newPanelsData );
if ( this.panelsDataChanged ) {
if ( this.props.onContentChange && isFunction( this.props.onContentChange ) ) {
if ( this.props.onContentChange && lodash.isFunction( this.props.onContentChange ) ) {
this.props.onContentChange( newPanelsData );
}
this.setState( { loadingPreview: true, previewHtml: '' } );
Expand All @@ -138,7 +131,7 @@ class SiteOriginPanelsLayoutBlock extends Component {
} );

const fetchRequest = this.currentFetchRequest = jQuery.post( {
url: soPanelsBlockEditorAdmin.previewUrl,
url: window.soPanelsBlockEditorAdmin.previewUrl,
data: {
action: 'so_panels_layout_block_preview',
panelsData: JSON.stringify( props.panelsData ),
Expand Down Expand Up @@ -176,50 +169,50 @@ class SiteOriginPanelsLayoutBlock extends Component {

if ( this.state.editing ) {
return (
<Fragment>
<BlockControls>
<Toolbar>
<IconButton
<wp.element.Fragment>
<wp.editor.BlockControls>
<wp.components.Toolbar>
<wp.components.IconButton
icon="visibility"
className="components-icon-button components-toolbar__control"
label={ wp.i18n.__( 'Preview layout.', 'siteorigin-panels' ) }
onClick={ switchToPreview }
/>
</Toolbar>
</BlockControls>
</wp.components.Toolbar>
</wp.editor.BlockControls>
<div
key="layout-block"
className="siteorigin-panels-layout-block-container"
ref={this.panelsContainer}
/>
</Fragment>
</wp.element.Fragment>
);
} else {
const loadingPreview = this.state.loadingPreview;
return (
<Fragment>
<BlockControls>
<Toolbar>
<IconButton
<wp.element.Fragment>
<wp.editor.BlockControls>
<wp.components.Toolbar>
<wp.components.IconButton
icon="edit"
className="components-icon-button components-toolbar__control"
label={ wp.i18n.__( 'Edit layout.', 'siteorigin-panels' ) }
onClick={ switchToEditing }
/>
</Toolbar>
</BlockControls>
</wp.components.Toolbar>
</wp.editor.BlockControls>
<div key="preview" className="so-panels-block-layout-preview-container">
{ loadingPreview ? (
<div className="so-panels-spinner-container">
<span><Spinner/></span>
<span><wp.components.Spinner/></span>
</div>
) : (
<div className="so-panels-raw-html-container" ref={this.previewContainer}>
<RawHTML>{this.state.previewHtml}</RawHTML>
<wp.element.RawHTML>{this.state.previewHtml}</wp.element.RawHTML>
</div>
) }
</div>
</Fragment>
</wp.element.Fragment>
);
}
}
Expand All @@ -229,7 +222,7 @@ var hasLayoutCategory = wp.blocks.getCategories().some( function( category ) {
return category.slug === 'layout';
} );

registerBlockType( 'siteorigin-panels/layout-block', {
wp.blocks.registerBlockType( 'siteorigin-panels/layout-block', {
title: wp.i18n.__( 'SiteOrigin Layout', 'siteorigin-panels' ),

description: wp.i18n.__( "Build a layout using SiteOrigin's Page Builder.", 'siteorigin-panels' ),
Expand Down Expand Up @@ -259,7 +252,7 @@ registerBlockType( 'siteorigin-panels/layout-block', {

let onLayoutBlockContentChange = ( newPanelsData ) => {

if ( !_.isEmpty( newPanelsData.widgets ) ) {
if ( ! lodash.isEmpty( newPanelsData.widgets ) ) {
// Send panelsData to server for sanitization.
wp.data.dispatch( 'core/editor' ).lockPostSaving();
jQuery.post(
Expand Down Expand Up @@ -305,13 +298,13 @@ registerBlockType( 'siteorigin-panels/layout-block', {

save( { attributes } ) {
return attributes.hasOwnProperty('contentPreview') ?
<RawHTML>{attributes.contentPreview}</RawHTML> :
<wp.element.RawHTML>{attributes.contentPreview}</wp.element.RawHTML> :
null;
}
} );

( ( jQuery ) => {
if ( soPanelsBlockEditorAdmin.showAddButton ) {
if ( window.soPanelsBlockEditorAdmin.showAddButton ) {
jQuery( () => {
setTimeout( () => {
const editorDispatch = wp.data.dispatch( 'core/editor' );
Expand Down
Loading

0 comments on commit 68147e8

Please sign in to comment.