├── .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 | --------------------------------------------------------------------------------