@@ -154,7 +155,7 @@ registerBlockType( 'lzb-constructor/main', {
edit: ConstructorBlockWithSelect,
- save: function() {
+ save() {
return null;
},
} );
@@ -170,7 +171,7 @@ subscribe( () => {
const newBlockList = getBlockList();
const blockListChanged = newBlockList !== blockList;
- const isValidList = newBlockList.length === 1 && newBlockList[ 0 ] && newBlockList[ 0 ].name === 'lzb-constructor/main';
+ const isValidList = 1 === newBlockList.length && newBlockList[ 0 ] && 'lzb-constructor/main' === newBlockList[ 0 ].name;
blockList = newBlockList;
if ( blockListChanged && ! isValidList ) {
@@ -205,10 +206,10 @@ subscribe( () => {
} );
// de-select active control when click outside.
-$( document ).on( 'click', function( e ) {
+$( document ).on( 'click', ( e ) => {
const $this = $( e.target );
const selectedControlId = wp.data.select( 'lazy-blocks/block-data' ).getSelectedControlId();
- const clearSelectedControl = wp.data.dispatch( 'lazy-blocks/block-data' ).clearSelectedControl;
+ const { clearSelectedControl } = wp.data.dispatch( 'lazy-blocks/block-data' );
if ( ! selectedControlId ) {
return;
@@ -256,16 +257,16 @@ subscribe( () => {
}
if ( isSavingPost || isAutosavingPost || ! defaultBlockData ) {
- defaultBlockData = Object.assign( {}, blockData );
+ defaultBlockData = { ...blockData };
return;
}
clearTimeout( editorRefreshTimeout );
editorRefreshTimeout = setTimeout( () => {
// isEqual can't determine that resorted objects are not equal.
- const changedControls = defaultBlockData.controls &&
- blockData.controls &&
- ! isEqual( Object.keys( defaultBlockData.controls ), Object.keys( blockData.controls ) );
+ const changedControls = defaultBlockData.controls
+ && blockData.controls
+ && ! isEqual( Object.keys( defaultBlockData.controls ), Object.keys( blockData.controls ) );
if ( changedControls || ! isEqual( defaultBlockData, blockData ) ) {
wp.data.dispatch( 'core/editor' ).editPost( { edited: true } );
diff --git a/src/assets/admin/constructor/store/block-data/actions.jsx b/src/assets/admin/constructor/store/block-data/actions.jsx
index 27ea5ec8e..9fb1a73eb 100644
--- a/src/assets/admin/constructor/store/block-data/actions.jsx
+++ b/src/assets/admin/constructor/store/block-data/actions.jsx
@@ -9,7 +9,7 @@ export function setBlockData( data ) {
// check if control is array and change it to object
// unless value will not be saved.
// related topic: https://wordpress.org/support/topic/controls-not-saving/
- if ( data.controls && typeof data.controls === 'object' && data.controls.constructor === Array ) {
+ if ( data.controls && 'object' === typeof data.controls && data.controls.constructor === Array ) {
data.controls = {};
}
diff --git a/src/assets/admin/constructor/store/block-data/index.jsx b/src/assets/admin/constructor/store/block-data/index.jsx
index 0dcd96a55..65cda8db0 100644
--- a/src/assets/admin/constructor/store/block-data/index.jsx
+++ b/src/assets/admin/constructor/store/block-data/index.jsx
@@ -8,4 +8,6 @@ const {
registerStore,
} = wp.data;
-registerStore( 'lazy-blocks/block-data', { reducer, selectors, actions, controls, resolvers } );
+registerStore( 'lazy-blocks/block-data', {
+ reducer, selectors, actions, controls, resolvers,
+} );
diff --git a/src/assets/admin/constructor/store/block-data/reducer.jsx b/src/assets/admin/constructor/store/block-data/reducer.jsx
index 1206aac70..87744d523 100644
--- a/src/assets/admin/constructor/store/block-data/reducer.jsx
+++ b/src/assets/admin/constructor/store/block-data/reducer.jsx
@@ -11,13 +11,13 @@ function resort( data, id, newId, insertBefore = true ) {
Object.keys( data ).forEach( ( key ) => {
if ( key !== id ) {
if ( insertBefore && key === newId ) {
- newControls[ id ] = Object.assign( {}, data[ id ] );
+ newControls[ id ] = { ...data[ id ] };
}
- newControls[ key ] = Object.assign( {}, data[ key ] );
+ newControls[ key ] = { ...data[ key ] };
if ( ! insertBefore && key === newId ) {
- newControls[ id ] = Object.assign( {}, data[ id ] );
+ newControls[ id ] = { ...data[ id ] };
}
} else {
insertBefore = false;
@@ -52,11 +52,11 @@ function reducer( state = { data: false }, action ) {
break;
case 'UPDATE_CONTROL_DATA':
if (
- action.id &&
- action.data &&
- state.data &&
- state.data.controls &&
- state.data.controls[ action.id ]
+ action.id
+ && action.data
+ && state.data
+ && state.data.controls
+ && state.data.controls[ action.id ]
) {
// We can't just use merge() here, as it will merge inner arrays
// but we always need to override it.
@@ -83,7 +83,7 @@ function reducer( state = { data: false }, action ) {
} = state.data;
let newId = getUID();
- while ( typeof controls[ `control_${ newId }` ] !== 'undefined' ) {
+ while ( 'undefined' !== typeof controls[ `control_${ newId }` ] ) {
newId = getUID();
}
newId = `control_${ newId }`;
@@ -113,10 +113,10 @@ function reducer( state = { data: false }, action ) {
break;
case 'REMOVE_CONTROL':
if (
- action.id &&
- state.data &&
- state.data.controls &&
- state.data.controls[ action.id ]
+ action.id
+ && state.data
+ && state.data.controls
+ && state.data.controls[ action.id ]
) {
return {
...state,
@@ -130,11 +130,11 @@ function reducer( state = { data: false }, action ) {
break;
case 'RESORT_CONTROL':
if (
- action.id &&
- action.newId &&
- action.id !== action.newId &&
- state.data &&
- state.data.controls
+ action.id
+ && action.newId
+ && action.id !== action.newId
+ && state.data
+ && state.data.controls
) {
const newControls = resort( state.data.controls, action.id, action.newId );
diff --git a/src/assets/admin/constructor/store/block-data/resolvers.jsx b/src/assets/admin/constructor/store/block-data/resolvers.jsx
index 059c2905f..70abd8353 100644
--- a/src/assets/admin/constructor/store/block-data/resolvers.jsx
+++ b/src/assets/admin/constructor/store/block-data/resolvers.jsx
@@ -1,6 +1,6 @@
import * as actions from './actions';
-export function * getBlockData() {
+export function* getBlockData() {
const postId = window.lazyblocksConstructorData.post_id;
const query = `/lazy-blocks/v1/get-block-data/?post_id=${ postId }`;
diff --git a/src/assets/admin/css/style.scss b/src/assets/admin/css/style.scss
index 24969c63e..95d26fc2c 100644
--- a/src/assets/admin/css/style.scss
+++ b/src/assets/admin/css/style.scss
@@ -14,7 +14,6 @@
display: block;
margin-top: 0;
margin-bottom: .5em;
- vertical-align: baseline;
}
textarea.lzb-textarea,
select.lzb-select,
@@ -239,12 +238,12 @@
position: relative;
display: flex;
flex-wrap: wrap;
+ align-content: flex-start;
padding: 0;
// stylelint-disable-next-line
margin: 0 -5px !important;
list-style-type: none;
cursor: pointer;
- align-content: flex-start;
// fix flex items shrink.
&::after {
diff --git a/src/assets/admin/templates/index.jsx b/src/assets/admin/templates/index.jsx
index be0877a39..6889eeba1 100644
--- a/src/assets/admin/templates/index.jsx
+++ b/src/assets/admin/templates/index.jsx
@@ -5,7 +5,7 @@
/**
* Internal dependencies
*/
-import Templates from './templates.jsx';
+import Templates from './templates';
// register core Gutenberg blocks.
if ( wp.blockLibrary && wp.blockLibrary.registerCoreBlocks ) {
diff --git a/src/assets/admin/templates/templates.jsx b/src/assets/admin/templates/templates.jsx
index e825635cb..f88030ef2 100644
--- a/src/assets/admin/templates/templates.jsx
+++ b/src/assets/admin/templates/templates.jsx
@@ -8,13 +8,14 @@ import './style.scss';
*/
import { components } from 'react-select';
import classnames from 'classnames/dedupe';
-const { Option } = components;
/**
* Internal Dependencies
*/
import Select from '../components/select';
+const { Option } = components;
+
/**
* WordPress Dependencies
*/
@@ -51,11 +52,10 @@ const {
* Component
*/
class Templates extends Component {
- constructor() {
- super( ...arguments );
+ constructor( ...args ) {
+ super( ...args );
this.state = {
- search: '',
templates: false,
blocks: false,
blocksCategorized: [],
@@ -75,6 +75,11 @@ class Templates extends Component {
this.removeBlockFromTemplate = this.removeBlockFromTemplate.bind( this );
}
+ componentDidMount() {
+ this.prepareAllBlocks();
+ this.fetchTemplates();
+ }
+
/**
* Get Icon React Component.
*
@@ -82,14 +87,15 @@ class Templates extends Component {
*
* @return {JSX} icon.
*/
+ // eslint-disable-next-line class-methods-use-this
getIcon( data ) {
let icon = data.src ? data.src : data;
// Prepare icon.
- if ( typeof icon === 'function' ) {
+ if ( 'function' === typeof icon ) {
icon = icon();
- } else if ( typeof icon === 'string' ) {
- icon = wp.element.createElement( wp.components.Dashicon, { icon: icon } );
+ } else if ( 'string' === typeof icon ) {
+ icon = wp.element.createElement( wp.components.Dashicon, { icon } );
}
return icon;
@@ -102,6 +108,7 @@ class Templates extends Component {
*
* @return {Object} template data.
*/
+ // eslint-disable-next-line class-methods-use-this
getTemplateDataFromPost( postData ) {
const availableBlocks = getBlockTypes();
let meta;
@@ -138,7 +145,7 @@ class Templates extends Component {
// if block is not available, prepare Undefined block.
} else {
meta.blocks[ k ].icon = (
-
+
);
meta.blocks[ k ].class = 'lzb-templates-single-blocks-undefined';
}
@@ -154,6 +161,66 @@ class Templates extends Component {
};
}
+ /**
+ * Get template key by post ID.
+ *
+ * @param {Int} ID post id.
+ *
+ * @return {Int} key.
+ */
+ getTemplateKey( ID ) {
+ const {
+ templates,
+ } = this.state;
+
+ let result = false;
+
+ templates.forEach( ( data, k ) => {
+ if ( false !== result ) {
+ return;
+ }
+
+ if ( data.ID === ID ) {
+ result = k;
+ }
+ } );
+
+ return result;
+ }
+
+ /**
+ * Get template data by post ID.
+ *
+ * @param {Int} ID post id.
+ *
+ * @return {Object} template data.
+ */
+ getTemplate( ID ) {
+ const {
+ templates,
+ } = this.state;
+
+ const key = this.getTemplateKey( ID );
+
+ return templates[ key ] || false;
+ }
+
+ /**
+ * Fetch all available template and save in state.
+ */
+ async fetchTemplates() {
+ const fetchedTemplates = await apiFetch( { path: '/wp/v2/lazyblocks_templates?per_page=-1' } );
+ let templates = [];
+
+ if ( fetchedTemplates && fetchedTemplates.length ) {
+ templates = fetchedTemplates.map( ( data ) => this.getTemplateDataFromPost( data ) );
+ }
+
+ this.setState( {
+ templates,
+ } );
+ }
+
/**
* Prepare all available blocks and save in state.
*/
@@ -181,13 +248,13 @@ class Templates extends Component {
availableBlocks.forEach( ( block ) => {
if (
// prevent adding blocks with parent option (fe Grid Column).
- ! ( block.parent && block.parent.length ) &&
+ ! ( block.parent && block.parent.length )
// prevent showing blocks with disabled inserter.
// allow only lazyblocks free block.
- ! (
- block.name !== 'lazyblock-core/free' &&
- ( block.supports && typeof block.supports.inserter !== 'undefined' && ! block.supports.inserter )
+ && ! (
+ 'lazyblock-core/free' !== block.name
+ && ( block.supports && 'undefined' !== typeof block.supports.inserter && ! block.supports.inserter )
)
) {
blocks[ block.name ] = {
@@ -195,7 +262,7 @@ class Templates extends Component {
label: block.title,
icon: this.getIcon( block.icon ),
category: block.category,
- useOnce: block.supports && typeof block.supports.multiple !== 'undefined' ? block.supports.multiple : true,
+ useOnce: block.supports && 'undefined' !== typeof block.supports.multiple ? block.supports.multiple : true,
};
blocksCategorizedObj[ block.category ].options.push( blocks[ block.name ] );
}
@@ -203,74 +270,10 @@ class Templates extends Component {
this.setState( {
blocks,
- blocksCategorized: Object.keys( blocksCategorizedObj ).map( ( k ) => {
- return blocksCategorizedObj[ k ];
- } ),
- } );
- }
-
- /**
- * Fetch all available template and save in state.
- */
- async fetchTemplates() {
- const fetchedTemplates = await apiFetch( { path: '/wp/v2/lazyblocks_templates?per_page=-1' } );
- let templates = [];
-
- if ( fetchedTemplates && fetchedTemplates.length ) {
- templates = fetchedTemplates.map( ( data ) => {
- return this.getTemplateDataFromPost( data );
- } );
- }
-
- this.setState( {
- templates,
+ blocksCategorized: Object.keys( blocksCategorizedObj ).map( ( k ) => blocksCategorizedObj[ k ] ),
} );
}
- /**
- * Get template key by post ID.
- *
- * @param {Int} ID post id.
- *
- * @return {Int} key.
- */
- getTemplateKey( ID ) {
- const {
- templates,
- } = this.state;
-
- let result = false;
-
- templates.forEach( ( data, k ) => {
- if ( result !== false ) {
- return;
- }
-
- if ( data.ID === ID ) {
- result = k;
- }
- } );
-
- return result;
- }
-
- /**
- * Get template data by post ID.
- *
- * @param {Int} ID post id.
- *
- * @return {Object} template data.
- */
- getTemplate( ID ) {
- const {
- templates,
- } = this.state;
-
- const key = this.getTemplateKey( ID );
-
- return templates[ key ] || false;
- }
-
/**
* Add new template.
*
@@ -353,11 +356,9 @@ class Templates extends Component {
return;
}
- const blocks = template.blocks.map( ( data ) => {
- return {
- name: data.name,
- };
- } );
+ const blocks = template.blocks.map( ( data ) => ( {
+ name: data.name,
+ } ) );
// update in DB.
apiFetch( {
@@ -369,7 +370,7 @@ class Templates extends Component {
post_type: template.post_type,
post_label: template.post_label,
template_lock: template.template_lock,
- blocks: blocks,
+ blocks,
} ) ),
},
},
@@ -403,9 +404,7 @@ class Templates extends Component {
// remove from state.
this.setState( {
- templates: templates.filter( ( data, i ) => {
- return i !== key;
- } ),
+ templates: templates.filter( ( data, i ) => i !== key ),
} );
}
@@ -460,19 +459,12 @@ class Templates extends Component {
if ( template.blocks[ blockKey ] ) {
this.updateTemplateData( ID, {
blocks: [
- ...template.blocks.filter( ( data, k ) => {
- return blockKey !== k;
- } ),
+ ...template.blocks.filter( ( data, k ) => blockKey !== k ),
],
} );
}
}
- componentDidMount() {
- this.prepareAllBlocks();
- this.fetchTemplates();
- }
-
render() {
const {
postTypes,
@@ -511,10 +503,8 @@ class Templates extends Component {
{ __( 'Select post type:', '@@text_domain' ) }