The Block API of Gutenberg supports post meta as a attribute source. But what if you want to use post meta in say a plugin sidebar?
With the help of the @wordpress/data package and so called “higher-order components” it’s as easy as for blocks. 🙌
First we import all the required dependencies. This assumes that you’re using webpack and define your externals like this. If you’re looking for an ES5 example take a look at the block editor handbook.
To render the UI we extend
Component and implement the
render() method. For this example I used a
PanelColor component which allows a user to select a color. We’ll save the hex value in the post meta
(Please ignore the incorrect syntax highlighting.)
Now we need a higher-order component which is used to fetch the data, in this case our post meta.
The second higher-order component is used to update the data.
Since we now have two higher-order components we have to combine them with
Having a fully renderable component we can finally register our custom plugin:
And that’s it! 🚢
PS: Make sure to register the post meta properly with
'show_in_rest' => true.
Photo by Kimberly Farmer.
I hate Java. I hate Java IDEs. They’re slow and bloated. I really want to give JetBrains PhpStorm a chance, but they lost me on the settings screen.
An overview of the packages I use:
- Alignment: A simple key-binding for aligning multi-line and multiple selections.
- ApacheConf: Syntax highlighting for Apache configuration files.
- Autoprefixer: You shouldn’t have to care about vendor prefixes.
- Case Conversion: Convert a word between pascal, camel, snake, dot, dash (hyphen) cases.
- DocBlockr: Makes writing documentation a breeze.
- EditorConfig: Helps to maintain coding styles per project, see EditorConfig.
- Emmet: Ultra-fast coding.
- FileDiffs: Lets you compare two tabs for diffs.
- HTML5: HTML5 snippets.
- jQuery: Syntax highlighting for jQuery, includes also snippets.
- LaTeXTools: Not just development, I write my thesis with Sublime too!
- nginx: Syntax highlighting for Nginx configuration files.
- Sass: Syntax highlighting for Sass files.
- rsub: One of three simple (one-time) steps to get the
sublcommand working on your remote server.
- SideBarEnhancements: Improves the context menu with entries like new file/folder, rename, move, copy, refresh etc.
- SublimeLinter: The framework for linters.
- SublimeLinter-php: Lints your PHP files with
- SublimeLinter-phpcs: Lints your PHP files with Code Sniffer. (Rules for WordPress coding standards)
Sublime supports custom themes too. I’m using the Spacegray theme.