From 66fd308403ccdafff5cf0026d94ceae525cb21b5 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 10:17:35 -0700
Subject: [PATCH 01/15] Consolidate aside edit function into primary file

---
 src/blocks/aside/aside.js | 82 ++++++++++++++++++++++++++++++++-------
 src/blocks/aside/edit.js  | 65 -------------------------------
 2 files changed, 68 insertions(+), 79 deletions(-)
 delete mode 100644 src/blocks/aside/edit.js

diff --git a/src/blocks/aside/aside.js b/src/blocks/aside/aside.js
index 74712dd6..ccb713e1 100644
--- a/src/blocks/aside/aside.js
+++ b/src/blocks/aside/aside.js
@@ -14,18 +14,43 @@ 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, InnerBlocks } = wp.editor;
+const {
+	__,
+} = wp.i18n;
+const {
+	registerBlockType,
+} = wp.blocks;
+const {
+	InnerBlocks,
+	InspectorControls,
+	PanelColorSettings,
+	withColors,
+} = wp.editor;
+const {
+	Fragment,
+} = wp.element;
 
-// 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 ) => {
+	return classnames(
+		className,
+		{
+			[ `has-${themeColor}-background` ]: themeColor,
+		},
+	);
+};
 
 // 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',
@@ -39,18 +64,47 @@ 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 ) }>
+					<InnerBlocks
+						allowedBlocks={ allowedBlocks() }
+						template={ presetTemplate }
+					/>
+				</aside>
+			</Fragment>
 		);
