npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@goodwp/goodenberg

v0.2.1

Published

Goodenberg is a library of components, helpers and examples for building modern WordPress sites and applications with the block editor and all other features introduced with Gutenberg.

Downloads

93

Readme

Goodenberg

Goodenberg is a library of components, helpers and examples for building modern WordPress sites and applications with the block editor and all other features introduced with Gutenberg.

Warning
This package is under active development and not considered stable, breaking changes can be added. I'm using the package on a few sites and some custom plugins successfully, but am still developing, optimizing and documenting it at the moment.

Table of Contents

Versioning / Supported WordPress versions

The library will follow SemVer versioning. Major versions and breaking changes will be kept to a minimum. Each minor version will support the latest stable WordPress version at the time of release. Development versions will try to work with newer Gutenberg versions.

Current supported WordPress version: WordPress 6.5

JavaScript / React

All JavaScript code is developed inside the src directory.

Usage

  1. Install the package via npm install @goodwp/goodenberg
  2. Use @wordpress/scripts for an easy build process and to automatically extract dependencies
  3. Use single components/hooks/etc
    • All submodules (see below) can be imported from the submodules entrypoint import {Page} from "@goodwp/goodenberg/admin/components";
    • All submodules also provide directory-based imports: import {Page} from "@goodwp/goodenberg/admin/components/page";

Architecture

The library only uses babel with the @wordpress/babel-preset-default preset to transpile each single js file, but does not have any other build-process. It is suggested to use @wordpress/scripts or a custom webpack config to bundle it.

Styles are created via @emotion to avoid requiring an additional stylesheet.

Components (components)

React components to be used in your admin screens or custom blocks.

  • EntityRecordsSelect: A component which allows a user to select multiple records ( post, term, etc.).
  • EntityRecordSelect: A component which allows a user to select a single record ( post, term, etc.).

More Information

Admin (admin)

React components, hooks, and utils for building pages in the wp-admin. Useful for building custom plugin pages, settings pages, etc. To be used together with @wordpress/components.

Components

  • Page: A component to build a complete wp-admin page, including header, content, notices.

  • Page.Header: A header bar for wp-admin pages.

  • AdminNotices: A "slot" which will render all admin notices that were rendered on the server

  • Bar: A full-width navigation bar for headers/footers on admin pages (used in Page.Header).

  • Container: A centered container which has a configurable default max-width.

  • TabPanel: A styled version of WordPress TabPanel component to be used on admin pages right beneath your Page.Header.

More Information

Router

A simple "router" to render some components based on a current active "route". There are two implementations (one for URL-based routing, on for state-based routing). Both provide a similar API.

More Information

Hooks (hooks)

React hooks to be used in your admin screens or custom blocks.

More Information

Utils (utils)

Handy utility functions.

  • getBlockStyle(className: string): Get the selected/applied block style by its classname.
  • onBlockRegistration(blockName, namespace, callback): Allows hooking into the registerBlockType hook of a specific block. Avoid having to check for the block name in your callback.
  • onBlockEdit(blockName, namespace, callback, higherOrderComponent = false): Allows hooking into the BlockEdit hook of a specific block. Avoid having to check for the block name in your callback.

More Information

PHP

All PHP code is developed inside the lib directory.

Usage

  1. Install the package via composer require goodwp/goodenberg
  2. Load your composers autoload file in your plugin/theme.
  3. Use the classes and helpers.

More Information

Examples

The examples directory contains a plugin which uses a lot of the components. You can also test this plugin via @wordpress/env:

  1. Clone the repository
  2. Run npm install
  3. Run npm env:start
  4. Open http://localhost:8888/wp-admin and login with admin / password
  5. Activate the plugin and open the example pages.

You can also use WordPress Playground to directly see the examples in a browser:

  1. Download the examples plugin from the latest release.
  2. Go to https://playground.wordpress.net/
  3. Upload and activate the plugin
  4. Go to the new admin page "Goodenberg examples"

Bugs, Issues, Security Issues, Feature Requests

Visit our GitHub Repository.

Inspired by 10up/block-components.