PHPackages                             humanmade/hm-color-palette - 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. humanmade/hm-color-palette

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

humanmade/hm-color-palette
==========================

Adds color palette meta data functionality for posts and pages

v1.0.0(2mo ago)11.2k[2 PRs](https://github.com/humanmade/hm-color-palette/pulls)GPL-2.0-or-laterJavaScriptPHP >=8.2CI passing

Since Apr 8Pushed 1mo agoCompare

[ Source](https://github.com/humanmade/hm-color-palette)[ Packagist](https://packagist.org/packages/humanmade/hm-color-palette)[ RSS](/packages/humanmade-hm-color-palette/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (1)Dependencies (1)Versions (6)Used By (0)

HM Color Palette
================

[](#hm-color-palette)

A WordPress plugin that adds customizable color palette meta data or block attribute functionality for posts and pages.

Description
-----------

[](#description)

This plugin allows you to assign color palettes to individual posts and pages, which can then be used to style your content dynamically. It provides:

- Post meta for storing color palette selection
- React component for the block editor sidebar
- Support for using the component in blocks with block attributes
- Body class based on selected palette color
- Developer-friendly customization via a filter that can be used in theme files

Features
--------

[](#features)

- **Easy Integration**: Works with any theme or block
- **Customizable Palettes**: Define your own color schemes via code or theme.json color palette
- **Block Editor Component**: Ready-to-use React component with `@humanmade/block-editor-components`
- **Body Classes**: Adds palette-specific classes for additional styling
- **Document & Block Level**: Can be used for entire documents or individual blocks

Installation
------------

[](#installation)

### For Development

[](#for-development)

1. Clone or download to `/wp-content/plugins/hm-color-palette/`
2. Run `npm install && npm run build`
3. Activate the plugin in WordPress

### For Production

[](#for-production)

1. Download from the release
2. Upload to `/wp-content/plugins/hm-color-palette/`
3. Activate the plugin in WordPress

Managing Color Palettes
-----------------------

[](#managing-color-palettes)

This plugin uses the theme color palette defined in the active theme's theme.json by default. Developers can also customize the palette programmatically using the `hm_color_palette_options` filter:

```
add_filter( 'hm_color_palette_options', function( $palette ) {
  // Add a new color.
  $palette[] = [
    'color' => '#000000',
    'name'  => 'Black',
    'slug'  => 'black'
  ];

  // Remove a color without removing from theme.json.
  $item_to_remove = array_find_key( $palette, function ( $value ) {
    return $value['slug'] === 'white';
  } );
  unset( $palette[$item_to_remove] );
  $palette = array_values($palette);

  return $palette;
} );
```

### Palette Structure

[](#palette-structure)

Each palette must be structured like the theme.json color object:

```
[
  {
    "color": "#000000",
    "name": "Black",
    "slug": "black"
  },
]
```

Usage
-----

[](#usage)

### Document-Level Color Palette (Post/Page Meta)

[](#document-level-color-palette-postpage-meta)

A block editor sidebar panel is included with this plugin to set the color at the page/post level. Using the color palette from the included block editor sidebar panel will save the color to post meta and add a class to the page/post body element on the frontend.

### Using In Custom Blocks To Set Color At The Block Level

[](#using-in-custom-blocks-to-set-color-at-the-block-level)

Add color palette selection to individual blocks:

```
import { HMColorPalette } from 'hm-color-palette';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function Edit({ attributes, setAttributes }) {
  const { colorPalette } = attributes;

  const blockProps = useBlockProps({
    className: `has-${ colorPalette }-color-palette`,
  });

  return (

           setAttributes({ colorPalette: value })}
          />

        Your content here

  );
}
```

**block.json:**

```
{
  "attributes": {
    "colorPalette": {
      "type": "string",
      "default": null
    }
  }
}
```

**save.js:**

```
import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
  const { colorPalette } = attributes;

  const blockProps = useBlockProps.save({
    className: `has-${ colorPalette }-color-palette`,
  });

  return (

      Your content here

  );
}
```

### Using in Themes

[](#using-in-themes)

#### 1. PHP Integration

[](#1-php-integration)

The plugin automatically injects body classes. Access the selected palette in your theme:

```