npm 包 laravel-mix-wp-blocks 使用教程

前言

Laravel Mix 是一个用于定义 Webpack 构建步骤的优雅、流畅的 API。而 laravel-mix-wp-blocks 这个 npm 包则为开发者提供了在 WordPress 中构建自定义区块的能力。在这篇文章中，我们将会学习如何使用 laravel-mix-wp-blocks 来开发自定义 WordPress 区块。

环境配置

在开始使用 laravel-mix-wp-blocks 之前，您需要安装以下软件：

  • Node.js
  • npm
  • WordPress
  • Gutenberg

安装和配置 laravel-mix-wp-blocks

  1. 在您的 WordPress 项目中执行以下命令，安装 laravel-mix-wp-blocks 依赖：

    --- - ----------- --------------------- ----------

  2. 在您的 WordPress 项目的根目录创建 webpack.mix.js 文件，并编写以下内容：

    ----- --- - -----------------------
----- - -------- - - ---------------------------------

----- --------------- - -------------------------
----- ---------------- - --------------------------

----------------------------

------------------------- ----------------- --------- ---------

    上述代码指定了存放区块样式和 JavaScript 的路径，以及区块的名称和版本号。

  3. 在您的主题或插件中创建 blocks 文件夹，并在其中创建一个包含以下文件的子文件夹 my-block：

    --- ------
-   --- --------
-       --- ----------
-       --- -----------
-       --- ---------
-       --- ----------
-       --- ---------

    block.json 文件用于指定区块名称、描述、类名等信息，而 editor.scss 和 style.scss 则分别用于定义编辑器和前端区块的样式。editor.js 和 script.js 则分别用于定义编辑器和前端区块的 JavaScript。

构建自定义 WordPress 区块

现在，您已经完成了 laravel-mix-wp-blocks 的配置。接下来，我们将展示如何构建自定义 WordPress 区块。

定义区块

在 my-block 文件夹中，创建 block.json 文件，并编写以下内容：

-
  -------- --- -------
  -------------- ----- -- -- ------ --------
  ----------- -------
  ------- -------------------
  ----------- - ----- -------- -------- --
  ----------- -
    -------- -----
    ----------- -----
    --------- ----
  --
  ------------ ----------------
-

上述代码指定了区块的名称、描述、类别、图标、关键字、支持的选项以及 CSS 类名。

定义样式

在 my-block 文件夹中，创建 editor.scss 文件，并编写以下内容：

------- -----------------------------------------------------------

------------------------ -
  ----------------- --------
  -------- -----
  ------- --- ----- -----
-

上述代码指定了编辑器中 my-block 区块的样式。

在同一文件夹中，创建 style.scss 文件，并编写以下内容：

------------------------ -
  ----------------- --------
  -------- -----
  ------- --- ----- -----
-

上述代码指定了前端中 my-block 区块的样式。

定义 JavaScript

在 my-block 文件夹中，创建 editor.js 文件，并编写以下内容：

------------------------------------------------- -
  ------ --- -------
  ----- -------------------
  --------- ---------
  --------- - ----- -------- -------- --
  ----------- -
    -------- -
      ----- ---------
      -------- ------ ------
    -
  --
  ----- ------- -- -
    ----- - ----------- - ------- -- ------------- - - ------
    ------ -------------------------
      ------
      - ---------- --------------- --
      -------------------------
        -----
        -----
        --- ------
      --
      -------------------------
        -----------
        - ------ -------- --------- ------- -- --------------- -------- ------------------ -- -
      -
    --
  --
  ----- ------- -- -
    ----- - ----------- - ------- - - - ------
    ------ -------------------------
      ------
      - ---------- --------------- --
      -------------------------
        -----
        -----
        --- ------
      --
      -------------------------
        ----
        -----
        -------
      -
    --
  -
---

上述代码定义了 my-block 区块的编辑器和前端 JavaScript。

在同一文件夹中，创建 script.js 文件，并编写以下内容：

------------------------------------------------- -
  ------ --- -------
  ----- -------------------
  --------- ---------
  --------- - ----- -------- -------- --
  ----------- -
    -------- -
      ----- ---------
      -------- ------ ------
    -
  --
  ----- ------- -- -
    ----- - ----------- - ------- - - - ------
    ------ -------------------------
      ------
      - ---------- --------------- --
      -------------------------
        -----
        -----
        --- ------
      --
      -------------------------
        ----
        -----
        -------
      -
    --
  --
  ----- ------- -- -
    ----- - ----------- - ------- - - - ------
    ------ -------------------------
      ------
      - ---------- --------------- --
      -------------------------
        -----
        -----
        --- ------
      --
      -------------------------
        ----
        -----
        -------
      -
    --
  -
---

上述代码定义了 my-block 区块在前端的 JavaScript。

构建区块

在命令行中执行以下命令，构建您的 WordPress 区块：

--- --- ---

执行完以上命令后，您将在 my-block 文件夹中看到生成的文件 style.css、script.js、editor.css 和 editor.js。将这些文件上传到您的 WordPress 项目中，并在 Gutenberg 编辑器中引入 my-block 区块。

结语

laravel-mix-wp-blocks 提供了一个优雅且流畅的 API，让开发者可以轻松地构建自定义 WordPress 区块。使用本文中介绍的步骤，您可以快速地上手 laravel-mix-wp-blocks，并创建自己的 WordPress 区块。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067359890c4f7277583e05

阅读全文

