Block Filter

gistfile1.txt

import { __ } from "@wordpress/i18n";
import { addFilter } from "@wordpress/hooks";
import { createHigherOrderComponent } from "@wordpress/compose";
import { Fragment } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, ToggleControl } from "@wordpress/components";
import classnames from "classnames";

const { assign, merge } = lodash;

const allowedBlocks = ["core/paragraph"];

/**
 * RegisterBlockType
 */
function beth_addAClass(settings, name) {
	if (allowedBlocks.indexOf(name) === -1) return settings;

	return assign({}, settings, {
		attributes: merge(settings.attributes, {
			newClass: {
				type: "boolean",
				default: false,
			},
		}),
	});
}

addFilter("blocks.registerBlockType", "beth/add-a-class", beth_addAClass);

/**
 * BlockEdit
 */
const addInspectorControl = createHigherOrderComponent((BlockEdit) => {
	return (props) => {
		const {
			attributes: { newClass },
			setAttributes,
			name,
		} = props;

		if (allowedBlocks.indexOf(name) === -1) {
			return <BlockEdit {...props} />;
		}
		return (
			<Fragment>
				<BlockEdit {...props} />
				<InspectorControls>
					<PanelBody title={__("New Class", "beth")} initialOpen={false}>
						<ToggleControl
							checked={newClass}
							onChange={(newClass) => setAttributes({ newClass })}
						/>
					</PanelBody>
				</InspectorControls>
			</Fragment>
		);
	};
}, "withInspectorControl");

addFilter(
	"editor.BlockEdit",
	"beth/add-a-class-add-inspector-controls",
	addInspectorControl
);

/**
 * Add class to block in editor
 */
const addClassEditor = createHigherOrderComponent((BlockListBlock) => {
	return (props) => {
		const {
			attributes: { newClass },
			className,
			name,
		} = props;

		if (allowedBlocks.indexOf(name) === -1) {
			return <BlockListBlock {...props} />;
		}

		return (
			<BlockListBlock
				{...props}
				className={classnames(className, newClass ? `new-class` : "")}
			/>
		);
	};
}, "withClientIdClassName");

addFilter(
	"editor.BlockListBlock",
	"beth/add-a-class-add-editor-class",
	addClassEditor
);

/**
 * Add class to the block on the front end
 *
 * @param  {Object} props      Additional props applied to save element.
 * @param  {Object} block      Block type.
 * @param  {Object} attributes Current block attributes.
 * @return {Object}            Filtered props applied to save element.
 */
function addClassFrontEnd(props, block, attributes) {
	if (allowedBlocks.indexOf(block.name) === -1) {
		return props;
	}

	const { className } = props;
	const { newClass } = attributes;

	return assign({}, props, {
		className: classnames(className, newClass ? `new-class` : ""),
	});
}

addFilter(
	"blocks.getSaveContent.extraProps",
	"beth/add-a-class-add-front-end-class",
	addClassFrontEnd
);