https://github.com/pixelcollective/laravel-mix-wp-blocks

adds mix.block() to Laravel Mix
https://github.com/pixelcollective/laravel-mix-wp-blocks

laravel-mix webpack wordpress

Last synced: about 1 month ago
JSON representation

adds mix.block() to Laravel Mix

• Host: GitHub
• URL: https://github.com/pixelcollective/laravel-mix-wp-blocks
• Owner: pixelcollective
• Created: 2019-05-02T17:58:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-24T23:41:40.000Z (about 1 year ago)
• Last Synced: 2024-11-29T08:44:01.282Z (about 1 month ago)
• Topics: laravel-mix, webpack, wordpress
• Language: JavaScript
• Homepage:
• Size: 29.3 KB
• Stars: 33
• Watchers: 2
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Laravel Mix WP Blocks

[![Maintainability](https://api.codeclimate.com/v1/badges/4445cb074eab29b4ba42/maintainability)](https://codeclimate.com/github/pixelcollective/laravel-mix-wp-blocks/maintainability) [![npm version](https://badge.fury.io/js/%40tinypixelco%2Flaravel-mix-wp-blocks.svg)](https://badge.fury.io/js/%40tinypixelco%2Flaravel-mix-wp-blocks)

## About

Laravel mix extension to transpile WordPress block scripts.

## Installation

```sh

npm install @tinypixelco/laravel-mix-wp-blocks --save-dev

```

```sh

yarn add -D @tinypixelco/laravel-mix-wp-blocks

```

## Usage

In webpack.config.js:

```js

require("@tinypixelco/laravel-mix-wp-blocks");

mix.block("resources/assets/scripts/blocks.js", "scripts");

```

By doing so you'll find that you can now utilize all `@wordpress` scoped dependencies using ECMAScript 6 import syntax. Example:

```js

import { RichText } from "@wordpress/block-editor";

```

These packages are included as [webpack externals](https://webpack.js.org/configuration/externals/), so there is no reason to add them to your package file.

You will also find a php manifest file accompanying each script in your distribution directory. This file declares an array of dependencies based on what you've used in your scripts. Require it and you're set.

Additional [Dependency Extraction Webpack Plugin options](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin#options) maybe be provided as a third argument to `mix.block()`:

```js

mix.block("resources/assets/scripts/blocks.js", "scripts", {

  outputFormat: "json",

});

```

Besides the plugin options there is a special flag for the common use case of turning off `@babel/runtime/regenerator` handling by `wp-polyfill`.

```js

mix.block("resources/assets/scripts/blocks.js", "scripts", {

  disableRegenerator: true,

});

```