Feature/block filters

src/blocks/aside/aside.js

@@ -14,21 +14,46 @@ import './editor.scss';
 
 // Internal dependencies.
 import RegisterBlockPreset from '../../global/register-block-preset.js';
+import themeOptions from '../../global/theme-options.js';
+import allowedBlocks from '../../components/allowed-blocks';
 
 // WordPress dependencies.
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
 const {
-	getColorClassName,
+	__,
+} = wp.i18n;
+const {
+	registerBlockType,
+} = wp.blocks;
+const {
 	InnerBlocks,
+	InspectorControls,
+	PanelColorSettings,
+	withColors,
 } = ( 'undefined' === typeof wp.blockEditor ) ? wp.editor : wp.blockEditor;
+const {
+	Fragment,
+} = wp.element;
+const {
+	applyFilters,
+} = wp.hooks;
 
-// Internal dependencies.
-import edit from './edit.js';
+/**
+ * Returns the class list for the block based on the current settings.
+ *
+ * @param {string} className  Classes assigned to the block.
+ * @param {string} themeColor The theme color assigned to the block.
+ */
+const getClasses = ( className, themeColor ) => {
+	const blockClasses = classnames( {
+		[ className ]: className,
+		[ `has-${themeColor}-background` ]: themeColor,
+	} );
+
+	return applyFilters( 'buBlocks.aside.classNames', blockClasses );
+};
 
 // Register the block.
 const asideBlock = registerBlockType( 'editorial/aside', {
-
 	title: __( 'Aside' ),
 	description: __( 'Add an aside with related information. Accepts image, headline, paragraph, and button blocks as children.' ),
 	icon: 'format-aside',
@@ -42,19 +67,52 @@ const asideBlock = registerBlockType( 'editorial/aside', {
 		},
 	},
 
-	edit,
-
-	save( { attributes, className } ) {
-		const { themeColor } = attributes;
-
-		const classes = classnames(
+	edit: withColors( 'themeColor' )( props => {
+		const {
 			className,
-			{ [ getColorClassName( 'background', themeColor ) ]: getColorClassName( 'background', themeColor ) }
+			themeColor,
+			setThemeColor,
+			presetTemplate,
+		} = props;
+
+		return (
+			<Fragment>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Color Settings' ) }
+						colorSettings={ [
+							{
+								value: themeColor.color,
+								onChange: setThemeColor,
+								label: __( 'Theme' ),
+								disableCustomColors: true,
+								colors: themeOptions(),
+							},
+						] }
+					/>
+				</InspectorControls>
+				<aside className={ getClasses( className, themeColor.slug ) }>
+					{ applyFilters( 'buBlocks.aside.afterOpening', '' ) }
+					<InnerBlocks
+						allowedBlocks={ allowedBlocks() }
+						template={ presetTemplate }
+					/>
+					{ applyFilters( 'buBlocks.aside.beforeClosing', '' ) }
+				</aside>
+			</Fragment>
 		);
+	} ),
+
+	save( { attributes, className } ) {
+		const {
+			themeColor
+		} = attributes;
 
 		return (
-			<aside className={ classes }>
+			<aside className={ getClasses( className, themeColor ) }>
+				{ applyFilters( 'buBlocks.aside.afterOpeningOutput', '' ) }
 				<InnerBlocks.Content />
+				{ applyFilters( 'buBlocks.aside.beforeClosingOutput', '' ) }
 			</aside>
 		);
 	},

src/blocks/buniverse/buniverse.js

@@ -36,23 +36,26 @@ const {
 	InspectorControls,
 	RichText,
 } = ( 'undefined' === typeof wp.blockEditor ) ? wp.editor : wp.blockEditor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 /**
  * Returns the class list for the block based on the current settings.
  *
- * @param {string} className     Default classes assigned to the block.
- * @param {string} stylizedTitle If the block has a stylized title.
+ * @param {string} className   Default classes assigned to the block.
+ * @param {string} aspectRatio Aspect ratio options set on the block.
  */
 const getClasses = ( className, aspectRatio ) => {
-	return (
-		classnames(
-			'wp-block-global-buniverse',
-			{
-				[ aspectRatio ]: aspectRatio,
-				[ className ]: className,
-			}
-		)
+	const blockClasses = classnames(
+		'wp-block-global-buniverse',
+		{
+			[ className ]: className,
+			[ aspectRatio ]: aspectRatio,
+		}
 	);
+
+	return applyFilters( 'buBlocks.buniverse.classNames', blockClasses );
 };
 
 // Register the block.
@@ -206,6 +209,7 @@ registerBlockType( 'bu/buniverse', {
 					/>
 				) }
 				<figure className={ getClasses( className, aspectRatio ) }>
+					{ applyFilters( 'buBlocks.buniverse.afterOpening', '' ) }
 					<div className="wp-block-global-buniverse-wrapper">
 						{ ! id && (
 							<div className="wp-block-global-buinverse-placeholder">
@@ -241,6 +245,7 @@ registerBlockType( 'bu/buniverse', {
 							/>
 						</figcaption>
 					) }
+					{ applyFilters( 'buBlocks.buniverse.beforeClosing', '' ) }
 				</figure>
 			</Fragment>
 		);
@@ -265,6 +270,7 @@ registerBlockType( 'bu/buniverse', {
 
 		return(
 			<figure className={ getClasses( className, aspectRatio ) }>
+				{ applyFilters( 'buBlocks.buniverse.afterOpeningOutput', '' ) }
 				<div className="wp-block-global-buniverse-wrapper">
 					{ id && (
 						<iframe
@@ -281,7 +287,7 @@ registerBlockType( 'bu/buniverse', {
 							</p>
 						</figcaption>
 					)}
-
+				{ applyFilters( 'buBlocks.buniverse.beforeClosingOutput', '' ) }
 			</figure>
 		);
 	},

src/blocks/button/button.js

@@ -43,6 +43,9 @@ const {
 	URLInput,
 	withColors,
 } = ( 'undefined' === typeof wp.blockEditor ) ? wp.editor : wp.blockEditor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 // The current publication owner.
 const publication = publicationSlug();
@@ -54,19 +57,22 @@ const publication = publicationSlug();
  * @param {string} themeColor The theme color assigned to the block.
  * @param {string} icon       The icon placement.
  */
-const getClasses = ( className, themeColor, icon ) => classnames(
-	'wp-block-button',
-	{
-		[ `${publication}-block-button` ]: publication && publication !== '',
-		[ `has-${themeColor}-theme` ]: themeColor,
-		[ `icon-navigateright ${icon}` ]: icon,
-		[ className ]: className,
-	}
-);
+const getClasses = ( className, themeColor, icon ) => {
+	const blockClasses = classnames(
+		'wp-block-button',
+		{
+			[ className ]: className,
+			[ `${publication}-block-button` ]: publication && publication !== '',
+			[ `has-${themeColor}-theme` ]: themeColor,
+			[ `icon-navigateright ${icon}` ]: icon,
+		}
+	);
+
+	return applyFilters( 'buBlocks.button.classNames', blockClasses );
+};
 
 // Register the block.
 registerBlockType( 'bu/button', {
-
 	title: __( 'Button' ),
 	description: __( 'Prompt visitors to take action with a custom button.' ),
 	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path fill="#c00" d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></G></SVG>,
@@ -174,6 +180,7 @@ registerBlockType( 'bu/button', {
 						</PanelBody>
 					</InspectorControls>
 				<p>
+					{ applyFilters( 'buBlocks.button.afterOpening', '' ) }
 					<RichText
 						placeholder={ __( 'Add text…' ) }
 						value={ text }
@@ -183,6 +190,7 @@ registerBlockType( 'bu/button', {
 						className={ getClasses( className, themeColor.slug, icon ) }
 						keepPlaceholderOnFocus
 					/>
+					{ applyFilters( 'buBlocks.button.beforeClosing', '' ) }
 				</p>
 				{ isSelected && (
 					<form
@@ -211,12 +219,14 @@ registerBlockType( 'bu/button', {
 
 		return (
 			<p>
+				{ applyFilters( 'buBlocks.button.afterOpeningOutput', '' ) }
 				<RichText.Content
 					tagName="a"
 					className={ getClasses( className, themeColor, icon ) }
 					href={ url }
 					value={ text }
 				/>
+				{ applyFilters( 'buBlocks.button.beforeClosingOutput', '' ) }
 			</p>
 		);
 	},

src/blocks/drawer/drawer.js

@@ -49,6 +49,10 @@ const {
 	isBlockSelected,
 } = ( 'undefined' === typeof select( 'core/block-editor' ) ) ? select( 'core/editor' ) : select( 'core/block-editor' );
 
+const {
+	applyFilters,
+} = wp.hooks;
+
 /**
  * Returns the class list for the block based on the current settings.
  *
@@ -59,19 +63,19 @@ const {
  * @param {string}  themeColor The assigned background color.
  */
 const getClasses = ( background, className, hideTeaser, round, size, themeColor ) => {
-	return (
-		classnames(
-			'js-bu-block-drawer',
-			{
-				'has-hide-teaser': hideTeaser,
-				'is-style-round': round,
-				[ className ]: className,
-				[ `has-${themeColor}-background` ]: themeColor,
-				[ size ]: size && size !== '',
-				'has-media': background,
-			}
-		)
+	const blockClasses = classnames(
+		'js-bu-block-drawer',
+		{
+			[ className ]: className,
+			'has-hide-teaser': hideTeaser,
+			'is-style-round': round,
+			[ `has-${themeColor}-background` ]: themeColor,
+			[ size ]: size && size !== '',
+			'has-media': background,
+		}
 	);
+
+	return applyFilters( 'buBlocks.drawer.classNames', blockClasses );
 };
 
 // Register the block.
@@ -163,6 +167,7 @@ registerBlockType( 'editorial/drawer', {
 
 		return (
 			<aside className={ getClasses( backgroundId, className, hideTeaser, round, size, themeColor.slug ) }>
+				{ applyFilters( 'buBlocks.drawer.afterOpening', '' ) }
 				<div className="wp-block-editorial-drawer-teaser">
 					{ ( backgroundId || isSelected || hasSelectedInnerBlock( clientId, true ) ) &&
 						<figure>
@@ -272,6 +277,7 @@ registerBlockType( 'editorial/drawer', {
 						/>
 					</PanelBody>
 				</InspectorControls>
+				{ applyFilters( 'buBlocks.drawer.beforeClosing', '' ) }
 			</aside>
 		);
 	} ),
@@ -294,6 +300,7 @@ registerBlockType( 'editorial/drawer', {
 
 		return (
 			<aside className={ getClasses( backgroundId, className, hideTeaser, round, size, themeColor ) }>
+				{ applyFilters( 'buBlocks.drawer.afterOpeningOutput', '' ) }
 				<div className="wp-block-editorial-drawer-teaser">
 					{ backgroundId &&
 						<figure>
@@ -322,6 +329,7 @@ registerBlockType( 'editorial/drawer', {
 						</div>
 					</div>
 				</section>
+				{ applyFilters( 'buBlocks.drawer.beforeClosingOutput', '' ) }
 			</aside>
 		);
 	},