├── .distignore
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .phpcs.xml.dist
├── README.md
├── assets
    ├── editor.css
    └── frontend.css
├── intro-to-block-filters.php
├── package-lock.json
├── package.json
└── src
    ├── filters
        ├── button-size.js
        └── cover-alignment.js
    └── index.js


/.distignore:
--------------------------------------------------------------------------------
 1 | # A set of files you probably don't want in your WordPress.org distribution
 2 | .babelrc
 3 | .deployignore
 4 | .distignore
 5 | .editorconfig
 6 | .eslintignore
 7 | .eslintrc
 8 | .git
 9 | .gitignore
10 | .gitlab-ci.yml
11 | .travis.yml
12 | .DS_Store
13 | Thumbs.db
14 | behat.yml
15 | bitbucket-pipelines.yml
16 | bin
17 | .circleci/config.yml
18 | composer.json
19 | composer.lock
20 | dependencies.yml
21 | Gruntfile.js
22 | package.json
23 | package-lock.json
24 | phpunit.xml
25 | phpunit.xml.dist
26 | multisite.xml
27 | multisite.xml.dist
28 | .phpcs.xml
29 | phpcs.xml
30 | .phpcs.xml.dist
31 | phpcs.xml.dist
32 | README.md
33 | webpack.config.js
34 | wp-cli.local.yml
35 | yarn.lock
36 | tests
37 | vendor
38 | node_modules
39 | *.sql
40 | *.tar.gz
41 | *.zip
42 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | # WordPress Coding Standards
 5 | # https://make.wordpress.org/core/handbook/coding-standards/
 6 | 
 7 | root = true
 8 | 
 9 | [*]