+	} ),
+
+	save( { attributes, className } ) {
+		const {
+			themeColor
+		} = attributes;
 
 		return (
-			<aside className={ classes }>
+			<aside className={ getClasses( className, themeColor ) }>
 				<InnerBlocks.Content />
 			</aside>
 		);
diff --git a/src/blocks/aside/edit.js b/src/blocks/aside/edit.js
deleted file mode 100644
index e2561f29..00000000
--- a/src/blocks/aside/edit.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Edit function for the aside block.
- */
-
-// External dependencies.
-import classnames from 'classnames';
-
-// Internal dependencies.
-import themeOptions from '../../global/theme-options.js';
-import allowedBlocks from '../../components/allowed-blocks';
-
-// WordPress dependencies.
-const { __ } = wp.i18n;
-const { Component, Fragment } = wp.element;
-const { compose } = wp.compose;
-const { InnerBlocks, InspectorControls, PanelColorSettings, withColors } = wp.editor;
-
-class BUAsideEdit extends Component {
-	constructor() {
-		super( ...arguments );
-	}
-
-	render() {
-		const {
-			className,
-			themeColor,
-			setThemeColor,
-			presetTemplate,
-		} = this.props;
-
-		const classes = classnames(
-			className,
-			{ [ `has-${themeColor.slug}-background` ]: themeColor.slug }
-		);
-
-		return (
-			<Fragment>
-				<InspectorControls>
-					<PanelColorSettings
-						title={ __( 'Color Settings' ) }
-						colorSettings={ [
-							{
-								value: themeColor.color,
-								onChange: setThemeColor,
-								label: __( 'Theme' ),
-								disableCustomColors: true,
-								colors: themeOptions(),
-							},
-						] }
-					/>
-				</InspectorControls>
-				<aside className={ classes }>
-					<InnerBlocks
-						allowedBlocks={ allowedBlocks() }
-						template={ presetTemplate }
-					/>
-				</aside>
-			</Fragment>
-		);
-	}
-}
-
-export default compose( [
-	withColors( 'themeColor' )
-] )( BUAsideEdit );
\ No newline at end of file

From c17ef1c39f1ca791af0c27a74dc4937ca9ed41ae Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 11:10:26 -0700
Subject: [PATCH 02/15] Add filters for the Aside block classname, start, and
 end

---
 src/blocks/aside/aside.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/blocks/aside/aside.js b/src/blocks/aside/aside.js
index ccb713e1..b128f1f3 100644
--- a/src/blocks/aside/aside.js
+++ b/src/blocks/aside/aside.js
@@ -33,6 +33,9 @@ const {
 const {
 	Fragment,
 } = wp.element;
+const {
+	applyFilters,
+} = wp.hooks;
 
 /**
  * Returns the class list for the block based on the current settings.
@@ -41,12 +44,12 @@ const {
  * @param {string} themeColor The theme color assigned to the block.
  */
 const getClasses = ( className, themeColor ) => {
-	return classnames(
-		className,
-		{
-			[ `has-${themeColor}-background` ]: themeColor,
-		},
-	);
+	const blockClasses = classnames( {
+		[ className ]: className,
+		[ `has-${themeColor}-background` ]: themeColor,
+	} );
+
+	return applyFilters( 'buBlocks.aside.classNames', blockClasses );
 };
 
 // Register the block.
@@ -89,10 +92,12 @@ const asideBlock = registerBlockType( 'editorial/aside', {
 					/>
 				</InspectorControls>
 				<aside className={ getClasses( className, themeColor.slug ) }>
+					{ applyFilters( 'buBlocks.aside.afterOpening', '' ) }
 					<InnerBlocks
 						allowedBlocks={ allowedBlocks() }
 						template={ presetTemplate }
 					/>
+					{ applyFilters( 'buBlocks.aside.beforeClosing', '' ) }
 				</aside>
 			</Fragment>
 		);
@@ -105,7 +110,9 @@ const asideBlock = registerBlockType( 'editorial/aside', {
 
 		return (
 			<aside className={ getClasses( className, themeColor ) }>
+				{ applyFilters( 'buBlocks.aside.afterOpeningOutput', '' ) }
 				<InnerBlocks.Content />
+				{ applyFilters( 'buBlocks.aside.beforeClosingOutput', '' ) }
 			</aside>
 		);
 	},

From fa6f000c50ce4439253050b71c3581c7d822749b Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 11:24:30 -0700
Subject: [PATCH 03/15] Add filters for the BUniverse block classname, start,
 and end

---
 src/blocks/buniverse/buniverse.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/blocks/buniverse/buniverse.js b/src/blocks/buniverse/buniverse.js
index c1c5e68e..c82ce643 100644
--- a/src/blocks/buniverse/buniverse.js
+++ b/src/blocks/buniverse/buniverse.js
@@ -33,23 +33,26 @@ const {
 	InspectorControls,
 	RichText,
 } = wp.editor;
+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.
@@ -203,6 +206,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">
@@ -237,6 +241,7 @@ registerBlockType( 'bu/buniverse', {
 							/>
 						</figcaption>
 					) }
+					{ applyFilters( 'buBlocks.buniverse.beforeClosing', '' ) }
 				</figure>
 			</Fragment>
 		);
@@ -261,6 +266,7 @@ registerBlockType( 'bu/buniverse', {
 
 		return(
 			<figure className={ getClasses( className, aspectRatio ) }>
+				{ applyFilters( 'buBlocks.buniverse.afterOpeningOutput', '' ) }
 				<div className="wp-block-global-buniverse-wrapper">
 					{ id && (
 						<iframe
@@ -277,7 +283,7 @@ registerBlockType( 'bu/buniverse', {
 							</p>
 						</figcaption>
 					)}
-
+				{ applyFilters( 'buBlocks.buniverse.beforeClosingOutput', '' ) }
 			</figure>
 		);
 	},

From 265a03d4e606c922f195fcc8ede9b4a5fba50d5a Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 11:32:28 -0700
Subject: [PATCH 04/15] Add filters to the Button block

---
 src/blocks/button/button.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/blocks/button/button.js b/src/blocks/button/button.js
index 5d38ff6c..aa17d368 100644
--- a/src/blocks/button/button.js
+++ b/src/blocks/button/button.js
@@ -42,6 +42,9 @@ const {
 	URLInput,
 	withColors,
 } = wp.editor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 // The current publication owner.
 const publication = publicationSlug();
@@ -53,19 +56,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>,
@@ -173,6 +179,7 @@ registerBlockType( 'bu/button', {
 						</PanelBody>
 					</InspectorControls>
 				<p>
+					{ applyFilters( 'buBlocks.button.afterOpening', '' ) }
 					<RichText
 						placeholder={ __( 'Add text…' ) }
 						value={ text }
@@ -181,6 +188,7 @@ registerBlockType( 'bu/button', {
 						className={ getClasses( className, themeColor.slug, icon ) }
 						keepPlaceholderOnFocus
 					/>
+					{ applyFilters( 'buBlocks.button.beforeClosing', '' ) }
 				</p>
 				{ isSelected && (
 					<form
@@ -209,12 +217,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>
 		);
 	},

From 257592fc262a1320313e50ffc6626a3d8ec140c8 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 11:54:22 -0700
Subject: [PATCH 05/15] Add filters to the Drawer block

---
 src/blocks/drawer/drawer.js | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/blocks/drawer/drawer.js b/src/blocks/drawer/drawer.js
index 99344ebb..00e9d9d8 100644
--- a/src/blocks/drawer/drawer.js
+++ b/src/blocks/drawer/drawer.js
@@ -44,6 +44,9 @@ const {
 	hasSelectedInnerBlock,
 	isBlockSelected,
 } = select( 'core/editor' );
+const {
+	applyFilters,
+} = wp.hooks;
 
 /**
  * Returns the class list for the block based on the current settings.
@@ -55,19 +58,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.
@@ -159,6 +162,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>
@@ -265,6 +269,7 @@ registerBlockType( 'editorial/drawer', {
 						/>
 					</PanelBody>
 				</InspectorControls>
+				{ applyFilters( 'buBlocks.drawer.beforeClosing', '' ) }
 			</aside>
 		);
 	} ),
@@ -287,6 +292,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>
@@ -315,6 +321,7 @@ registerBlockType( 'editorial/drawer', {
 						</div>
 					</div>
 				</section>
+				{ applyFilters( 'buBlocks.drawer.beforeClosingOutput', '' ) }
 			</aside>
 		);
 	},

From a60d89c2dc584c18d62ed1f4d857183878c48da6 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 12:10:24 -0700
Subject: [PATCH 06/15] Add classname filter to the Headline block

This block has no outer element in which to add the content filters.
---
 src/blocks/headline/headline.js | 52 ++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/blocks/headline/headline.js b/src/blocks/headline/headline.js
index 576e703b..6a3ee360 100644
--- a/src/blocks/headline/headline.js
+++ b/src/blocks/headline/headline.js
@@ -4,6 +4,9 @@
  * A headline with anchor support and pre- and post-text formatting options.
  */
 
+// External dependencies.
+import classnames from 'classnames';
+
 // Import CSS.
 import './style.scss';
 import './editor.scss';
@@ -14,15 +17,39 @@ import './pretext-format.js'
 import './posttext-format.js'
 
 // WordPress dependencies.
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
-const { Fragment } = wp.element;
-const { RichText, BlockControls } = wp.editor;
-const { select } = wp.data;
+const {
+	__,
+} = wp.i18n;
+const {
+	registerBlockType,
+} = wp.blocks;
+const {
+	Fragment,
+} = wp.element;
+const {
+	RichText,
+	BlockControls,
+} = wp.editor;
+const {
+	select,
+} = wp.data;
+const {
+	applyFilters,
+} = wp.hooks;
+
+/**
+ * Returns the class list for the block based on the current settings.
+ *
+ * @param {string} className Classes assigned to the block.
+ */
+const getClasses = ( className ) => {
+	const blockClasses = classnames( { [ className ]: className } );
+
+	return applyFilters( 'buBlocks.headline.classNames', blockClasses );
+};
 
 // Register the block.
 registerBlockType( 'editorial/headline', {
-
 	title: __( 'Headline' ),
 	description: __( 'Add a section heading with an anchor and pre- and post-text formatting options.' ),
 	icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#c00" d="M5 4v3h5.5v12h3V7H19V4z" /><path fill="none" d="M0 0h24v24H0V0z" /></svg>,
@@ -31,6 +58,10 @@ registerBlockType( 'editorial/headline', {
 		anchor: true,
 	},
 	attributes: {
+		className: {
+			type: 'string',
+			default: '',
+		},
 		content: {
 			type: 'string',
 			source: 'html',
@@ -85,7 +116,7 @@ registerBlockType( 'editorial/headline', {
 				</BlockControls>
 				<RichText
 					tagName={ tagName }
-					className={ className }
+					className={ getClasses( className ) }
 					value={ content }
 					onChange={ content => setAttributes( { content } ) }
 					placeholder={ __( 'Write headline…' ) }
@@ -96,12 +127,17 @@ registerBlockType( 'editorial/headline', {
 	},
 
 	save( { attributes } ) {
-		const { content, level } = attributes;
+		const {
+			className,
+			content,
+			level,
+		} = attributes;
 		const tagName = 'h' + level;
 
 		return (
 			<RichText.Content
 				tagName={ tagName }
+				className={ getClasses( className ) }
 				value={ content }
 			/>
 		);

From 2c1a7e22ddb6e72448c735c3c45ac6b6a7518cf4 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 13:12:57 -0700
Subject: [PATCH 07/15] Add filters to the Intro Paragraph block

---
 src/blocks/introparagraph/introparagraph.js | 46 ++++++++++++---------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/blocks/introparagraph/introparagraph.js b/src/blocks/introparagraph/introparagraph.js
index 29babd4a..09b4acd5 100644
--- a/src/blocks/introparagraph/introparagraph.js
+++ b/src/blocks/introparagraph/introparagraph.js
@@ -34,6 +34,9 @@ const {
 	PanelColorSettings,
 	withColors,
 } = wp.editor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 // Import a library used to manage multiple class names.
 import classnames from 'classnames';
@@ -71,6 +74,23 @@ const renderDropCapSVG = ( character, imageURL ) => {
 	);
 };
 
+/**
+ * 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, hasDropCapStyle, dropCapColor, paragraphColor ) => {
+	const blockClasses = classnames( {
+		[ className ]: className,
+		'has-dropcap': hasDropCapStyle,
+		[`has-dropcap-color-${dropCapColor}`]: hasDropCapStyle && dropCapColor,
+		[`has-paragraph-color-${paragraphColor}`]: ! hasDropCapStyle && paragraphColor,
+	} );
+
+	return applyFilters( 'buBlocks.introparagraph.classNames', blockClasses );
+};
+
 // Register the block.
 registerBlockType( 'editorial/introparagraph', {
 
@@ -287,15 +307,6 @@ registerBlockType( 'editorial/introparagraph', {
 			);
 		};
 
-		const classes = classnames(
-			className,
-			{
-				'has-dropcap': hasDropCapStyle,
-				[`has-dropcap-color-${dropCapColor.slug}`]: hasDropCapStyle && dropCapColor && dropCapColor.slug,
-				[`has-paragraph-color-${paragraphColor.slug}`]: ! hasDropCapStyle && paragraphColor && paragraphColor.slug,
-			},
-		);
-
 		return (
 			<Fragment>
 				<InspectorControls>
@@ -303,7 +314,8 @@ registerBlockType( 'editorial/introparagraph', {
 					{ hasDropCapStyle && ! isImageDropCap && renderDropCapColorSettings() }
 					{ hasDropCapStyle && isImageDropCap && renderDropCapImageSettings() }
 				</InspectorControls>
-				<div className={ classes }>
+				<div className={ getClasses( className, hasDropCapStyle, dropCapColor.slug, paragraphColor.slug ) }>
+					{ applyFilters( 'buBlocks.introparagraph.afterOpening', '' ) }
 					<PlainText
 						tagname='h4'
 						value={ heading }
@@ -340,6 +352,7 @@ registerBlockType( 'editorial/introparagraph', {
 							}
 						/>
 					</div>
+					{ applyFilters( 'buBlocks.introparagraph.beforeClosing', '' ) }
 				</div>
 			</Fragment>
 		);
@@ -377,17 +390,9 @@ registerBlockType( 'editorial/introparagraph', {
 		// Determine if a sepecific dropcap style has been selected.
 		let hasDropCapStyle = className && className.includes( 'is-style-dropcap' );
 
-		const classes = classnames(
-			className,
-			{
-				'has-dropcap': hasDropCapStyle,
-				[`has-dropcap-color-${dropCapColor}`]: hasDropCapStyle && dropCapColor,
-				[`has-paragraph-color-${paragraphColor}`]: ! hasDropCapStyle && paragraphColor,
-			},
-		);
-
 		return (
-			<div className={ classes }>
+			<div className={ getClasses( className, hasDropCapStyle, dropCapColor, paragraphColor ) }>
+				{ applyFilters( 'buBlocks.introparagraph.afterOpeningOutput', '' ) }
 				{ ! RichText.isEmpty( heading ) && (
 					<RichText.Content tagName="h4" value={ heading } />
 				) }
@@ -408,6 +413,7 @@ registerBlockType( 'editorial/introparagraph', {
 						/>
 					</div>
 				) }
+				{ applyFilters( 'buBlocks.introparagraph.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},

From 880fc45cca4a94d9429af096667f11ff59d9e1d3 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 13:26:59 -0700
Subject: [PATCH 08/15] Add filters to the Listicle block

---
 src/blocks/listicle/listicle.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/blocks/listicle/listicle.js b/src/blocks/listicle/listicle.js
index 3a197031..2e595c25 100644
--- a/src/blocks/listicle/listicle.js
+++ b/src/blocks/listicle/listicle.js
@@ -36,6 +36,9 @@ const {
 	RichText,
 	PlainText,
 } = wp.editor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 /**
  * Returns the class list for the block based on the current settings.
@@ -47,18 +50,16 @@ const {
  * @param {boolean} backgroundAutoplay Whether the background video is set to autoplay.
  */
 const getClasses = ( className, number, aside, backgroundUrl, backgroundAutoplay, divider ) => {
-	return (
-		classnames(
-			className,
-			{
-				'has-number': number,
-				'has-sidebar': aside,
-				'has-media': backgroundUrl,
-				'has-video-as-loop': backgroundAutoplay,
-				'has-no-bottom-divider' : !divider,
-			}
-		)
-	);
+	const blockClasses = classnames( {
+		[ className ]: className,
+		'has-number': number,
+		'has-sidebar': aside,
+		'has-media': backgroundUrl,
+		'has-video-as-loop': backgroundAutoplay,
+		'has-no-bottom-divider' : !divider,
+	} );
+
+	return applyFilters( 'buBlocks.listicle.classNames', blockClasses );
 };
 
 /**
@@ -205,6 +206,7 @@ registerBlockType( 'editorial/listicle', {
 			// Return the block editing interface.
 			return (
 				<section className={ getClasses( className, number, hasAsideContent, backgroundUrl, backgroundAutoplay, divider ) }>
+					{ applyFilters( 'buBlocks.listicle.afterOpening', '' ) }
 					<article className="wp-block-editorial-listicle-article">
 						<figure className="wp-block-editorial-listicle-figure">
 							<Background
@@ -305,6 +307,7 @@ registerBlockType( 'editorial/listicle', {
 							/>
 						</PanelBody>
 					</InspectorControls>
+					{ applyFilters( 'buBlocks.listicle.beforeClosing', '' ) }
 				</section>
 			);
 		};
@@ -334,6 +337,7 @@ registerBlockType( 'editorial/listicle', {
 		// Return the block rendering for the front end.
 		return (
 			<section className={ getClasses( className, number, aside, backgroundUrl, backgroundAutoplay, divider ) }>
+				{ applyFilters( 'buBlocks.listicle.afterOpeningOutput', '' ) }
 				<article className="wp-block-editorial-listicle-article">
 					<figure className="wp-block-editorial-listicle-figure">
 						<Background
@@ -395,6 +399,7 @@ registerBlockType( 'editorial/listicle', {
 						</footer>
 					) }
 				</article>
+				{ applyFilters( 'buBlocks.listicle.beforeClosingOutput', '' ) }
 			</section>
 		);
 	},

From 7c455307d03ca9e518777829b88c049c13d0ab5e Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 14:04:52 -0700
Subject: [PATCH 09/15] Move edit function into main file and add filters for
 the Modal block

---
 src/blocks/modal/edit.js  | 134 ----------------------------
 src/blocks/modal/modal.js | 179 ++++++++++++++++++++++++++++++++++----
 2 files changed, 160 insertions(+), 153 deletions(-)
 delete mode 100644 src/blocks/modal/edit.js

diff --git a/src/blocks/modal/edit.js b/src/blocks/modal/edit.js
deleted file mode 100644
index 0fcf5cf3..00000000
--- a/src/blocks/modal/edit.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Edit function for the modal block.
- */
-
-// External dependencies.
-import classnames from 'classnames';
-
-// Internal dependencies.
-import themeOptions from '../../global/theme-options';
-import Background from '../../components/background';
-import allowedBlocks from '../../components/allowed-blocks';
-
-// WordPress dependencies.
-const { __ } = wp.i18n;
-const { Component, Fragment } = wp.element;
-const { compose } = wp.compose;
-const { InspectorControls, InnerBlocks, PanelColorSettings, RichText, withColors } = wp.editor;
-const { select } = wp.data;
-const { hasSelectedInnerBlock, isBlockSelected } = select( 'core/editor' );
-
-// Only allow images in the background component for this block.
-const allowedMedia = [ 'image' ];
-
-class BUEditorialModalEdit extends Component {
-	constructor() {
-		super( ...arguments );
-	}
-
-	render() {
-		const {
-			attributes,
-			themeColor,
-			setThemeColor,
-			setAttributes,
-			className,
-			clientId,
-		} = this.props;
-
-		const {
-			backgroundId,
-			calloutHeading,
-			calloutText,
-			trigger,
-		} = attributes;
-
-		const classes = classnames(
-			className,
-			{
-				[ `has-${themeColor.slug}-theme` ]: themeColor.slug,
-				'has-media': backgroundId,
-			}
-		);
-
-		// Set the clientId attribute so it can be accessed in the `getEditWrapperProps` function.
-		if ( hasSelectedInnerBlock( clientId, true ) || isBlockSelected( clientId ) ) {
-			setAttributes( { clientId: clientId } );
-		}
-
-		return (
-			<Fragment>
-				<InspectorControls>
-					<PanelColorSettings
-						title={ __( 'Theme Settings' ) }
-						colorSettings={ [
-							{
-								value: themeColor.color,
-								onChange: setThemeColor,
-								label: __( 'Theme' ),
-								disableCustomColors: true,
-								colors: themeOptions(),
-							},
-						] }
-					/>
-				</InspectorControls>
-				<aside className={ classes }>
-					<div className="wp-block-editorial-modal-callout">
-						<div className="wp-block-editorial-modal-media">
-							<figure className="wp-block-editorial-modal-image">
-								<Background
-									allowedMediaTypes={ allowedMedia }
-									blockProps={ this.props }
-									className="banner-placeholder"
-									placeholderText={ __( 'Add Image' ) }
-								/>
-							</figure>
-						</div>
-						<div className="wp-block-editorial-modal-callout-content">
-							<div className="modal-valign">
-								<RichText
-									tagName="h1"
-									onChange={ value => setAttributes( { calloutHeading: value } ) }
-									value={ calloutHeading }
-									placeholder={ __( 'Enter heading…' ) }
-									formattingControls={ [] }
-								/>
-								<RichText
-									tagName="p"
-									onChange={ value => setAttributes( { calloutText: value } ) }
-									value={ calloutText }
-									placeholder={ __( 'Enter text…' ) }
-									formattingControls={ [ 'bold', 'italic', 'link' ] }
-								/>
-								<div className="wp-block-editorial-modal-trigger-wrapper">
-									<RichText
-										tagName="p"
-										className="js-bu-block-modal-trigger-overlay button"
-										onChange={ value => setAttributes( { trigger: value } ) }
-										value={ trigger }
-										placeholder={ __( 'Enter trigger label…' ) }
-										formattingControls={ [] }
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div className="wp-block-editorial-modal-content js-bu-block-modal-overlay">
-						<div className="overlay overlay-scale">
-							<a href="#" class="wp-block-editorial-modal-overlay-close js-bu-block-modal-overlay-close">Close</a>
-							<article>
-								<InnerBlocks
-									allowedBlocks={ allowedBlocks() }
-								/>
-							</article>
-						</div>
-					</div>
-				</aside>
-			</Fragment>
-		);
-	}
-}
-
-export default compose( [
-	withColors( 'themeColor' )
-] )( BUEditorialModalEdit );
\ No newline at end of file
diff --git a/src/blocks/modal/modal.js b/src/blocks/modal/modal.js
index 5006275c..20589e53 100644
--- a/src/blocks/modal/modal.js
+++ b/src/blocks/modal/modal.js
@@ -12,20 +12,60 @@ import './style.scss';
 import './editor.scss';
 
 // Internal dependencies.
-import edit from './edit.js';
 import Background, { BackgroundAttributes } from '../../components/background';
+import themeOptions from '../../global/theme-options';
+import allowedBlocks from '../../components/allowed-blocks';
 
 // WordPress dependencies.
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
-const { getColorClassName } = wp.editor;
-const { InnerBlocks } = wp.editor;
-const { select } = wp.data;
-const { hasSelectedInnerBlock, isBlockSelected } = select( 'core/editor' );
+const {
+	__,
+} = wp.i18n;
+const {
+	registerBlockType,
+} = wp.blocks;
+const {
+	Fragment,
+} = wp.element;
+const {
+	InspectorControls,
+	InnerBlocks,
+	PanelColorSettings,
+	RichText,
+	withColors,
+} = wp.editor;
+const {
+	select,
+} = wp.data;
+const {
+	hasSelectedInnerBlock,
+	isBlockSelected,
+} = select( 'core/editor' );
+const {
+	applyFilters,
+} = wp.hooks;
+
+/**
+ * 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.
+ * @param {string} backgroundId The id of the background media added to the block.
+ */
+const getClasses = ( className, themeColor, backgroundId ) => {
+	const blockClasses = classnames( {
+		[ className ]: className,
+		[ `has-${themeColor}-theme` ]: themeColor,
+		'has-media': backgroundId,
+	} );
+
+	return applyFilters( 'buBlocks.modal.classNames', blockClasses );
+};
+
+// Only allow images in the background component for this block.
+const allowedMedia = [ 'image' ];
 
 // Register the block.
 registerBlockType( 'editorial/modal', {
-
 	title: __( 'Modal' ),
 	description: __( 'A block with a callout for opening a modal with supplemental or complementary information.' ),
 	icon: 'admin-page',
@@ -34,6 +74,10 @@ registerBlockType( 'editorial/modal', {
 		align: true,
 	},
 	attributes: {
+		className: {
+			type: 'string',
+			default: '',
+		},
 		clientId: {
 			type: 'number',
 		},
@@ -67,22 +111,118 @@ registerBlockType( 'editorial/modal', {
 		}
 	},
 
-	edit,
+	edit: withColors( 'themeColor' )( props => {
+		const {
+			attributes,
+			themeColor,
+			setThemeColor,
+			setAttributes,
+			className,
+			clientId,
+		} = props;
+
+		const {
+			backgroundId,
+			calloutHeading,
+			calloutText,
+			trigger,
+		} = attributes;
+
+		// Set the clientId attribute so it can be accessed in the `getEditWrapperProps` function.
+		if ( hasSelectedInnerBlock( clientId, true ) || isBlockSelected( clientId ) ) {
+			setAttributes( { clientId: clientId } );
+		}
+
+		return (
+			<Fragment>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Theme Settings' ) }
+						colorSettings={ [
+							{
+								value: themeColor.color,
+								onChange: setThemeColor,
+								label: __( 'Theme' ),
+								disableCustomColors: true,
+								colors: themeOptions(),
+							},
+						] }
+					/>
+				</InspectorControls>
+				<aside className={ getClasses( className, themeColor.slug, backgroundId ) }>
+					{ applyFilters( 'buBlocks.modal.afterOpening', '' ) }
+					<div className="wp-block-editorial-modal-callout">
+						<div className="wp-block-editorial-modal-media">
+							<figure className="wp-block-editorial-modal-image">
+								<Background
+									allowedMediaTypes={ allowedMedia }
+									blockProps={ props }
+									className="banner-placeholder"
+									placeholderText={ __( 'Add Image' ) }
+								/>
+							</figure>
+						</div>
+						<div className="wp-block-editorial-modal-callout-content">
+							<div className="modal-valign">
+								<RichText
+									tagName="h1"
+									onChange={ value => setAttributes( { calloutHeading: value } ) }
+									value={ calloutHeading }
+									placeholder={ __( 'Enter heading…' ) }
+									formattingControls={ [] }
+								/>
+								<RichText
+									tagName="p"
+									onChange={ value => setAttributes( { calloutText: value } ) }
+									value={ calloutText }
+									placeholder={ __( 'Enter text…' ) }
+									formattingControls={ [ 'bold', 'italic', 'link' ] }
+								/>
+								<div className="wp-block-editorial-modal-trigger-wrapper">
+									<RichText
+										tagName="p"
+										className="js-bu-block-modal-trigger-overlay button"
+										onChange={ value => setAttributes( { trigger: value } ) }
+										value={ trigger }
+										placeholder={ __( 'Enter trigger label…' ) }
+										formattingControls={ [] }
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div className="wp-block-editorial-modal-content js-bu-block-modal-overlay">
+						<div className="overlay overlay-scale">
+							<a href="#" class="wp-block-editorial-modal-overlay-close js-bu-block-modal-overlay-close">Close</a>
+							<article>
+								<InnerBlocks
+									allowedBlocks={ allowedBlocks() }
+								/>
+							</article>
+						</div>
+					</div>
+					{ applyFilters( 'buBlocks.modal.beforeClosing', '' ) }
+				</aside>
+			</Fragment>
+		);
+	} ),
 
 	save( props ) {
-		const { attributes, className } = props;
-		const { themeColor, calloutHeading, calloutText, trigger, backgroundId } = attributes;
-		const classes = classnames(
+		const {
+			attributes,
+		} = props;
+		const {
 			className,
-			'js-bu-block-modal',
-			{
-				[ getColorClassName( 'theme', themeColor ) ]: getColorClassName( 'theme', themeColor ),
-				'has-media': backgroundId,
-			}
-		);
+			themeColor,
+			calloutHeading,
+			calloutText,
+			trigger,
+			backgroundId,
+		} = attributes;
 
 		return (
-			<aside className={ classes }>
+			<aside className={ getClasses( className, themeColor, backgroundId ) }>
+				{ applyFilters( 'buBlocks.modal.afterOpeningOutput', '' ) }
 				<div className="wp-block-editorial-modal-callout">
 					<div className="wp-block-editorial-modal-media">
 						<figure className="wp-block-editorial-modal-image">
@@ -110,6 +250,7 @@ registerBlockType( 'editorial/modal', {
 						</article>
 					</div>
 				</div>
+				{ applyFilters( 'buBlocks.modal.beforeClosingOutput', '' ) }
 			</aside>
 		);
 	},

From d18f73748148496abc8be287c59933dbdc8ab767 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 14:27:00 -0700
Subject: [PATCH 10/15] Add filters to the Photo Essay block

---
 src/blocks/photoessay/photoessay.js | 48 ++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/blocks/photoessay/photoessay.js b/src/blocks/photoessay/photoessay.js
index a5222987..20eacc2c 100644
--- a/src/blocks/photoessay/photoessay.js
+++ b/src/blocks/photoessay/photoessay.js
@@ -8,6 +8,9 @@
 import './style.scss';
 import './editor.scss';
 
+// External dependencies.
+import classnames from 'classnames';
+
 // Internal dependencies.
 import './photoessay-image';
 
@@ -36,6 +39,26 @@ const {
 	dispatch,
 	select,
 } = wp.data;
+const {
+	applyFilters,
+} = wp.hooks;
+
+/**
+ * Returns the class list for the block based on the current settings.
+ *
+ * @param {string} className  Classes assigned to the block.
+ */
+const getClasses = ( className ) => {
+	const blockClasses = classnames(
+		'wp-block-photoessay',
+		'js-block-editorial-photoessay',
+		{
+			[ className ]: className,
+		}
+	);
+
+	return applyFilters( 'buBlocks.photoessay.classNames', blockClasses );
+};
 
 // Register the block.
 registerBlockType( 'editorial/photoessay', {
@@ -44,6 +67,10 @@ registerBlockType( 'editorial/photoessay', {
 	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="#c00" d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z"></Path></SVG>,
 	category: 'bu-editorial',
 	attributes: {
+		className: {
+			type: 'string',
+			default: '',
+		},
 		layout: {
 			type: 'string',
 			default: '',
@@ -53,7 +80,7 @@ registerBlockType( 'editorial/photoessay', {
 		align: [ 'wide', 'full' ],
 	},
 
-	edit( { attributes, setAttributes, clientId } ) {
+	edit( { attributes, setAttributes, clientId, className } ) {
 		const { layout } = attributes;
 
 		/**
@@ -66,13 +93,13 @@ registerBlockType( 'editorial/photoessay', {
 			setAttributes( { layout: newLayout } );
 
 			// Get the image block classes from the information contained in the layout option.
-			const blockClasses = newLayout.split( '-' ).splice( 3 );
+			const childBlockClasses = newLayout.split( '-' ).splice( 3 );
 
 			// Get any existing image blocks.
 			const currentBlocks = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks;
 
 			// Update or insert new blocks accordingly.
-			blockClasses.forEach( ( blockClass, i ) => {
+			childBlockClasses.forEach( ( blockClass, i ) => {
 				const existingBlock = currentBlocks[ i ];
 				const newColumnClass = { columnClass: `photo-${blockClass}` };
 
@@ -89,7 +116,7 @@ registerBlockType( 'editorial/photoessay', {
 
 			// Remove excess blocks if the new layout has fewer images than the previous.
 			currentBlocks.forEach( ( block, i ) => {
-				if ( blockClasses[ i ] ) {
+				if ( childBlockClasses[ i ] ) {
 					return;
 				}
 
@@ -144,7 +171,8 @@ registerBlockType( 'editorial/photoessay', {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<div className="wp-block-editorial-photoessay">
+				<div className={ getClasses( className ) }>
+					{ applyFilters( 'buBlocks.photoessay.afterOpening', '' ) }
 					<div className={ layout }>
 						<InnerBlocks
 							templateLock="all"
@@ -152,19 +180,25 @@ registerBlockType( 'editorial/photoessay', {
 							templateInsertUpdatesSelection={ false }
 						/>
 					</div>
+					{ applyFilters( 'buBlocks.photoessay.beforeClosing', '' ) }
 				</div>
 			</Fragment>
 		);
 	},
 
 	save( { attributes } ) {
-		const { layout } = attributes;
+		const {
+			className,
+			layout,
+		} = attributes;
 
 		return(
-			<div className="wp-block-photoessay js-block-editorial-photoessay">
+			<div className={ getClasses( className ) }>
+				{ applyFilters( 'buBlocks.photoessay.afterOpeningOutput', '' ) }
 				<div className={ layout }>
 					<InnerBlocks.Content />
 				</div>
+				{ applyFilters( 'buBlocks.photoessay.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},

From 37bc8de96357b02aa9b471446df192118feea3b0 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 14:36:12 -0700
Subject: [PATCH 11/15] Add filters to the Pullquote block

---
 src/blocks/pullquote/pullquote.js | 33 ++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/blocks/pullquote/pullquote.js b/src/blocks/pullquote/pullquote.js
index 9b22d637..4c6a465a 100644
--- a/src/blocks/pullquote/pullquote.js
+++ b/src/blocks/pullquote/pullquote.js
@@ -37,10 +37,13 @@ const {
 	RichText,
 	withColors,
 } = wp.editor;
+const {
+	applyFilters,
+} = wp.hooks;
 
 // Returns true if the current block style is "Default".
 const isStyleDefault = ( className ) => {
-	return ( ! className.includes( 'is-style-modern' ) && ! className.includes( 'is-style-pop' ) );
+	return ( className && !className.includes( 'is-style-modern' ) && !className.includes( 'is-style-pop' ) );
 };
 
 /**
@@ -52,18 +55,16 @@ const isStyleDefault = ( className ) => {
  * @param {string} themeColor   Value of the "Theme Color" setting.
  */
 const getClasses = ( className, backgroundId, imageFocus, themeColor ) => {
-	const isStylePop = className.includes( 'is-style-pop' );
+	const isStylePop = className && className.includes( 'is-style-pop' );
 
-	return (
-		classnames(
-			className,
-			{
-				'has-image': ( backgroundId && ! isStylePop ),
-				[ `has-image-focus-${imageFocus}` ]: ( imageFocus && ! isStylePop ),
-				[ `has-${themeColor}-theme` ]: themeColor,
-			}
-		)
-	);
+	const blockClasses = classnames( {
+		[ className ]: className,
+		'has-image': ( backgroundId && ! isStylePop ),
+		[ `has-image-focus-${imageFocus}` ]: ( imageFocus && ! isStylePop ),
+		[ `has-${themeColor}-theme` ]: themeColor,
+	} );
+
+	return applyFilters( 'buBlocks.pullquote.classNames', blockClasses );
 }
 
 // Only allow images in the background component for this block.
@@ -185,6 +186,7 @@ registerBlockType( 'bu/pullquote', {
 					{ mediaPositioningControls() }
 				</InspectorControls>
 				<div className={ getClasses( className, backgroundId, imageFocus, themeColor.slug ) }>
+					{ applyFilters( 'buBlocks.pullquote.afterOpening', '' ) }
 					{ isStyleDefault( className ) && (
 						<Background
 							allowedMediaTypes={ allowedMedia }
@@ -228,6 +230,7 @@ registerBlockType( 'bu/pullquote', {
 							</div>
 						</div>
 					</blockquote>
+					{ applyFilters( 'buBlocks.pullquote.beforeClosing', '' ) }
 				</div>
 			</Fragment>
 		);
@@ -245,13 +248,14 @@ registerBlockType( 'bu/pullquote', {
 			cite,
 			imageFocus,
 			backgroundId,
-			className = '', // Assign default in case the unpacked value is `undefined`.
+			className,
 			themeColor,
 		} = attributes;
 
 		// Returns the block rendering for the front end.
 		return (
 			<div className={ getClasses( className, backgroundId, imageFocus, themeColor ) }>
+				{ applyFilters( 'buBlocks.pullquote.afterOpeningOutput', '' ) }
 				{ isStyleDefault( className ) && (
 					<figure>
 						<Background
@@ -263,7 +267,7 @@ registerBlockType( 'bu/pullquote', {
 					<div className="container-lockup">
 						<div className="container-icon-outer">
 							<div className="container-icon-inner">
-								{ className.includes( 'is-style-modern' ) && (
+								{ ( className && className.includes( 'is-style-modern' ) ) && (
 									<Background
 										blockProps={ props }
 									/>
@@ -286,6 +290,7 @@ registerBlockType( 'bu/pullquote', {
 						</div>
 					</div>
 				</blockquote>
+				{ applyFilters( 'buBlocks.pullquote.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},

From bfae5f3d15d9816f82792d6c7443351c4d389a66 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 14:45:10 -0700
Subject: [PATCH 12/15] Add filters to the Stats block

---
 src/blocks/stat/stats.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/blocks/stat/stats.js b/src/blocks/stat/stats.js
index e66ef2a6..20325f6a 100644
--- a/src/blocks/stat/stats.js
+++ b/src/blocks/stat/stats.js
@@ -37,6 +37,9 @@ const {
 	dispatch,
 	select,
 } = wp.data;
+const {
+	applyFilters,
+} = wp.hooks;
 
 /**
  * Returns the class list for the block based on the current settings.
@@ -45,14 +48,12 @@ const {
  * @param {number} stats     The number of stat blocks to display.
  */
 const getBlockClasses = ( className, stats ) => {
-	return (
-		classnames(
-			className,
-			{
-				[ `has-${stats}-stats` ]: stats,
-			}
-		)
-	);
+	const blockClasses = classnames( {
+		[ className ]: className,
+		[ `has-${stats}-stats` ]: stats,
+	} );
+
+	return applyFilters( 'buBlocks.stats.classNames', blockClasses );
 };
 
 // Register the block.
@@ -135,6 +136,7 @@ registerBlockType( 'bu/stats', {
 
 		return (
 			<div className={ getBlockClasses( className, stats ) }>
+				{ applyFilters( 'buBlocks.stats.afterOpening', '' ) }
 				<figure className="wp-block-bu-stats-figure">
 					<div className="wp-block-bu-stats-row">
 						<InnerBlocks
@@ -166,6 +168,7 @@ registerBlockType( 'bu/stats', {
 						keepPlaceholderOnFocus
 					/>
 				</figure>
+				{ applyFilters( 'buBlocks.stats.beforeClosing', '' ) }
 			</div>
 		);
 	},
@@ -179,6 +182,7 @@ registerBlockType( 'bu/stats', {
 
 		return (
 			<div className={ getBlockClasses( className, stats ) }>
+				{ applyFilters( 'buBlocks.stats.afterOpeningOutput', '' ) }
 				<figure className="wp-block-bu-stats-figure">
 					<div className="wp-block-bu-stats-row">
 						<InnerBlocks.Content />
@@ -189,6 +193,7 @@ registerBlockType( 'bu/stats', {
 						value={ caption }
 					/>
 				</figure>
+				{ applyFilters( 'buBlocks.stats.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},

From 30392601a9eae109ad4167ea161c3f7a59904e3b Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Tue, 27 Aug 2019 15:20:44 -0700
Subject: [PATCH 13/15] Add filters to the Leadin block

---
 src/blocks/leadin/index.php | 12 ++++++----
 src/blocks/leadin/leadin.js | 44 ++++++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/blocks/leadin/index.php b/src/blocks/leadin/index.php
index afcf77e5..54beb5fc 100644
--- a/src/blocks/leadin/index.php
+++ b/src/blocks/leadin/index.php
@@ -17,6 +17,8 @@
  * @param bool  $style_emphasize_text  Whether the emphasize text style is applied to the block.
  * @param bool  $style_text_over_image Whether the text over image style is applied to the block.
  * @param bool  $style_side_by_side    Whether the side by side style is applied to the block.
+ * @param bool  $style_image_to_text   Whether the Text over Horizontal Image style is applied.
+ * @param bool  $style_text_to_image   Whether the Horizontal Image over Text style is applied.
  *
  * @return string A space separated string of class names.
  */
@@ -46,11 +48,12 @@ function get_block_classes( $attributes, $style_emphasize_text, $style_text_over
 	// Turn classes array into a space delimited string before returning.
 	$classes = implode( ' ', $classes );
 
-	return $classes;
+	// Allow the class list to be filterable.
+	return apply_filters( 'bu_blocks_leadin_classnames', $classes );
 }
 
 /**
- * Renders the `core/latest-posts` block on server.
+ * Renders the `bu/leadin` block on server.
  *
  * @param array $attributes The block attributes.
  *
@@ -102,8 +105,8 @@ function render_block( $attributes ) {
 	ob_start();
 	?>
 	<div class="<?php echo esc_attr( $classes ); ?>">
+		<?php echo apply_filters( 'bu_blocks_leadin_after_opening', '' ); // WPCS: XSS ok. ?>
 		<div class="container-lockup">
-
 			<div class="wp-block-leadin-media">
 				<?php if ( $attributes['url'] && empty( $attributes['head'] ) ) : ?>
 					<a href="<?php echo esc_url( $attributes['url'] ); ?>">
@@ -120,7 +123,6 @@ function render_block( $attributes ) {
 				<p class="wp-block-editorial-leadin-caption wp-prepress-component-caption"><?php echo wp_kses_post( $attributes['caption'] ); ?></p>
 			<?php endif; ?>
 
-
 			<?php if ( $attributes['head'] || $attributes['deck'] ) : ?>
 
 				<div class="container-words-outer">
@@ -158,6 +160,8 @@ function render_block( $attributes ) {
 			<p class="wp-block-editorial-leadin-caption wp-prepress-component-caption"><?php echo wp_kses_post( $attributes['caption'] ); ?></p>
 		<?php endif; ?>
 
+		<?php echo apply_filters( 'bu_blocks_leadin_before_closing', '' ); // WPCS: XSS ok. ?>
+
 	</div>
 
 	<?php do_action( 'bu_blocks_leadin_meta_bar', $attributes['metabar'] ); ?>
diff --git a/src/blocks/leadin/leadin.js b/src/blocks/leadin/leadin.js
index 2eb40a1f..8b63c943 100644
--- a/src/blocks/leadin/leadin.js
+++ b/src/blocks/leadin/leadin.js
@@ -192,25 +192,27 @@ registerBlockType( 'bu/leadin', {
 		const isStyleImageToText = className.includes( 'is-style-image-to-text' );
 		const publication = publicationSlug();
 
-		const classes = classnames(
-			'wp-block-editorial-leadin',
-			{
-				[ `${publication}-block-editorial-leadin` ]: publication !== '',
-			},
-			className,
-			{
-				'has-box': box && ( isStyleEmphasisOnText || isStyleTextOverImage || isStyleSideBySide ),
-				'has-wider': wide && isStyleSideBySide,
-				'has-flip': flip && isStyleSideBySide,
-				'has-media': backgroundUrl,
-				'has-video-as-loop': backgroundAutoplay,
-				'has-video-uncropped': videoUncropped,
-				[ `has-media-focus-${imageFocus}` ]: imageFocus,
-				[ `has-text-position-${textPositionX}` ]: textPositionX && isStyleTextOverImage,
-				[ `has-text-position-${textPositionY}` ]: textPositionY && isStyleTextOverImage,
-				[ `has-${themeColor.slug}-theme` ]: themeColor.slug,
-			}
-		);
+		const getClasses = () => {
+			blockClasses = classnames(
+				'wp-block-editorial-leadin',
+				className,
+				{
+					[ `${publication}-block-editorial-leadin` ]: publication !== '',
+					'has-box': box && ( isStyleEmphasisOnText || isStyleTextOverImage || isStyleSideBySide ),
+					'has-wider': wide && isStyleSideBySide,
+					'has-flip': flip && isStyleSideBySide,
+					'has-media': backgroundUrl,
+					'has-video-as-loop': backgroundAutoplay,
+					'has-video-uncropped': videoUncropped,
+					[ `has-media-focus-${imageFocus}` ]: imageFocus,
+					[ `has-text-position-${textPositionX}` ]: textPositionX && isStyleTextOverImage,
+					[ `has-text-position-${textPositionY}` ]: textPositionY && isStyleTextOverImage,
+					[ `has-${themeColor.slug}-theme` ]: themeColor.slug,
+				}
+			);
+
+			return applyFilters( 'buBlocks.leadin.classNames', blockClasses );
+		};
 
 		const boxClasses = classnames(
 			'container-words-inner',
@@ -350,7 +352,8 @@ registerBlockType( 'bu/leadin', {
 		// Return the block editing interface.
 		return (
 			<Fragment>
-				<div className={ classes }>
+				<div className={ getClasses() }>
+					{ applyFilters( 'buBlocks.leadin.afterOpening', '' ) }
 					<div className="container-lockup">
 						<div className="wp-block-leadin-media">
 							<Background
@@ -393,6 +396,7 @@ registerBlockType( 'bu/leadin', {
 							keepPlaceholderOnFocus
 						/>
 					) }
+					{ applyFilters( 'buBlocks.leadin.beforeClosing', '' ) }
 				</div>
 
 				{ applyFilters( 'buBlocks.leadin.metaBar', '', metabar ) }

From 1a5071b252f92fb214de8d16c848eb231d40429e Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Wed, 28 Aug 2019 08:41:41 -0700
Subject: [PATCH 14/15] Add filters to the Related Stories block

---
 src/blocks/relatedstories/index.php         |  2 ++
 src/blocks/relatedstories/relatedstories.js | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/blocks/relatedstories/index.php b/src/blocks/relatedstories/index.php
index ceddb107..9f720784 100644
--- a/src/blocks/relatedstories/index.php
+++ b/src/blocks/relatedstories/index.php
@@ -192,6 +192,7 @@ function render_block( $attributes ) {
 	ob_start();
 	?>
 	<aside class="<?php echo esc_attr( $classes ); ?>">
+		<?php echo apply_filters( 'bu_blocks_related_stories_after_opening', '' ); // WPCS: XSS ok. ?>
 		<h3 class="wp-block-editorial-relatedstories-title"><?php esc_html_e( 'Related', 'bu-blocks' ); ?></h3>
 		<ul class="wp-block-editorial-relatedstories-list">
 			<?php
@@ -245,6 +246,7 @@ function render_block( $attributes ) {
 
 			?>
 		</ul>
+		<?php echo apply_filters( 'bu_blocks_related_stories_before_closing', '' ); // WPCS: XSS ok. ?>
 	</aside>
 	<?php
 	$html = ob_get_clean();
diff --git a/src/blocks/relatedstories/relatedstories.js b/src/blocks/relatedstories/relatedstories.js
index feb81482..15538d74 100644
--- a/src/blocks/relatedstories/relatedstories.js
+++ b/src/blocks/relatedstories/relatedstories.js
@@ -414,10 +414,14 @@ registerBlockType( 'editorial/relatedstories', {
 			cardCountClass = ' has-three';
 		}
 
-		const classes = classnames(
-			className,
-			cardCountClass,
-		);
+		const getClasses = () => {
+			const blockClasses = classnames(
+				className,
+				cardCountClass,
+			);
+
+			return applyFilters( 'buBlocks.relatedstories.classNames', blockClasses );
+		}
 
 		return (
 			<Fragment>
@@ -467,7 +471,8 @@ registerBlockType( 'editorial/relatedstories', {
 						/>
 					</BlockControls>
 				) }
-				<aside className={ classes }>
+				<aside className={ getClasses() }>
+					{ applyFilters( 'buBlocks.relatedStories.afterOpening', '' ) }
 					<h3 className="wp-block-editorial-relatedstories-title">Related</h3>
 					{ displayPosts && displayPosts.length > 0 ? (
 						<ul className="wp-block-editorial-relatedstories-list">
@@ -476,6 +481,7 @@ registerBlockType( 'editorial/relatedstories', {
 					) : (
 						<p class="wp-block-editorial-relatedstories-error">{ errorMessage ? errorMessage : 'Select related posts in this block\'s settings.' }</p>
 					) }
+					{ applyFilters( 'buBlocks.relatedStories.beforeClosing', '' ) }
 				</aside>
 			</Fragment>
 		);

From d4e6d4997e29a14c95a7b98e27807e6b8b9ac5e7 Mon Sep 17 00:00:00 2001
From: philcable <pbcable@bu.edu>
Date: Fri, 30 Aug 2019 09:46:27 -0700
Subject: [PATCH 15/15] Fix casing on filter names for some blocks

---
 src/blocks/introparagraph/introparagraph.js | 10 +++++-----
 src/blocks/photoessay/photoessay.js         | 10 +++++-----
 src/blocks/relatedstories/relatedstories.js |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/blocks/introparagraph/introparagraph.js b/src/blocks/introparagraph/introparagraph.js
index 57ccfd03..2ec9d242 100644
--- a/src/blocks/introparagraph/introparagraph.js
+++ b/src/blocks/introparagraph/introparagraph.js
@@ -90,7 +90,7 @@ const getClasses = ( className, hasDropCapStyle, dropCapColor, paragraphColor )
 		[`has-paragraph-color-${paragraphColor}`]: ! hasDropCapStyle && paragraphColor,
 	} );
 
-	return applyFilters( 'buBlocks.introparagraph.classNames', blockClasses );
+	return applyFilters( 'buBlocks.introParagraph.classNames', blockClasses );
 };
 
 // Register the block.
@@ -317,7 +317,7 @@ registerBlockType( 'editorial/introparagraph', {
 					{ hasDropCapStyle && isImageDropCap && renderDropCapImageSettings() }
 				</InspectorControls>
 				<div className={ getClasses( className, hasDropCapStyle, dropCapColor.slug, paragraphColor.slug ) }>
-					{ applyFilters( 'buBlocks.introparagraph.afterOpening', '' ) }
+					{ applyFilters( 'buBlocks.introParagraph.afterOpening', '' ) }
 					<PlainText
 						tagname='h4'
 						value={ heading }
@@ -356,7 +356,7 @@ registerBlockType( 'editorial/introparagraph', {
 							}
 						/>
 					</div>
-					{ applyFilters( 'buBlocks.introparagraph.beforeClosing', '' ) }
+					{ applyFilters( 'buBlocks.introParagraph.beforeClosing', '' ) }
 				</div>
 			</Fragment>
 		);
@@ -396,7 +396,7 @@ registerBlockType( 'editorial/introparagraph', {
 
 		return (
 			<div className={ getClasses( className, hasDropCapStyle, dropCapColor, paragraphColor ) }>
-				{ applyFilters( 'buBlocks.introparagraph.afterOpeningOutput', '' ) }
+				{ applyFilters( 'buBlocks.introParagraph.afterOpeningOutput', '' ) }
 				{ ! RichText.isEmpty( heading ) && (
 					<RichText.Content tagName="h4" value={ heading } />
 				) }
@@ -417,7 +417,7 @@ registerBlockType( 'editorial/introparagraph', {
 						/>
 					</div>
 				) }
-				{ applyFilters( 'buBlocks.introparagraph.beforeClosingOutput', '' ) }
+				{ applyFilters( 'buBlocks.introParagraph.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},
diff --git a/src/blocks/photoessay/photoessay.js b/src/blocks/photoessay/photoessay.js
index cbf7445c..9d691b3c 100644
--- a/src/blocks/photoessay/photoessay.js
+++ b/src/blocks/photoessay/photoessay.js
@@ -56,7 +56,7 @@ const getClasses = ( className ) => {
 		}
 	);
 
-	return applyFilters( 'buBlocks.photoessay.classNames', blockClasses );
+	return applyFilters( 'buBlocks.photoEssay.classNames', blockClasses );
 };
 
 // Populate selectors that were in core/editor until WordPress 5.2 and are
@@ -195,7 +195,7 @@ registerBlockType( 'editorial/photoessay', {
 					</PanelBody>
 				</InspectorControls>
 				<div className={ getClasses( className ) }>
-					{ applyFilters( 'buBlocks.photoessay.afterOpening', '' ) }
+					{ applyFilters( 'buBlocks.photoEssay.afterOpening', '' ) }
 					<div className={ layout }>
 						<InnerBlocks
 							template={ photoTemplate }
@@ -204,7 +204,7 @@ registerBlockType( 'editorial/photoessay', {
 							templateInsertUpdatesSelection={ false }
 						/>
 					</div>
-					{ applyFilters( 'buBlocks.photoessay.beforeClosing', '' ) }
+					{ applyFilters( 'buBlocks.photoEssay.beforeClosing', '' ) }
 				</div>
 			</Fragment>
 		);
@@ -218,11 +218,11 @@ registerBlockType( 'editorial/photoessay', {
 
 		return(
 			<div className={ getClasses( className ) }>
-				{ applyFilters( 'buBlocks.photoessay.afterOpeningOutput', '' ) }
+				{ applyFilters( 'buBlocks.photoEssay.afterOpeningOutput', '' ) }
 				<div className={ layout }>
 					<InnerBlocks.Content />
 				</div>
-				{ applyFilters( 'buBlocks.photoessay.beforeClosingOutput', '' ) }
+				{ applyFilters( 'buBlocks.photoEssay.beforeClosingOutput', '' ) }
 			</div>
 		);
 	},
diff --git a/src/blocks/relatedstories/relatedstories.js b/src/blocks/relatedstories/relatedstories.js
index 23686e69..36e7a097 100644
--- a/src/blocks/relatedstories/relatedstories.js
+++ b/src/blocks/relatedstories/relatedstories.js
@@ -415,7 +415,7 @@ registerBlockType( 'editorial/relatedstories', {
 				cardCountClass,
 			);
 
-			return applyFilters( 'buBlocks.relatedstories.classNames', blockClasses );
+			return applyFilters( 'buBlocks.relatedStories.classNames', blockClasses );
 		}
 
 		return (