Giter Site home page Giter Site logo

wp-blocks

A monorepo of tools and blocks for the WordPress Gutenberg editor.

What is this?

A collection of Gutenberg blocks and utilities built using TypeScript.

Included are detailed examples of how to configure block plugins using TypeScript.

Getting started

This project uses pnpm to manage dependencies and turbo to orchestrate the build process of the packages in the monorepo.

git clone https://github.com/wp-blocks/wp-blocks.git
cd wp-blocks
pnpm install
pnpm build
pnpm wp-env:start

See wp-env for details and requirements of usage.

Project structure

examples/ # example plugins and blocks, detailing how to use deferent aspects of the Gutenberg APIs
packages/ # published and internal packages of wp-blocks
scripts/  # internal build scripts

wp-scripts is used as much as possible to keep the build process similar to Gutenberg, though some packages use custom build scripts that are internal to wp-blocks.

The linting and formatting are also similar to Gutenberg, most of the modification are for linting TypeScript.

Gutenberg APIs and TypeScript

Currently Gutenberg's support of TypeScript is incomplete. Some packages provide their own types while others are available from Definitely Typed (though some are outdated). To complicated it further, some packages use ambiguous types like Object or any, which makes property access difficult in TypeScript without a lot of type guards or type assertions.

The answer to this issue to for all @wordpress packages to provide their own explicit type. Though this will be difficult. Support for TypeScript in the WordPress community is tepid and the code base wasn't written with typing in mind. In the meantime this project patches the types where necessary in the types directory.

License

wp-blocks is free software, and is released under the terms of the GNU General Public License version 3. See LICENSE.md for complete license.

wp-blocks's Projects

cf7-antispam icon cf7-antispam

☂️ A trustworthy antispam plugin for Contact Form 7.

color-2-name icon color-2-name

🎨 Find the name of the color given a hex, rgb and hsl string! This package provides a function to find the closest color to a given one from an array of colors. It uses the Euclidean distance formula to calculate the distance between colors in the RGB color space.

isolated-block-editor icon isolated-block-editor

Repackages Gutenberg's editor playground as a full-featured multi-instance editor that does not require WordPress.

isotolanguage icon isotolanguage

It turns ISO-Codes into country / language names effortlessly, giving you the essentials minus the fluff. Let the ISO fun begin! 🌍✨

make-pot icon make-pot

A node.js module that generates the pot file for your WordPress plugin or theme.

reprint icon reprint

An unified plugin experiment for WordPress Gutenberg blocks

squashify icon squashify

Boost your website's performance with Squashify! 🚀 Compress and optimize images effortlessly, supporting various formats including JPG, PNG, GIF, SVG, and more. Lightning-fast processing and web-optimized output make your site load faster while saving bandwidth

vinyl icon vinyl

Audio player block for WordPress.

vite-block icon vite-block

Vite Block is an experimental WordPress block development repository that explores the usage of Vite as a replacement for webpack, leveraging its advantages in ES module (ESM) support, faster build times, and efficient development workflows.

wp-blocks icon wp-blocks

A library of tools and blocks for the WordPress Gutenberg editor.

wpmm icon wpmm

wpmm is a Node.js script designed to streamline the installation process of WordPress, themes, and plugins.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.