10 | charset = utf-8
11 | end_of_line = lf
12 | insert_final_newline = true
13 | trim_trailing_whitespace = true
14 | indent_style = tab
15 | indent_size = 4
16 | 
17 | [{.jshintrc,*.json,*.yml}]
18 | indent_style = space
19 | indent_size = 2
20 | 
21 | [{*.txt,wp-config-sample.php}]
22 | end_of_line = crlf
23 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@10up/eslint-config/wordpress",
 3 |   "rules": {},
 4 |   "globals": {
 5 |     "module": true,
 6 |     "process": true,
 7 |     "_": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | phpcs.xml
 3 | phpunit.xml
 4 | Thumbs.db
 5 | wp-cli.local.yml
 6 | node_modules/
 7 | *.sql
 8 | *.tar.gz
 9 | *.zip
10 | build
11 | 


--------------------------------------------------------------------------------
/.phpcs.xml.dist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <ruleset name="WordPress Coding Standards based custom ruleset for your plugin">
 3 | 	<description>Generally-applicable sniffs for WordPress plugins.</description>
 4 | 
 5 | 	<!-- What to scan -->
 6 | 	<file>.</file>
 7 | 	<exclude-pattern>/vendor/</exclude-pattern>
 8 | 	<exclude-pattern>/node_modules/</exclude-pattern>
 9 | 
10 | 	<!-- How to scan -->
11 | 	<!-- Usage instructions: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Usage -->
12 | 	<!-- Annotated ruleset: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml -->
13 | 	<arg value="sp"/> <!-- Show sniff and progress -->
14 | 	<arg name="basepath" value="./"/><!-- Strip the file paths down to the relevant bit -->
15 | 	<arg name="colors"/>
16 | 	<arg name="extensions" value="php"/>
17 | 	<arg name="parallel" value="8"/><!-- Enables parallel processing when available for faster results. -->
18 | 
19 | 	<!-- Rules: Check PHP version compatibility -->
20 | 	<!-- https://github.com/PHPCompatibility/PHPCompatibility#sniffing-your-code-for-compatibility-with-specific-php-versions -->
21 | 	<config name="testVersion" value="5.3-"/>
22 | 	<!-- https://github.com/PHPCompatibility/PHPCompatibilityWP -->
23 | 	<rule ref="PHPCompatibilityWP"/>
24 | 
25 | 	<!-- Rules: WordPress Coding Standards -->
26 | 	<!-- https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards -->
27 | 	<!-- https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki/Customizable-sniff-properties -->
28 | 	<config name="minimum_supported_wp_version" value="4.6"/>
29 | 	<rule ref="WordPress">
30 | 		<exclude name="WordPress.VIP"/>
31 | 	</rule>
32 | 	<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
33 | 		<properties>
34 | 			<!-- Value: replace the function, class, and variable prefixes used. Separate multiple prefixes with a comma. -->
35 | 			<property name="prefixes" type="array" value="my-plugin"/>
36 | 		</properties>
37 | 	</rule>
38 | 	<rule ref="WordPress.WP.I18n">
39 | 		<properties>
40 | 			<!-- Value: replace the text domain used. -->
41 | 			<property name="text_domain" type="array" value="my-plugin"/>
42 | 		</properties>
43 | 	</rule>
44 | 	<rule ref="WordPress.WhiteSpace.ControlStructureSpacing">
45 | 		<properties>
46 | 			<property name="blank_line_check" value="true"/>
47 | 		</properties>
48 | 	</rule>
49 | </ruleset>
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Intro to Block Filters
 2 | A demo WordPress plugin to demo WordPress block filters. It does two things:
 3 | - Removes all alignment options from Cover block except 'full' alignment
 4 | - Adds size selector to core button block
 5 | 
 6 | ## Installation
 7 | - Pull the plugin repo to `wp-content/plugins` folder of your WordPress site
 8 | - Navigate to plugin folder in command line and run `npm install && npm run build`
 9 | - In WordPress dashboard go to _Plugins_ and click _Activate_ under _Intro to Block Filters_
10 | 


--------------------------------------------------------------------------------
/assets/editor.css:
--------------------------------------------------------------------------------
1 | .wp-block-button.has-size-large .wp-block-button__link {
2 | 	padding: 25px 45px;
3 | }
4 | 
5 | .wp-block-button.has-size-small .wp-block-button__link {
6 | 	padding: 5px 15px;
7 | }
8 | 


--------------------------------------------------------------------------------
/assets/frontend.css:
--------------------------------------------------------------------------------
1 | .wp-block-button.has-size-large .wp-block-button__link {
2 | 	padding: 25px 45px;
3 | }
4 | 
5 | .wp-block-button.has-size-small .wp-block-button__link {
6 | 	padding: 5px 15px;
7 | }
8 | 


--------------------------------------------------------------------------------
/intro-to-block-filters.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Plugin Name: Intro To Block Filters
 4 |  * Description: Demo plugin for CSS-tricks article about WordPress block filters
 5 |  * Author:      Dmitry Mayorov
 6 |  * Author URI:  https://dmtrmrv.com
 7 |  * Version:     0.1.0
 8 |  *
 9 |  * @package     IntroToBlockFilters
10 |  */
11 | 
12 | namespace IntroToBlockFilters;
13 | 
14 | // Exit if accessed directly.
15 | if ( ! defined( 'ABSPATH' ) ) {
16 | 	exit;
17 | };
18 | 
19 | function frontend_assets() {
20 | 
21 | 	wp_enqueue_style(
22 | 		'intro-to-block-filters-frontend-style',
23 | 		plugin_dir_url( __FILE__ ) . 'assets/frontend.css',
24 | 		[],
25 | 		'0.1.0'
26 | 	);
27 | }
28 | add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\frontend_assets' );
29 | 
30 | function editor_assets() {
31 | 	wp_enqueue_script(
32 | 		'intro-to-block-filters-editor-script',
33 | 		plugin_dir_url( __FILE__ ) . 'build/index.js',
34 | 		[ 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ],
35 | 		'0.1.0'
36 | 	);
37 | 
38 | 	wp_enqueue_style(
39 | 		'intro-to-block-filters-editor-style',
40 | 		plugin_dir_url( __FILE__ ) . 'assets/editor.css',
41 | 		[],
42 | 		'0.1.0'
43 | 	);
44 | }
45 | add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\editor_assets' );
46 | 
47 | /**
48 |  * Add button size class.
49 |  *
50 |  * A PHP approach of filtering block markup.
51 |  *
52 |  * @param  string $block_content Block content to be rendered.
53 |  * @param  array  $block         Block attributes.
54 |  * @return string
55 |  */
56 | function add_button_size_class( $block_content = '', $block = [] ) {
57 | 
58 | 	if ( isset( $block['blockName'] ) && 'core/button' === $block['blockName'] ) {
59 | 		$defaults = [
60 | 			'size' => 'regular'
61 | 		];
62 | 
63 | 		$args = wp_parse_args( $block['attrs'], $defaults );
64 | 
65 | 		$html = str_replace(
66 | 			'<div class="wp-block-button',
67 | 			'<div class="wp-block-button has-size-' . esc_attr( $args['size']) . ' ',
68 | 			$block_content
69 | 		);
70 | 
71 | 		return $html;
72 | 	}
73 | 
74 | 	return $block_content;
75 | }
76 | 
77 | // Uncomment the following line to test this approach. Also don't forget to
78 | // comment out the blocks.getSaveContent.extraProps filter in button-size.js
79 | // add_filter( 'render_block', __NAMESPACE__ . '\add_button_size_class', 10, 2 );
80 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "intro-to-block-filters",
 3 |   "version": "0.1.0",
 4 |   "author": "YOUR NAME HERE",
 5 |   "scripts": {
 6 |     "build": "wp-scripts build",
 7 |     "format:js": "wp-scripts format-js",
 8 |     "lint:css": "wp-scripts lint-style",
 9 |     "lint:js": "wp-scripts lint-js",
10 |     "lint:md:docs": "wp-scripts lint-md-docs",
11 |     "lint:md:js": "wp-scripts lint-md-js",
12 |     "lint:pkg-json": "wp-scripts lint-pkg-json",
13 |     "packages-update": "wp-scripts packages-update",
14 |     "start": "wp-scripts start"
15 |   },
16 |   "devDependencies": {
17 |     "@10up/eslint-config": "^2.2.0",
18 |     "@wordpress/scripts": "^13.0.2",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^7.19.0",
21 |     "eslint-config-airbnb": "^18.2.1",
22 |     "eslint-config-airbnb-base": "^14.2.1",
23 |     "eslint-config-prettier": "^7.2.0",
24 |     "eslint-plugin-import": "^2.22.1",
25 |     "eslint-plugin-jsdoc": "^22.2.0",
26 |     "eslint-plugin-jsx-a11y": "^6.4.1",
27 |     "eslint-plugin-prettier": "^3.3.1",
28 |     "eslint-plugin-react": "^7.22.0",
29 |     "eslint-plugin-react-hooks": "^1.7.0",
30 |     "prettier": "^2.2.1"
31 |   },
32 |   "dependencies": {
33 |     "classnames": "^2.2.6"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/filters/button-size.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/jsx-props-no-spreading, react/prop-types */
  2 | import classnames from 'classnames';
  3 | 
  4 | const { assign, merge } = lodash;
  5 | 
  6 | const { __ } = wp.i18n;
  7 | const { addFilter } = wp.hooks;
  8 | const { createHigherOrderComponent } = wp.compose;
  9 | const { Fragment } = wp.element;
 10 | const { InspectorControls } = wp.blockEditor;
 11 | const { PanelBody, SelectControl } = wp.components;
 12 | 
 13 | /**
 14 |  * Add Size attribute to Button block
 15 |  *
 16 |  * @param  {Object} settings Original block settings
 17 |  * @param  {string} name     Block name
 18 |  * @return {Object}          Filtered block settings
 19 |  */
 20 | function addAttributes(settings, name) {
 21 | 	if (name === 'core/button') {
 22 | 		return assign({}, settings, {
 23 | 			attributes: merge(settings.attributes, {
 24 | 				size: {
 25 | 					type: 'string',
 26 | 					default: '',
 27 | 				},
 28 | 			}),
 29 | 		});
 30 | 	}
 31 | 	return settings;
 32 | }
 33 | 
 34 | addFilter(
 35 | 	'blocks.registerBlockType',
 36 | 	'intro-to-filters/button-block/add-attributes',
 37 | 	addAttributes,
 38 | );
 39 | 
 40 | /**
 41 |  * Add Size control to Button block
 42 |  */
 43 | const addInspectorControl = createHigherOrderComponent((BlockEdit) => {
 44 | 	return (props) => {
 45 | 		const {
 46 | 			attributes: { size },
 47 | 			setAttributes,
 48 | 			name,
 49 | 		} = props;
 50 | 
 51 | 		if (name !== 'core/button') {
 52 | 			return <BlockEdit {...props} />;
 53 | 		}
 54 | 
 55 | 		return (
 56 | 			<Fragment>
 57 | 				<BlockEdit {...props} />
 58 | 				<InspectorControls>
 59 | 					<PanelBody title={__('Size settings', 'intro-to-filters')} initialOpen={false}>
 60 | 						<SelectControl
 61 | 							label={__('Size', 'intro-to-filters')}
 62 | 							value={size}
 63 | 							options={[
 64 | 								{
 65 | 									label: __('Regular', 'intro-to-filters'),
 66 | 									value: 'regular',
 67 | 								},
 68 | 								{
 69 | 									label: __('Small', 'intro-to-filters'),
 70 | 									value: 'small',
 71 | 								},
 72 | 								{
 73 | 									label: __('Large', 'intro-to-filters'),
 74 | 									value: 'large',
 75 | 								},
 76 | 							]}
 77 | 							onChange={(value) => {
 78 | 								setAttributes({ size: value });
 79 | 							}}
 80 | 						/>
 81 | 					</PanelBody>
 82 | 				</InspectorControls>
 83 | 			</Fragment>
 84 | 		);
 85 | 	};
 86 | }, 'withInspectorControl');
 87 | 
 88 | addFilter(
 89 | 	'editor.BlockEdit',
 90 | 	'intro-to-filters/button-block/add-inspector-controls',
 91 | 	addInspectorControl,
 92 | );
 93 | 
 94 | /**
 95 |  * Add size class to the block in the editor
 96 |  */
 97 | const addSizeClassEditor = createHigherOrderComponent((BlockListBlock) => {
 98 | 	return (props) => {
 99 | 		const {
100 | 			attributes: { size },
101 | 			className,
102 | 			name,
103 | 		} = props;
104 | 
105 | 		if (name !== 'core/button') {
106 | 			return <BlockListBlock {...props} />;
107 | 		}
108 | 
109 | 		return (
110 | 			<BlockListBlock
111 | 				{...props}
112 | 				className={classnames(className, size ? `has-size-${size}` : '')}
113 | 			/>
114 | 		);
115 | 	};
116 | }, 'withClientIdClassName');
117 | 
118 | addFilter(
119 | 	'editor.BlockListBlock',
120 | 	'intro-to-filters/button-block/add-editor-class',
121 | 	addSizeClassEditor,
122 | );
123 | 
124 | /**
125 |  * Add size class to the block on the front end
126 |  *
127 |  * @param  {Object} props      Additional props applied to save element.
128 |  * @param  {Object} block      Block type.
129 |  * @param  {Object} attributes Current block attributes.
130 |  * @return {Object}            Filtered props applied to save element.
131 |  */
132 | function addSizeClassFrontEnd(props, block, attributes) {
133 | 	if (block.name !== 'core/button') {
134 | 		return props;
135 | 	}
136 | 
137 | 	const { className } = props;
138 | 	const { size } = attributes;
139 | 
140 | 	return assign({}, props, {
141 | 		className: classnames(className, size ? `has-size-${size}` : ''),
142 | 	});
143 | }
144 | 
145 | // Comment out to test the PHP approach defined in intro-to-block-filters.php
146 | addFilter(
147 | 	'blocks.getSaveContent.extraProps',
148 | 	'intro-to-filters/button-block/add-front-end-class',
149 | 	addSizeClassFrontEnd,
150 | );
151 | 


--------------------------------------------------------------------------------
/src/filters/cover-alignment.js:
--------------------------------------------------------------------------------
 1 | const { addFilter } = wp.hooks;
 2 | const { assign, merge } = lodash;
 3 | 
 4 | function filterCoverBlockAlignments(settings, name) {
 5 | 	if (name === 'core/cover') {
 6 | 		return assign({}, settings, {
 7 | 			supports: merge(settings.supports, {
 8 | 				align: ['full'],
 9 | 			}),
10 | 		});
11 | 	}
12 | 	return settings;
13 | }
14 | 
15 | addFilter(
16 | 	'blocks.registerBlockType',
17 | 	'intro-to-filters/cover-block/alignment-settings',
18 | 	filterCoverBlockAlignments,
19 | );
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './filters/button-size';
2 | import './filters/cover-alignment';
3 | 


--------------------------------------------------------------------------------