CHIEFSOFT\ameye
511 lines
12 KiB
React
511 lines
12 KiB
React
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import FieldsRender from '../components/fields-render';
|
|
import FieldsCSSOutput from '../components/fields-css-output';
|
|
import ServerSideRender from '../components/server-side-render';
|
|
import ImageSelector from '../components/image-selector';
|
|
import getParentBlock from '../utils/get-parent-block';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
const {
|
|
__,
|
|
} = wp.i18n;
|
|
|
|
const {
|
|
registerBlockType,
|
|
} = wp.blocks;
|
|
|
|
const {
|
|
Component,
|
|
Fragment,
|
|
RawHTML,
|
|
} = wp.element;
|
|
|
|
const {
|
|
BaseControl,
|
|
Placeholder,
|
|
PanelBody,
|
|
Disabled,
|
|
Notice,
|
|
} = wp.components;
|
|
|
|
const {
|
|
InspectorControls,
|
|
} = wp.blockEditor;
|
|
|
|
const {
|
|
applyFilters,
|
|
} = wp.hooks;
|
|
|
|
const {
|
|
withSelect,
|
|
} = wp.data;
|
|
|
|
const {
|
|
blocks,
|
|
} = window.pk_custom_blocks_localize;
|
|
|
|
const { select, subscribe } = wp.data;
|
|
|
|
const allLocations = {
|
|
root: __('Block editor root'),
|
|
'section-wide': __('Fullwidth section'),
|
|
'section-full': __('Fullwidth section with alignment set to "Full"'),
|
|
'section-content': __('The content part of a sidebar section'),
|
|
'section-sidebar': __('The sidebar part of a sidebar section'),
|
|
};
|
|
|
|
// Value, that will not be saved in field attribute.
|
|
// Used in columns block.
|
|
const CNVS_PREVENT_UPDATE = 'CNVS_PREVENT_UPDATE';
|
|
|
|
// Template Switcher.
|
|
class TemplateSwitcher {
|
|
|
|
constructor() {
|
|
this.template = null;
|
|
}
|
|
|
|
init() {
|
|
|
|
subscribe(() => {
|
|
|
|
const newTemplate = select('core/editor').getEditedPostAttribute( 'template' );
|
|
|
|
if ( newTemplate !== this.template ) {
|
|
this.template = newTemplate;
|
|
|
|
this.changeTemplate();
|
|
}
|
|
});
|
|
}
|
|
|
|
changeTemplate() {
|
|
let blocks = wp.data.select('core/block-editor').getBlocks();
|
|
|
|
blocks.forEach((el) => {
|
|
wp.data.dispatch('core/block-editor').updateBlock(el.clientId, { attributes: {} });
|
|
});
|
|
}
|
|
}
|
|
|
|
new TemplateSwitcher().init();
|
|
|
|
/**
|
|
* Get block icons and convert string `<svg...` to react component
|
|
*
|
|
* @param {String} { icon } - icon string
|
|
* @return {String|JSX}
|
|
*/
|
|
function getBlockIcon({ icon }) {
|
|
if ('string' === typeof icon && '<svg' === icon.trim().substr(0, 4)) {
|
|
icon = <RawHTML>{icon}</RawHTML>;
|
|
}
|
|
|
|
return icon || '';
|
|
}
|
|
|
|
/**
|
|
* Get block Edit class.
|
|
*
|
|
* @param {Object} blockData block data
|
|
* @return {Class}
|
|
*/
|
|
function getBlockEdit(blockData) {
|
|
const {
|
|
name,
|
|
title,
|
|
fields,
|
|
sections,
|
|
layouts,
|
|
} = blockData;
|
|
|
|
const icon = getBlockIcon(blockData);
|
|
|
|
class CustomBlockEdit extends Component {
|
|
constructor() {
|
|
super(...arguments);
|
|
|
|
this.maybeUpdateLocationAttribute = this.maybeUpdateLocationAttribute.bind(this);
|
|
this.maybeSetDefaultLayout = this.maybeSetDefaultLayout.bind(this);
|
|
this.getAllowedLocations = this.getAllowedLocations.bind(this);
|
|
this.getAllowedLocationsNotice = this.getAllowedLocationsNotice.bind(this);
|
|
this.isAllowed = this.isAllowed.bind(this);
|
|
this.getLayoutSelector = this.getLayoutSelector.bind(this);
|
|
|
|
this.maybeUpdateLocationAttribute(true);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.maybeSetDefaultLayout();
|
|
this.maybeUpdateLocationAttribute();
|
|
}
|
|
componentDidUpdate() {
|
|
this.maybeUpdateLocationAttribute();
|
|
}
|
|
|
|
/**
|
|
* Maybe update location attribute.
|
|
*/
|
|
maybeUpdateLocationAttribute(force) {
|
|
if (this.props.location !== this.props.attributes.canvasLocation) {
|
|
if (force) {
|
|
this.props.attributes.canvasLocation = this.props.location;
|
|
}
|
|
this.props.setAttributes({
|
|
canvasLocation: this.props.location,
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maybe set default layout, when available only 1 layout.
|
|
*/
|
|
maybeSetDefaultLayout() {
|
|
const {
|
|
attributes,
|
|
setAttributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
layout,
|
|
} = attributes;
|
|
|
|
const layoutsCount = layouts ? Object.keys(layouts).length : 0;
|
|
|
|
if (1 === layoutsCount) {
|
|
const isLayoutDifferent = Object.keys(layouts)[0] !== layout;
|
|
|
|
if (isLayoutDifferent) {
|
|
setAttributes({
|
|
layout: Object.keys(layouts)[0],
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get array with all allowed locations.
|
|
*
|
|
* @return {Array}
|
|
*/
|
|
getAllowedLocations() {
|
|
const {
|
|
attributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
layout,
|
|
} = attributes;
|
|
|
|
// get locations from the current layout
|
|
// and from the block settings.
|
|
return [
|
|
...(layouts && layouts[layout] && layouts[layout].location ? layouts[layout].location : []),
|
|
...blockData.location,
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Get notice about allowed locations.
|
|
*
|
|
* @param {Array} checkLocations array of locations to check. If empty, use locations from the block settings and layout
|
|
* @return {JSX}
|
|
*/
|
|
getAllowedLocationsNotice(checkLocations) {
|
|
// get locations from the current layout
|
|
// and from the block settings.
|
|
if (!checkLocations) {
|
|
checkLocations = this.getAllowedLocations();
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<p>{__('The block output is allowed in following locations only:')}</p>
|
|
<ul>
|
|
{checkLocations.map((locationName) => {
|
|
return (
|
|
<li key={`location-${locationName}`}>
|
|
{allLocations[locationName] || locationName}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Check if block is allowed in current location.
|
|
*
|
|
* @param {Array} checkLocations array of locations to check. If empty, use locations from the block settings and layout
|
|
* @return {boolean}
|
|
*/
|
|
isAllowed(checkLocations) {
|
|
const {
|
|
location,
|
|
} = this.props;
|
|
|
|
let result = true;
|
|
|
|
// get locations from the current layout
|
|
// and from the block settings.
|
|
if (!checkLocations) {
|
|
checkLocations = this.getAllowedLocations();
|
|
}
|
|
|
|
if (checkLocations && checkLocations.length) {
|
|
result = false;
|
|
|
|
checkLocations.forEach((locationName) => {
|
|
if (location === locationName) {
|
|
result = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* Returns layout selector.
|
|
*
|
|
* @return {JSX} ImageSelector.
|
|
*/
|
|
getLayoutSelector() {
|
|
const {
|
|
setAttributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
layout,
|
|
} = this.props.attributes;
|
|
|
|
const items = Object.keys(layouts).map((layoutName) => {
|
|
const layoutData = layouts[layoutName];
|
|
const isDisabled = !this.isAllowed(layoutData.location);
|
|
|
|
return {
|
|
content: <RawHTML>{layoutData.icon}</RawHTML>,
|
|
value: layoutName,
|
|
label: layoutData.name,
|
|
isDisabled,
|
|
disabledNotice: isDisabled ? this.getAllowedLocationsNotice(layoutData.location) : '',
|
|
};
|
|
});
|
|
|
|
return (
|
|
<ImageSelector
|
|
value={layout}
|
|
onChange={(val) => {
|
|
setAttributes({
|
|
layout: val,
|
|
});
|
|
}}
|
|
items={items}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
attributes,
|
|
setAttributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
layout,
|
|
canvasClassName,
|
|
} = attributes;
|
|
|
|
const isLayoutsAvailable = layouts && Object.keys(layouts).length > 1;
|
|
|
|
// layout selector.
|
|
if (isLayoutsAvailable && !layout) {
|
|
return (
|
|
<Placeholder
|
|
className="canvas-component-custom-blocks-placeholder"
|
|
icon={icon}
|
|
label={title}
|
|
instructions={__('Select the block layout.')}
|
|
>
|
|
{this.getLayoutSelector()}
|
|
</Placeholder>
|
|
);
|
|
}
|
|
|
|
// Block render if all checks passed.
|
|
const blockRender = applyFilters('canvas.customBlock.editRender', (
|
|
<Disabled>
|
|
<ServerSideRender
|
|
block={name}
|
|
blockProps={this.props}
|
|
attributes={attributes}
|
|
/>
|
|
</Disabled>
|
|
), this.props);
|
|
|
|
return (
|
|
<div className="canvas-component-custom-blocks">
|
|
{this.isAllowed() ? (
|
|
blockRender
|
|
) : (
|
|
<Placeholder
|
|
className="canvas-component-custom-blocks-placeholder"
|
|
icon={icon}
|
|
label={title}
|
|
>
|
|
<Notice status="warning" isDismissible={false}>
|
|
{this.getAllowedLocationsNotice()}
|
|
</Notice>
|
|
</Placeholder>
|
|
)}
|
|
{fields ? (
|
|
<Fragment>
|
|
<FieldsCSSOutput
|
|
selector={canvasClassName ? `.${canvasClassName}` : false}
|
|
fields={fields}
|
|
attributes={attributes}
|
|
/>
|
|
<InspectorControls>
|
|
{isLayoutsAvailable ? (
|
|
<PanelBody
|
|
title={__('Layout')}
|
|
initialOpen={ false }
|
|
>
|
|
<BaseControl>
|
|
{this.getLayoutSelector()}
|
|
</BaseControl>
|
|
</PanelBody>
|
|
) : ''}
|
|
<FieldsRender
|
|
fields={fields}
|
|
sections={sections}
|
|
attributes={attributes}
|
|
blockProps={this.props}
|
|
onChange={(key, val) => {
|
|
val = applyFilters('canvas.customBlock.onFieldChange', val, key, this.props);
|
|
|
|
if ( CNVS_PREVENT_UPDATE !== val ) {
|
|
setAttributes({ [key]: val });
|
|
}
|
|
}}
|
|
/>
|
|
</InspectorControls>
|
|
</Fragment>
|
|
) : ''}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Prepare location type name of the current block.
|
|
*
|
|
* Available types:
|
|
* - root - block inserted in root
|
|
* - section-wide - block inserted in Section block with layout = wide
|
|
* - section-full - block inserted in Section block with layout = full
|
|
* - section-content - block inserted in Section block inside Content column
|
|
* - block inserted in Row block inside column with size [5-11]
|
|
* - section-sidebar - block inserted in Section block inside Sidebar column
|
|
* - block inserted in Row block inside column with size [1-4]
|
|
*/
|
|
return withSelect((select, ownProps) => {
|
|
const {
|
|
getBlockHierarchyRootClientId,
|
|
getBlock,
|
|
} = select('core/block-editor');
|
|
|
|
const rootBlock = getBlock(getBlockHierarchyRootClientId(ownProps.clientId));
|
|
let parentBlock = getParentBlock(rootBlock, ownProps);
|
|
let isRoot = parentBlock && parentBlock.clientId === ownProps.clientId;
|
|
|
|
// Skip block `core/group` from this check as we can use it for Query Settings.
|
|
if ( 'core/group' === parentBlock.name && ! isRoot ) {
|
|
const postGroupId = parentBlock.clientId;
|
|
parentBlock = getParentBlock(rootBlock, parentBlock);
|
|
isRoot = parentBlock && parentBlock.clientId === postGroupId;
|
|
}
|
|
|
|
let location = 'default';
|
|
|
|
// root
|
|
if ( isRoot ) {
|
|
location = 'root';
|
|
|
|
// inside section content
|
|
} else if (parentBlock && 'canvas/section-content' === parentBlock.name) {
|
|
const sectionBlock = getParentBlock(rootBlock, parentBlock);
|
|
|
|
if ('full' === sectionBlock.attributes.layout) {
|
|
if ('full' === sectionBlock.attributes.layoutAlign) {
|
|
location = 'section-full';
|
|
} else {
|
|
location = 'section-wide';
|
|
}
|
|
} else if ('with-sidebar' === sectionBlock.attributes.layout) {
|
|
location = 'section-content';
|
|
}
|
|
|
|
// inside section sidebar
|
|
} else if (parentBlock && 'canvas/section-sidebar' === parentBlock.name) {
|
|
location = 'section-sidebar';
|
|
|
|
// inside row block
|
|
} else if (parentBlock && 'canvas/column' === parentBlock.name) {
|
|
if (parentBlock.attributes.size < 5) {
|
|
location = 'section-sidebar';
|
|
} else {
|
|
location = 'section-content';
|
|
}
|
|
}
|
|
|
|
return {
|
|
location,
|
|
};
|
|
})(CustomBlockEdit);
|
|
}
|
|
|
|
/**
|
|
* Register Custom Blocks
|
|
*/
|
|
jQuery(() => {
|
|
if (blocks && blocks.length) {
|
|
blocks.forEach((blockData) => {
|
|
let {
|
|
supports = {},
|
|
} = blockData;
|
|
|
|
if ( 'canvas/section' === blockData.name && 'page' !== canvasLocalize.postType ) {
|
|
return;
|
|
}
|
|
|
|
const resultBlockData = applyFilters( 'canvas.customBlock.registerData', {
|
|
...blockData,
|
|
supports,
|
|
icon: getBlockIcon(blockData),
|
|
edit: getBlockEdit(blockData),
|
|
save() {
|
|
// Render in PHP.
|
|
return null;
|
|
},
|
|
});
|
|
|
|
// Register block.
|
|
registerBlockType(blockData.name, resultBlockData);
|
|
|
|
// Register block style.
|
|
if (blockData.styles && blockData.length) {
|
|
blockData.styles.forEach((styleData) => {
|
|
registerBlockStyle(blockData.name, styleData);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|