humanmade/hm-gutenberg-tools

Name: hm-gutenberg-tools

Owner: Human Made

Description: Useful helpers, components or tools for building things with Gutenberg

Created: 2017-12-18 10:55:00.0

Updated: 2018-05-22 13:18:01.0

Pushed: 2018-05-16 10:21:32.0

Homepage: null

Size: 559

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Human Made Gutenberg Tools

A place to bundle useful reusable Gutenberg components and other tools.

What does this include?

• Post Select button. Provides a media modal like user experience for selecting single or multiple posts. It supports searching, filtering, sorting and custom post types (and taxonomies). stying to work better in the sidebar.
• More Sidebar controls. Other components wrapped up in as standardised sidebar control components.
  • Link control. A wrapper for the core UrlInput, but with some style improvements.
  • Image. Sidebar UI for selecting an image.
  • Post. A wrapper for the post select button component.
• EditableHTML. A wrapper for the core Gutenberg Editable component that allows you to store data as strings of HTML.

Instructions

Install as a plugin, mu-plugin, or you can include it in your theme/plugin.

You will need to run yarn && yarn build in in the hm-gutenberg-tools directory to ensure all the built files are available (In the future I hope to make this step redundant and provide built release versions).

Note that if you are including in a theme (or anywhere outside of plugins/mu-plugins directories) you must define HM_GB_TOOLS_DIR and HM_GB_TOOLS_URL. For example

ne( 'HM_GB_TOOLS_DIR', get_stylesheet_directory() . '/lib/hm-gutenberg-tools' );
ne( 'HM_GB_TOOLS_URL', get_stylesheet_directory_uri() . '/lib/hm-gutenberg-tools' );

Then you should specify the script hm-gb-tools-editor as a dependency of the script in which you are using it.

HM Gutenberg Tools then exposes all functionality globally as window.hm. You can then use reference this in your project in much the the same way that you would use any other components from Gutenberg.

Refer to the Wiki for usage instructions on individual components

Post Select UI

Refer to the wiki for more information on how to use this component.

Development

• yarn build Builds a production version of the code.
• yarn watch Watches for changes and builds development versions of the code.
• yarn lint Lints your JS and fixes your code.