猜你喜欢

  • npm 包 cashport-js 使用教程

    在前端开发中，使用现成的 npm 包可以大大提高开发效率。本篇文章将介绍一款名为 cashport-js 的 npm 包，讲解如何安装、配置和使用，并提供详细的示例代码，帮助你快速上手。

    4 年前
  • npm 包 nuxt-quasar 使用教程

    前言 随着前端技术的不断发展，现代化前端框架也层出不穷，一种新兴的前端框架是 Nuxt.js，它为 Vue.js 应用程序提供了一套基于 Vue.js 的通用应用框架。

    4 年前
  • npm 包 flexible-layout 使用教程

    简介 flexible-layout 是一个基于 flex 布局和 less 的前端布局解决方案，它提供了一些常用布局组件和 mixin，支持响应式布局，适用于移动端和桌面端页面开发。

    4 年前
  • npm 包 ember-cli-tus 使用教程

    在前端开发中，我们经常需要上传和下载媒体文件，例如图片、视频等。然而，直接使用 HTTP 协议传输这些大文件有很多限制，在超时、并发和恢复失败等方面都有瓶颈。今天，我们介绍一款名为 ember-cli...

    4 年前
  • npm 包 jquery-autogrowinput 使用教程

    在前端开发中，经常需要对输入框进行增强，比如自动扩展输入框大小以适应输入文本的长度。这时候，一个非常棒的选择就是使用 npm 包 jquery-autogrowinput。

    4 年前
  • npm 包 cordova-plugin-samsung-blockchain 使用教程

    在前端应用开发中，区块链技术已经成为热门的话题。Samsung Blockchain SDK 提供了一种简单的方式来将区块链应用集成到 Samsung 手机上，并且支持各种类型的加密货币。

    4 年前
  • npm包preact-pure-props使用教程

    前言 在前端开发中，如果想要快速地构建一个 React 应用，通常需要使用一个庞大的 React 库来实现，而且这个库还需要占用很多的资源。如果你只是想要一个简单的 HTML 页面，这样显然会很浪费。

    4 年前
  • npm 包 @homitag/logger 使用教程

    在开发前端项目中，日志记录是不可避免的需求。而在使用 Node.js 环境中，我们可以使用 npm 包来记录日志，方便调试与定位问题。@homitag/logger 就是其中一款优秀的 npm 包，本...

    4 年前
  • npm 包 rpn-cli 使用教程

    在前端开发中，常常需要进行数学计算，但手动计算繁琐且容易出错。这时候，使用 rpn-cli 工具可以方便快捷地进行变量计算，提升开发效率。本文将介绍 npm 包 rpn-cli 的使用方法，以及一些实...

    4 年前
  • npm 包 miniprogram-image-picker 使用教程

    前言 小程序开发过程中，图片上传是一个很常用的功能。但是小程序官方并没有提供一个很好用的图片选择器，因此社区中出现了很多第三方的图片选择器组件。在这篇文章中，我们将介绍一款很好用的 npm 包 min...

    4 年前
  • npm 包 vue-cli-plugin-express 使用教程

    Vue.js 是一款流行的前端框架，它在开发 SPA（Single Page Application）方面表现出色。但是，在开发过程中我们往往需要和后端服务进行交互，而后端服务的搭建很大程度上依赖于 ...

    4 年前
  • npm 包 eslint-config-stermedia-react 使用教程

    如果你是一名前端开发者，你一定知道代码规范的重要性。代码规范可以使团队协作更加顺畅，减少代码错误和维护成本。而 eslint 是一个非常好的代码规范检查工具。本文将介绍如何使用一个 eslint 的配...

    4 年前
  • npm 包 svg-sprite-boilerplate-god 使用教程

    介绍 SVG-sprite-boilerplate-god 是一个基于 webpack 和 svg-sprite-loader 的 npm 包，它可以让你快速创建一个 SVG sprites，将多个 ...

    4 年前
  • npm 包 dformed 使用教程

    前言 dformed 是一个用于前端表单处理的 npm 包，它可以帮助我们快速生成表单，并且提供了多种表单元素供我们选择，大大提高了我们的开发效率。本文将详细介绍 dformed 使用方法，帮助大家快...

    4 年前
  • npm 包 svg-sprite-thegod 使用教程

    随着 Web 技术的不断发展，SVG 成为了前端开发中不可或缺的一份子。而在处理 SVG 图片时，将多个 SVG 合并成一个可以加速加载、减少请求次数的 Sprite 是一个比较好的方法。

    4 年前
  • npm 包 svg-sprite-gulp-thegod 使用教程

    前言 使用 SVG 图标在网页中已经变得越来越流行，因为 SVG 图标具有不失真、体积小、可复用等优点。但在实际使用中，直接引用多个 SVG 图标会增加网络请求次数，从而影响网页加载速度，影响用户体验...

    4 年前
  • npm 包 env-decorator 使用教程

    前言 在编写前端代码中，我们经常需要使用环境变量来控制代码的行为。但是在不同的环境中，环境变量有可能会被不同的变量名所替代，这样就会增加我们的工作量。为了解决这个问题，我们可以使用 npm 包 env...

    4 年前
  • npm 包 talquei 使用教程

    npm 是 Node.js 软件包管理器，提供了上万个包，方便我们在前端开发中快速搭建应用。其中，talquei 是一个非常好用的 npm 包，它提供了一个高度自定义的搜索框，可以快速定位到指定内容。

    4 年前
  • npm 包 disker 使用教程

    前言 在日常的前端开发中，我们经常需要处理文件相关的任务，例如读取文件或文件夹，文件或文件夹的大小等等。这时候，disker 这个 npm 包就可以大有用处了。disker 是一个轻量级的、基于 Pr...

    4 年前
  • npm 包 jethro 使用教程

    什么是 jethro jethro 是一个轻量级的 JavaScript 库，旨在在创作交互式 Web 应用程序时提供支持。它提供了一些工具和组件，可以快速、简便地搭建 Web 应用程序，可以轻松地集...

    4 年前

相关推荐

    暂无文章