├── .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 |
2 |
3 | Generally-applicable sniffs for WordPress plugins.
4 |
5 |
6 | .
7 | /vendor/
8 | /node_modules/
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
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 | 'regular'
61 | ];
62 |
63 | $args = wp_parse_args( $block['attrs'], $defaults );
64 |
65 | $html = str_replace(
66 | '
{
44 | return (props) => {
45 | const {
46 | attributes: { size },
47 | setAttributes,
48 | name,
49 | } = props;
50 |
51 | if (name !== 'core/button') {
52 | return
;
53 | }
54 |
55 | return (
56 |
57 |
58 |
59 |
60 | {
78 | setAttributes({ size: value });
79 | }}
80 | />
81 |
82 |
83 |
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
;
107 | }
108 |
109 | return (
110 |
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 |
--------------------------------------------------------------------------------