PHPackages bmd/button-block-enhancements - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. bmd/button-block-enhancements ActiveLibrary[Utility & Helpers](/categories/utility) bmd/button-block-enhancements ============================= Enable hover/focus colors and icon support to the core/button block v1.2.2(1mo ago)039GPL-2.0-or-laterJavaScriptCI passing Since May 18Pushed 1mo agoCompare [ Source](https://github.com/bob-moore/Button-Block-Enhancements)[ Packagist](https://packagist.org/packages/bmd/button-block-enhancements)[ RSS](/packages/bmd-button-block-enhancements/feed)WikiDiscussions main Synced 1w ago READMEChangelog (5)Dependencies (11)Versions (6)Used By (0) Button Block Enhancements ========================= [](#button-block-enhancements) [![Button Block Enhancements](assets/banner-large.webp)](assets/banner-large.webp) [![WordPress](https://camo.githubusercontent.com/37248c7b4f293acfd4db49b12db9762dc0dc5fc99b9754d4f7d9d9a648c01018/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f576f726450726573732d362e392532422d3338353865393f6c6f676f3d776f72647072657373266c6f676f436f6c6f723d666666)](https://wordpress.org/)[![PHP](https://camo.githubusercontent.com/8da406bc1dd3dcb38541095055eef712a822936eee12a6c185a71f6e678091b2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d3737376262343f6c6f676f3d706870266c6f676f436f6c6f723d666666)](https://www.php.net/)[![Latest Release](https://camo.githubusercontent.com/56c050f5a5bd903a089beb5ba5ea59b3f8e606d414012c3cd18d713339d9b4ea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f626f622d6d6f6f72652f627574746f6e2d626c6f636b2d656e68616e63656d656e74733f6c6162656c3d72656c65617365)](https://github.com/bob-moore/button-block-enhancements/releases/latest)[![License](https://camo.githubusercontent.com/cd781d0568c328bdea35f284d33e2b1e96675ef60910926c1dd75d5a4d46de66/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d47504c2d2d322e302d2d6f722d2d6c617465722d626c7565)](https://www.gnu.org/licenses/gpl-2.0.html) [![Lint PHP](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpcs.yml/badge.svg)](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpcs.yml)[![PHPStan](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpstan.yml/badge.svg)](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpstan.yml)[![PHPUnit](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpunit.yml/badge.svg)](https://github.com/bob-moore/button-block-enhancements/actions/workflows/phpunit.yml)[![CSS Lint](https://github.com/bob-moore/button-block-enhancements/actions/workflows/lint-css.yml/badge.svg)](https://github.com/bob-moore/button-block-enhancements/actions/workflows/lint-css.yml)[![JS Lint](https://github.com/bob-moore/button-block-enhancements/actions/workflows/lint-js.yml/badge.svg)](https://github.com/bob-moore/button-block-enhancements/actions/workflows/lint-js.yml) Want to give it a test drive? Try it in the WP Playground: [![Try it in the WordPress Playground](https://camo.githubusercontent.com/89b4499ebc6cdf5342113a24d7ede365c541051542dc41b3bf6156e2f2c8efa9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f57505f506c617967726f756e642d76312e312e312d626c75653f6c6f676f3d776f72647072657373266c6f676f436f6c6f723d253233666666266c6162656c436f6c6f723d25323333383538653926636f6c6f723d253233333835386539)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/bob-moore/button-block-enhancements/main/_playground/blueprint-github.json) Add icons and hover/focus colors to the WordPress Button block (`core/button`) in both the editor and frontend. Features -------- [](#features) ### Icons [](#icons) - Adds icon controls to `core/button` in the block inspector. - Supports icon libraries: - WordPress icons - MUI icons - MUI variant families, including Outlined, Rounded, and Sharp - Custom SVG input - Lets you set icon position (left/right). - Lets you set icon size per button using CSS units (for example `1em`, `20px`, `1.25rem`). - Renders sanitized inline SVG on the frontend. - Clicking the currently selected icon removes it. ### Hover/Focus Colors [](#hoverfocus-colors) - Adds text and background color controls for hover/focus states to `core/button` in the block inspector's Color panel. - Colors apply to `:hover`, `:focus`, and `:focus-visible` states on the frontend. - Supports alpha channel, is clearable, and integrates with "Reset All". - Previews live in the editor. - Outputs CSS custom properties (`--bmd-button-focus-color`, `--bmd-button-focus-background-color`) on the button wrapper so themes can override or extend behavior. ### Architecture [](#architecture) - Boots through `Main`, which builds a small PHP-DI container, then resolves `Controller` to mount all WordPress hooks. - Splits responsibilities into focused providers (`Assets`, `Icons`), transformers (`Colors`, `Icons`), and resolver services for file paths and URLs. - Scopes bundled runtime dependencies in release zips to avoid conflicts with other plugins. - Ships release zips with a compiled container cache, while Composer installs exclude `cache/` so host projects can decide whether to compile their own container. - Can be embedded in other plugins or themes via Composer. Requirements ------------ [](#requirements) - WordPress 6.9+ - PHP 8.2+ Installation ------------ [](#installation) ### Install as a plugin [](#install-as-a-plugin) 1. Download the latest release zip from GitHub releases. 2. In WordPress admin, go to Plugins -> Add New Plugin -> Upload Plugin. 3. Upload the zip and activate Button Block Enhancements. ### Install via Composer (library usage) [](#install-via-composer-library-usage) If you are embedding this into your own project: ``` composer require bmd/button-block-enhancements ``` Then bootstrap from your plugin or theme: ``` use Bmd\ButtonBlockEnhancements\Main; $dependency_url = plugin_dir_url( __FILE__ ) . 'vendor/bmd/button-block-enhancements/'; $dependency_path = plugin_dir_path( __FILE__ ) . 'vendor/bmd/button-block-enhancements/'; $plugin = new Main( [ 'package' => 'your_plugin_slug', 'path' => $dependency_path, 'url' => $dependency_url, ] ); $plugin->mount(); ``` The `path` and `url` values must point to the Button Block Enhancements dependency root, not the file where you call it. The `package` value is used for extension filters/actions so the package can inherit your parent plugin namespace when embedded. The package's own script and style handles remain fixed as `button-block-enhancements-*` to avoid collisions with the parent plugin's handles. You may omit `path` and `url` when WordPress can resolve the dependency location automatically, but passing them explicitly is safest for Composer-embedded plugins and themes. Container compilation is only enabled automatically when `environment` is `production` and a writable package cache is available. Usage ----- [](#usage) ### Using Icons [](#using-icons) 1. Add a Button block. 2. Open the block sidebar. 3. Open the **Icon** panel. 4. Choose an icon library (WordPress, MUI, MUI Outlined/Rounded/Sharp, or Custom SVG). 5. Pick an icon. Click it again to remove it. 6. Open the **Icon Styles** panel to set icon size and position (left/right). 7. Save and view the post. ### Using Hover/Focus Colors [](#using-hoverfocus-colors) 1. Add a Button block. 2. Open the block sidebar. 3. Open the **Color** panel. 4. Use the **Text: Focus** and **Background: Focus** controls to pick hover/focus colors. 5. Save and view the post. CSS Custom Properties --------------------- [](#css-custom-properties) The following CSS custom properties are available for theming: PropertyDefaultDescription`--bmd-button-icon-size``1em`Icon width and height`--bmd-button-icon-gap``0.75em`Gap between icon and button text`--bmd-button-focus-color`—Text color on hover/focus (set per-block)`--bmd-button-focus-background-color`—Background color on hover/focus (set per-block)Custom Icon Families -------------------- [](#custom-icon-families) Developers can register additional static JSON icon families with the `button_block_enhancements_icon_families` filter. Each JSON file should contain an array of picker-compatible icon objects with `name`, `label`, and `source` properties. ``` add_filter( 'button_block_enhancements_icon_families', function ( $families ) { $families['brand-icons'] = array( 'label' => 'Brand Icons', 'url' => plugin_dir_url( __FILE__ ) . 'icons/brand-icons.json', ); return $families; } ); ``` Changelog --------- [](#changelog) ### 1.2.1 [](#121) - Fixed a malformed package URL generated by `Utilities` in embedded contexts. - Fixed style and script handle collisions when the package is included via Composer by hardcoding package-owned asset handles. - Updated Composer usage documentation to bootstrap through `Main` with array config. - Renamed render/content mutation classes from `Processors` to `Transformers`. - Moved PHPCS, PHPStan, and PHPUnit config to root-level files and added a combined Composer `test` script. - Added CSS and JavaScript lint GitHub workflows. - Committed npm lockfile policy and optional dependency config so CI installs include platform-optional packages such as `fsevents`. - Cleaned Composer export rules for root declaration files and removed the misspelled `declerations.d.ts`. ### 1.1.1 [](#111) - Documented the controller/provider/transformer architecture used by the current plugin bootstrap. - Standardized all release metadata and package versions on 1.1.1. ### 1.1.0 [](#110) - Rebuilt the plugin around a focused PHP-DI controller and provider/transformer services. - Scoped release dependencies to reduce conflicts with other plugins. - Split editor-only styles from block styles registered against `core/button`. - Added optional compiled container cache handling for release builds. - Removed the legacy framework/updater architecture. - Migrated button icon functionality from [Enable Button Icons](https://github.com/bob-moore/enable-button-icons). - Added hover/focus color controls and CSS custom properties for icon gap, icon size, and focus colors. ### Health Score 36 — LowBetter than 79% of packages Maintenance89 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~3 days Total 5 Last Release 53d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/adf6af151397e0b108508ed9a8554fa09dc00f90864873446e76fa5b17463e23?d=identicon)[bobjutsu](/maintainers/bobjutsu) --- Top Contributors [![bob-moore](https://avatars.githubusercontent.com/u/1745619?v=4)](https://github.com/bob-moore "bob-moore (16 commits)") ### Code Quality TestsPHPUnit Static AnalysisPHPStan Code StylePHP\_CodeSniffer Type Coverage Yes ### Embed Badge ![Health badge](/badges/bmd-button-block-enhancements/health.svg) ``` [![Health](https://phpackages.com/badges/bmd-button-block-enhancements/health.svg)](https://phpackages.com/packages/bmd-button-block-enhancements) ``` ### Alternatives [matomo/matomo Matomo is the leading Free/Libre open analytics platform 21.7k38.9k](/packages/matomo-matomo)[moodle/moodle Moodle - the world's open source learning platform 7.2k88.5k114](/packages/moodle-moodle)[azuracast/azuracast The AzuraCast self-hosted web radio station management suite. 3.9k27.8k](/packages/azuracast-azuracast)[phlak/directory-lister PHP directory lister 2.5k1.4k](/packages/phlak-directory-lister)[infinum/eightshift-libs WordPress libs developed by Eightshift team to use in modern WordPress. 63125.5k3](/packages/infinum-eightshift-libs)[drupal-code-builder/drupal-code-builder Code generator for Drupal 27253.3k1](/packages/drupal-code-builder-drupal-code-builder) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)