first commit
This commit is contained in:
CHIEFSOFT\ameye
File diff suppressed because one or more lines are too long
@@ -0,0 +1,510 @@
|
||||
/**
|
||||
* 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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,930 @@
|
||||
<?php
|
||||
/**
|
||||
* Custom blocks registration.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( ! class_exists( 'CNVS_Gutenberg_Blocks_Registration' ) ) {
|
||||
class CNVS_Gutenberg_Blocks_Registration {
|
||||
/**
|
||||
* Contains all custom blocks.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public $all_blocks = array();
|
||||
|
||||
function __construct() {
|
||||
add_action( 'init', array( $this, 'register_block_type' ), 12 );
|
||||
add_action( 'canvas_blocks_dynamic_css', array( $this, 'blocks_dynamic_css' ), 10, 2 );
|
||||
|
||||
add_filter( 'canvas_block_convert_fields_to_attributes', array( $this, 'convert_fields_to_attributes' ) );
|
||||
add_filter( 'canvas_block_prepare_server_render_attributes', array( $this, 'prepare_server_render_attributes' ), 10, 2 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default settings.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function get_custom_blocks_default_settings() {
|
||||
return apply_filters(
|
||||
'canvas_register_block_type_default_settings', array(
|
||||
'name' => '',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
'category' => '',
|
||||
'keywords' => array(),
|
||||
'icon' => '',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
),
|
||||
'styles' => array(),
|
||||
'location' => array(),
|
||||
'layouts' => array(),
|
||||
'sections' => array(),
|
||||
'fields' => array(),
|
||||
'template' => '',
|
||||
'style' => '',
|
||||
'script' => '',
|
||||
'editor_style' => '',
|
||||
'editor_script' => '',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get custom blocks array.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function get_custom_blocks() {
|
||||
if ( ! empty( $this->all_blocks ) ) {
|
||||
return $this->all_blocks;
|
||||
}
|
||||
|
||||
$blocks = apply_filters( 'canvas_register_block_type', array() );
|
||||
$default_settings = $this->get_custom_blocks_default_settings();
|
||||
|
||||
// add default settings to all blocks.
|
||||
foreach ( $blocks as $k => $block ) {
|
||||
$block['sections'] = apply_filters( 'canvas_block_sections_' . $block['name'], $block['sections'] );
|
||||
$block['fields'] = apply_filters( 'canvas_block_fields_' . $block['name'], $block['fields'] );
|
||||
$block['layouts'] = apply_filters( 'canvas_block_layouts_' . $block['name'], $block['layouts'] );
|
||||
|
||||
// prepare layouts fields.
|
||||
if ( isset( $block['layouts'] ) && ! empty( $block['layouts'] ) ) {
|
||||
$layouts = $this->get_layouts_fields( $block['name'], $block['layouts'] );
|
||||
|
||||
// hide default fields if layout selected.
|
||||
foreach ( $block['layouts'] as $layout => $data ) {
|
||||
if ( ! isset( $data['hide_fields'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// check all default fields.
|
||||
foreach ( $block['fields'] as $f => $field ) {
|
||||
if ( ! isset( $field['key'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( ! in_array( $field['key'], $data['hide_fields'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( ! isset( $block['fields'][ $f ]['active_callback'] ) ) {
|
||||
$block['fields'][ $f ]['active_callback'] = array();
|
||||
}
|
||||
|
||||
// hide default field.
|
||||
$block['fields'][ $f ]['active_callback'][] = array(
|
||||
'field' => 'layout',
|
||||
'operator' => '!==',
|
||||
'value' => $layout,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Set sections.
|
||||
$block['sections'] = array_merge(
|
||||
$block['sections'],
|
||||
$layouts['sections']
|
||||
);
|
||||
|
||||
// Multisort sections.
|
||||
if ( is_array( $block['sections'] ) && $block['sections'] ) {
|
||||
foreach ( $block['sections'] as $key => $value ) {
|
||||
if ( is_string( $value ) ) {
|
||||
$block['sections'][ $key ] = array(
|
||||
'title' => $value,
|
||||
'priority' => 10,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$priority = array_column( $block['sections'], 'priority' );
|
||||
|
||||
array_multisort( $priority, SORT_ASC, $block['sections'] );
|
||||
}
|
||||
|
||||
// Set fields.
|
||||
$block['fields'] = array_merge(
|
||||
$block['fields'],
|
||||
$layouts['fields']
|
||||
);
|
||||
}
|
||||
|
||||
$blocks[ $k ] = array_merge(
|
||||
$default_settings,
|
||||
$block
|
||||
);
|
||||
}
|
||||
|
||||
$this->all_blocks = $blocks;
|
||||
|
||||
return $this->all_blocks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get custom block data.
|
||||
*
|
||||
* @param string $name block name.
|
||||
* @return array
|
||||
*/
|
||||
public function get_custom_block( $name ) {
|
||||
$blocks = $this->get_custom_blocks();
|
||||
$result = false;
|
||||
|
||||
foreach ( $blocks as $block ) {
|
||||
if ( $name === $block['name'] ) {
|
||||
$result = $block;
|
||||
}
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse layouts and prepare fields for block.
|
||||
*
|
||||
* For example, if we have layouts with name 'grid' and fields inside with the name 'columns'
|
||||
* will be added field with the name 'layout_grid_columns'
|
||||
*
|
||||
* @param string $block_name block name.
|
||||
* @param array $layouts block layouts.
|
||||
* @return array fields and sections used in the block.
|
||||
*/
|
||||
public function get_layouts_fields( $block_name, $layouts ) {
|
||||
$block_sections = array();
|
||||
$block_fields = array();
|
||||
|
||||
// look at all layouts.
|
||||
foreach ( $layouts as $layout => $data ) {
|
||||
$layout_prefix = 'layout_' . $layout . '_';
|
||||
|
||||
// add new sections.
|
||||
if ( isset( $data['sections'] ) && ! empty( $data['sections'] ) ) {
|
||||
$block_sections = array_merge( $block_sections, $data['sections'] );
|
||||
}
|
||||
|
||||
// look at all layout fields.
|
||||
if ( isset( $data['fields'] ) && is_array( $data['fields'] ) ) {
|
||||
foreach ( $data['fields'] as $field ) {
|
||||
if ( ! isset( $field['key'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// convert field names.
|
||||
$field['key'] = $layout_prefix . $field['key'];
|
||||
|
||||
// process recursive.
|
||||
if ( isset( $field['active_callback'] ) ) {
|
||||
$field['active_callback'] = $this->process_recursive( $field['active_callback'], $layout_prefix );
|
||||
}
|
||||
|
||||
// show fields only for selected layout.
|
||||
$field['active_callback'][] = array(
|
||||
'field' => 'layout',
|
||||
'operator' => '===',
|
||||
'value' => $layout,
|
||||
);
|
||||
|
||||
$block_fields[] = $field;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$block_fields = apply_filters( 'canvas_block_layouts_fields_' . $block_name, $block_fields );
|
||||
$block_sections = apply_filters( 'canvas_block_layouts_sections_' . $block_name, $block_sections );
|
||||
|
||||
return array(
|
||||
'sections' => $block_sections,
|
||||
'fields' => $block_fields,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add prefixes to field names in active_callback array.
|
||||
*
|
||||
* @param array $fields fields array from 'active_callback'.
|
||||
* @param string $prefix prefix.
|
||||
* @return array
|
||||
*/
|
||||
public function process_recursive( $fields, $prefix ) {
|
||||
$changed_fields = array();
|
||||
|
||||
foreach ( $fields as $key => $item ) {
|
||||
if ( isset( $item['field'] ) ) {
|
||||
// Add prefix to new item.
|
||||
$item['field'] = str_replace( '$#', $prefix, $item['field'] );
|
||||
|
||||
$changed_fields[] = $item;
|
||||
|
||||
} elseif ( is_array( $item ) ) {
|
||||
|
||||
$changed_fields[] = $this->process_recursive( $item, $prefix );
|
||||
}
|
||||
}
|
||||
|
||||
return $changed_fields;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register custom blocks.
|
||||
*/
|
||||
public function register_block_type() {
|
||||
if ( ! function_exists( 'register_block_type' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$blocks = $this->get_custom_blocks();
|
||||
|
||||
$schemes = cnvs_gutenberg()->get_schemes_data();
|
||||
$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
|
||||
|
||||
if ( empty( $blocks ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$editor_script_deps = array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' );
|
||||
|
||||
// custom editor scripts.
|
||||
foreach ( $blocks as $block ) {
|
||||
if ( isset( $block['editor_script'] ) && $block['editor_script'] ) {
|
||||
$editor_script_deps[] = $block['editor_script'];
|
||||
}
|
||||
}
|
||||
|
||||
// Script.
|
||||
wp_register_script(
|
||||
'canvas-custom-blocks-editor-script',
|
||||
CNVS_URL . 'gutenberg/custom-blocks/index.js',
|
||||
$editor_script_deps,
|
||||
filemtime( CNVS_PATH . 'gutenberg/custom-blocks/index.js' )
|
||||
);
|
||||
|
||||
// Add additional data to scripts.
|
||||
wp_localize_script(
|
||||
'canvas-custom-blocks-editor-script', 'pk_custom_blocks_localize', array(
|
||||
'blocks' => $blocks,
|
||||
)
|
||||
);
|
||||
|
||||
// Register all blocks.
|
||||
foreach ( $blocks as $block ) {
|
||||
// Default attributes, that will be used in render callback.
|
||||
$attributes = array(
|
||||
'canvasBlockName' => array(
|
||||
'type' => 'string',
|
||||
'default' => $block['name'],
|
||||
),
|
||||
'canvasClassName' => array(
|
||||
'type' => 'string',
|
||||
),
|
||||
'canvasLocation' => array(
|
||||
'type' => 'string',
|
||||
),
|
||||
);
|
||||
|
||||
// Add support block widget.
|
||||
$attributes['__internalWidgetId'] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// Supports.
|
||||
if ( isset( $block['supports'] ) && ! empty( $block['supports'] ) ) {
|
||||
|
||||
foreach ( $block['supports'] as $support => $is_true ) {
|
||||
if ( $is_true ) {
|
||||
switch ( $support ) {
|
||||
case 'className':
|
||||
$attributes['className'] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
break;
|
||||
case 'anchor':
|
||||
$attributes['anchor'] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
break;
|
||||
case 'align':
|
||||
$attributes['align'] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
case 'canvasBackgroundImage':
|
||||
$background_attrs = array();
|
||||
|
||||
foreach ( $breakpoints as $name => $breakpoint ) {
|
||||
$suffix = '';
|
||||
|
||||
if ( $name && 'desktop' !== $name ) {
|
||||
$suffix = '_' . $name;
|
||||
}
|
||||
|
||||
// background-image.
|
||||
$background_attrs[ 'backgroundImage' . $suffix ] = array(
|
||||
'type' => 'object',
|
||||
);
|
||||
|
||||
// background-position.
|
||||
$background_attrs[ 'backgroundPosition' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-position-unit.
|
||||
$background_attrs[ 'backgroundPositionXUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-position-number.
|
||||
$background_attrs[ 'backgroundPositionXVal' . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
|
||||
// background-position-unit.
|
||||
$background_attrs[ 'backgroundPositionYUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-position-number.
|
||||
$background_attrs[ 'backgroundPositionYVal' . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
|
||||
// background-attachment.
|
||||
$background_attrs[ 'backgroundAttachment' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-repeat.
|
||||
$background_attrs[ 'backgroundRepeat' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-size.
|
||||
$background_attrs[ 'backgroundSize' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-size-unit.
|
||||
$background_attrs[ 'backgroundSizeUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// background-size-number.
|
||||
$background_attrs[ 'backgroundSizeVal' . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
}
|
||||
|
||||
$attributes = array_merge(
|
||||
$attributes,
|
||||
$background_attrs
|
||||
);
|
||||
break;
|
||||
case 'canvasSpacings':
|
||||
$all_spacings = array(
|
||||
'marginTop' => 'margin-top',
|
||||
'marginBottom' => 'margin-bottom',
|
||||
'marginLeft' => 'margin-left',
|
||||
'marginRight' => 'margin-right',
|
||||
'paddingTop' => 'padding-top',
|
||||
'paddingBottom' => 'padding-bottom',
|
||||
'paddingLeft' => 'padding-left',
|
||||
'paddingRight' => 'padding-right',
|
||||
);
|
||||
|
||||
$spacing_attrs = array();
|
||||
|
||||
foreach ( $breakpoints as $name => $breakpoint ) {
|
||||
$suffix = '';
|
||||
|
||||
if ( $name && 'desktop' !== $name ) {
|
||||
$suffix = '_' . $name;
|
||||
}
|
||||
|
||||
// spacings.
|
||||
foreach ( $all_spacings as $spacing_name => $spacing_val ) {
|
||||
$spacing_attrs[ $spacing_name . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
}
|
||||
|
||||
// link.
|
||||
$spacing_attrs[ 'marginLink' . $suffix ] = array(
|
||||
'type' => 'boolean',
|
||||
);
|
||||
$spacing_attrs[ 'paddingLink' . $suffix ] = array(
|
||||
'type' => 'boolean',
|
||||
);
|
||||
|
||||
// unit.
|
||||
$spacing_attrs[ 'marginUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
$spacing_attrs[ 'paddingUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
}
|
||||
|
||||
$attributes = array_merge(
|
||||
$attributes,
|
||||
$spacing_attrs
|
||||
);
|
||||
break;
|
||||
case 'canvasBorder':
|
||||
$all_borders = array(
|
||||
'borderWidthTop' => 'border-top-width',
|
||||
'borderWidthBottom' => 'border-bottom-width',
|
||||
'borderWidthLeft' => 'border-left-width',
|
||||
'borderWidthRight' => 'border-right-width',
|
||||
);
|
||||
|
||||
$all_borders_radius = array(
|
||||
'borderRadiusTopLeft' => 'border-top-left-radius',
|
||||
'borderRadiusTopRight' => 'border-top-right-radius',
|
||||
'borderRadiusBottomLeft' => 'border-bottom-left-radius',
|
||||
'borderRadiusBottomRight' => 'border-bottom-right-radius',
|
||||
);
|
||||
|
||||
$border_attrs = array();
|
||||
|
||||
foreach ( $schemes as $name => $scheme ) {
|
||||
$suffix = '';
|
||||
|
||||
if ( $name && 'default' !== $name ) {
|
||||
$suffix = '_' . $name;
|
||||
}
|
||||
|
||||
// border color.
|
||||
$border_attrs[ 'borderColor' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
}
|
||||
|
||||
foreach ( $breakpoints as $name => $breakpoint ) {
|
||||
$suffix = '';
|
||||
|
||||
if ( $name && 'desktop' !== $name ) {
|
||||
$suffix = '_' . $name;
|
||||
}
|
||||
|
||||
// borders.
|
||||
foreach ( $all_borders as $border_name => $border_val ) {
|
||||
$border_attrs[ $border_name . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
}
|
||||
|
||||
// link.
|
||||
$border_attrs[ 'borderWidthLink' . $suffix ] = array(
|
||||
'type' => 'boolean',
|
||||
);
|
||||
|
||||
// unit.
|
||||
$border_attrs[ 'borderWidthUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// borders radius.
|
||||
foreach ( $all_borders_radius as $border_name => $border_val ) {
|
||||
$border_attrs[ $border_name . $suffix ] = array(
|
||||
'type' => 'number',
|
||||
);
|
||||
}
|
||||
|
||||
// link.
|
||||
$border_attrs[ 'borderRadiusLink' . $suffix ] = array(
|
||||
'type' => 'boolean',
|
||||
);
|
||||
|
||||
// unit.
|
||||
$border_attrs[ 'borderRadiusUnit' . $suffix ] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
}
|
||||
|
||||
$attributes = array_merge(
|
||||
$attributes,
|
||||
array(
|
||||
'borderStyle' => array(
|
||||
'type' => 'string',
|
||||
),
|
||||
),
|
||||
$border_attrs
|
||||
);
|
||||
break;
|
||||
case 'canvasResponsive':
|
||||
foreach ( $breakpoints as $name => $breakpoint ) {
|
||||
$attributes[ 'canvasResponsiveHide_' . $name ] = array(
|
||||
'type' => 'boolean',
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'canvasUniqueClass':
|
||||
$attributes['canvasClassName'] = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layouts.
|
||||
if ( isset( $block['layouts'] ) && ! empty( $block['layouts'] ) ) {
|
||||
$attributes['layout'] = array(
|
||||
'type' => 'string',
|
||||
'default' => '',
|
||||
);
|
||||
|
||||
// set default value if only 1 layout present.
|
||||
if ( 1 === count( $block['layouts'] ) ) {
|
||||
$attributes['layout']['default'] = array_keys( $block['layouts'] )[0];
|
||||
}
|
||||
}
|
||||
|
||||
// Convert fields to attributes.
|
||||
if ( isset( $block['fields'] ) ) {
|
||||
$attributes = array_merge(
|
||||
$attributes,
|
||||
apply_filters( 'canvas_block_convert_fields_to_attributes', $block['fields'] )
|
||||
);
|
||||
}
|
||||
|
||||
$block_data = array(
|
||||
'attributes' => $attributes,
|
||||
'editor_script' => 'canvas-custom-blocks-editor-script',
|
||||
'render_callback' => array( $this, 'render_custom_block' ),
|
||||
);
|
||||
|
||||
// assets.
|
||||
if ( isset( $block['style'] ) && $block['style'] ) {
|
||||
$block_data['style'] = $block['style'];
|
||||
}
|
||||
if ( isset( $block['script'] ) && $block['script'] ) {
|
||||
$block_data['script'] = $block['script'];
|
||||
}
|
||||
if ( isset( $block['editor_style'] ) && $block['editor_style'] ) {
|
||||
$block_data['editor_style'] = $block['editor_style'];
|
||||
}
|
||||
|
||||
// Editor script added as dependency in `canvas-custom-blocks-editor-script`.
|
||||
register_block_type( $block['name'], $block_data );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert custom block fields to gutenberg block attributes.
|
||||
*
|
||||
* @param array $fields block fields.
|
||||
* @return array attributes.
|
||||
*/
|
||||
public function convert_fields_to_attributes( $fields ) {
|
||||
$schemes = cnvs_gutenberg()->get_schemes_data();
|
||||
$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
|
||||
$all_breakpoints = cnvs_gutenberg()->get_all_breakpoints_data();
|
||||
|
||||
$attributes = array();
|
||||
|
||||
foreach ( $fields as $field ) {
|
||||
$field_data = array(
|
||||
'type' => 'string',
|
||||
);
|
||||
|
||||
// defaults.
|
||||
if ( isset( $field['default'] ) ) {
|
||||
$field_data['default'] = $field['default'];
|
||||
}
|
||||
|
||||
// custom type.
|
||||
if ( isset( $field['type'] ) ) {
|
||||
switch ( $field['type'] ) {
|
||||
case 'toggle':
|
||||
case 'type-boolean':
|
||||
$field_data['type'] = 'boolean';
|
||||
break;
|
||||
case 'number':
|
||||
case 'type-number':
|
||||
$field_data['type'] = 'number';
|
||||
break;
|
||||
case 'image':
|
||||
$field_data['type'] = 'object';
|
||||
$field_data['default'] = array(
|
||||
'url' => '',
|
||||
'id' => 0,
|
||||
);
|
||||
break;
|
||||
case 'gallery':
|
||||
$field_data['type'] = 'array';
|
||||
if ( isset( $field['items'] ) ) {
|
||||
$field_data['items'] = $field['items'];
|
||||
}
|
||||
break;
|
||||
case 'select':
|
||||
case 'react-select':
|
||||
if ( ! isset( $field['multiple'] ) || ! $field['multiple'] ) {
|
||||
break;
|
||||
}
|
||||
case 'type-array':
|
||||
$field_data['type'] = 'array';
|
||||
if ( isset( $field['items'] ) ) {
|
||||
$field_data['items'] = $field['items'];
|
||||
}
|
||||
break;
|
||||
case 'toggle-list':
|
||||
case 'query':
|
||||
$field_data['type'] = 'object';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// General attributes.
|
||||
if ( isset( $field['key'] ) ) {
|
||||
$attributes[ $field['key'] ] = $field_data;
|
||||
|
||||
// Schemes attributes.
|
||||
if ( $schemes && ( 'color' === $field['type'] ) ) {
|
||||
foreach ( $schemes as $name => $scheme ) {
|
||||
if ( $name && 'default' !== $name ) {
|
||||
$scheme_field_data = $field_data;
|
||||
|
||||
if ( isset( $field[ 'default_' . $name ] ) ) {
|
||||
$scheme_field_data['default'] = $field[ 'default_' . $name ];
|
||||
} elseif ( isset( $repsonsive_field_data['default'] ) ) {
|
||||
unset( $scheme_field_data['default'] );
|
||||
}
|
||||
|
||||
$attributes[ $field['key'] . '_' . $name ] = $scheme_field_data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive attributes.
|
||||
if ( isset( $field['responsive'] ) && $field['responsive'] ) {
|
||||
foreach ( $all_breakpoints as $name => $breakpoint ) {
|
||||
if ( $name && 'desktop' !== $name ) {
|
||||
$repsonsive_field_data = $field_data;
|
||||
|
||||
if ( isset( $field['default_' . $name] ) ) {
|
||||
$repsonsive_field_data['default'] = $field['default_' . $name];
|
||||
} else if ( isset( $repsonsive_field_data['default'] ) ) {
|
||||
unset( $repsonsive_field_data['default'] );
|
||||
}
|
||||
|
||||
$attributes[ $field['key'] . '_' . $name ] = $repsonsive_field_data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare server render attributes.
|
||||
* For example, we need to remove field attributes, that hidden because of `active_callback`.
|
||||
*
|
||||
* @param array $attributes Values of attributes.
|
||||
* @param array $data Fields data.
|
||||
* @return array
|
||||
*/
|
||||
public function prepare_server_render_attributes( $attributes, $data ) {
|
||||
if ( isset( $data['fields'] ) ) {
|
||||
// remove attributes depending on `active_callback`.
|
||||
foreach ( $data['fields'] as $field ) {
|
||||
if (
|
||||
isset( $field['active_callback'] ) &&
|
||||
isset( $attributes[ $field['key'] ] ) &&
|
||||
! CNVS_Gutenberg_Utils_Is_Field_Visible::check( $field, $attributes, $data['fields'], false )
|
||||
) {
|
||||
unset( $attributes[ $field['key'] ] );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get block template file path
|
||||
*
|
||||
* @param array $block Block data.
|
||||
* @param array $attributes Block attributes.
|
||||
*/
|
||||
public function get_block_template( $block, $attributes ) {
|
||||
$result = '';
|
||||
|
||||
// find block template.
|
||||
if ( isset( $block['template'] ) && file_exists( $block['template'] ) ) {
|
||||
$result = $block['template'];
|
||||
}
|
||||
|
||||
// find current layout template.
|
||||
if ( ! empty( $attributes['layout'] ) && isset( $block['layouts'][ $attributes['layout'] ] ) ) {
|
||||
$layout = $block['layouts'][ $attributes['layout'] ];
|
||||
|
||||
if (
|
||||
isset( $layout['template'] ) &&
|
||||
file_exists( $layout['template'] )
|
||||
) {
|
||||
$result = $layout['template'];
|
||||
|
||||
// Include fallback.
|
||||
} elseif ( isset( $layout['fallback'] ) ) {
|
||||
$find_fallback = $this->get_block_template(
|
||||
$block, array_merge(
|
||||
$attributes,
|
||||
array(
|
||||
'layout' => isset( $layout['fallback']['layout'] ) ? $layout['fallback']['layout'] : 'undefined',
|
||||
),
|
||||
isset( $layout['fallback']['fields'] ) ? $layout['fallback']['fields'] : array()
|
||||
)
|
||||
);
|
||||
|
||||
if ( $find_fallback ) {
|
||||
$result = $find_fallback;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Include file and pass variables array.
|
||||
*
|
||||
* @param string $template file path.
|
||||
* @param array $template_variables array of variables.
|
||||
*/
|
||||
public function include_file( $template, $template_variables ) {
|
||||
if ( file_exists( $template ) ) {
|
||||
extract( $template_variables );
|
||||
include $template;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render custom block callback.
|
||||
*
|
||||
* @param array $attributes block attributes.
|
||||
* @param array $content block inner content.
|
||||
* @return string block output.
|
||||
*/
|
||||
public function render_custom_block( $attributes, $content ) {
|
||||
if ( ! isset( $attributes['canvasBlockName'] ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$block_name = $attributes['canvasBlockName'];
|
||||
|
||||
$block = $this->get_custom_block( $block_name );
|
||||
|
||||
if ( empty( $block ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$template = $this->get_block_template( $block, $attributes );
|
||||
|
||||
if ( ! $template || ! file_exists( $template ) ) {
|
||||
return esc_html__( 'Block template is not available :(', 'canvas' );
|
||||
}
|
||||
|
||||
// Generated HTML classes for blocks follow the `cnvs-block-{name}` nomenclature.
|
||||
// Blocks provided by Canvas drop the prefixes 'canvas/'.
|
||||
$block_class_name_prefix = $block_name;
|
||||
$block_class_name_prefix = preg_replace( '/\//', '-', $block_class_name_prefix );
|
||||
$block_class_name_prefix = preg_replace( '/^canvas-/', '', $block_class_name_prefix );
|
||||
$block_class_name_prefix = 'cnvs-block-' . $block_class_name_prefix;
|
||||
|
||||
$class_name = $block_class_name_prefix;
|
||||
|
||||
// add classnames.
|
||||
if ( isset( $attributes['canvasClassName'] ) && $attributes['canvasClassName'] ) {
|
||||
$class_name .= ' ' . $attributes['canvasClassName'];
|
||||
}
|
||||
|
||||
if ( isset( $attributes['layout'] ) ) {
|
||||
$class_name .= ' ' . $block_class_name_prefix . '-layout-' . $attributes['layout'];
|
||||
}
|
||||
|
||||
if ( isset( $attributes['className'] ) && $attributes['className'] ) {
|
||||
$class_name .= ' ' . $attributes['className'];
|
||||
}
|
||||
|
||||
if ( isset( $attributes['align'] ) && $attributes['align'] ) {
|
||||
$class_name .= ' align' . $attributes['align'];
|
||||
}
|
||||
|
||||
$attributes['className'] = trim( $class_name );
|
||||
|
||||
// Filter to prepare some attributes.
|
||||
$attributes = apply_filters( 'canvas_block_prepare_server_render_attributes', $attributes, $block );
|
||||
|
||||
// Current layout fields options.
|
||||
$options = array();
|
||||
|
||||
if ( isset( $attributes['layout'] ) ) {
|
||||
foreach ( $attributes as $name => $val ) {
|
||||
$layout_prefix = 'layout_' . $attributes['layout'] . '_';
|
||||
|
||||
if ( strpos( $name, $layout_prefix ) === 0 ) {
|
||||
$options[ str_replace( $layout_prefix, '', $name ) ] = $val;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ob_start();
|
||||
|
||||
$template_variables = apply_filters(
|
||||
'canvas_block_template_variables_' . $block_name, array(
|
||||
'attributes' => $attributes,
|
||||
'options' => $options,
|
||||
'content' => $content,
|
||||
), $block
|
||||
);
|
||||
|
||||
$this->include_file( $template, $template_variables );
|
||||
|
||||
do_action( 'canvas_block_server_rendered_template_' . $block_name, $attributes );
|
||||
|
||||
$output = ob_get_clean();
|
||||
|
||||
return apply_filters( 'canvas_block_server_rendered_template_output', $output, $attributes, $options );
|
||||
}
|
||||
|
||||
/**
|
||||
* Add fields styles.
|
||||
*
|
||||
* @param string $block Block data.
|
||||
* @param string $fields All available block fields.
|
||||
* @return string
|
||||
*/
|
||||
public function get_custom_block_fields_output_styles( $block, $fields ) {
|
||||
$return = '';
|
||||
|
||||
if ( isset( $block['attrs']['canvasClassName'] ) ) {
|
||||
$canvas_classname = '.' . $block['attrs']['canvasClassName'];
|
||||
|
||||
$return = CNVS_Gutenberg_Fields_CSS_Output::get(
|
||||
$canvas_classname,
|
||||
$fields,
|
||||
$block['attrs']
|
||||
);
|
||||
}
|
||||
|
||||
return $return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Output custom styles for all `output` fields of custom blocks.
|
||||
*
|
||||
* @param string $styles The styles.
|
||||
* @param array $blocks The blocks.
|
||||
*/
|
||||
public function blocks_dynamic_css( $styles = '', $blocks = array() ) {
|
||||
// parse custom blocks and add fields output styles.
|
||||
$custom_blocks = $this->get_custom_blocks();
|
||||
|
||||
if ( ! empty( $custom_blocks ) && ! empty( $blocks ) ) {
|
||||
foreach ( $blocks as $block ) {
|
||||
foreach ( $custom_blocks as $custom_block ) {
|
||||
if ( $custom_block['name'] === $block['blockName'] ) {
|
||||
$styles .= $this->get_custom_block_fields_output_styles(
|
||||
$block,
|
||||
isset( $custom_block['fields'] ) ? $custom_block['fields'] : array()
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $styles;
|
||||
}
|
||||
}
|
||||
new CNVS_Gutenberg_Blocks_Registration();
|
||||
}
|
||||
Reference in New Issue
Block a user