README

实验性 WordPress 插件，提供带有背景图片、视频链接块和图片标题扩展的包装块

我将其命名为“节”。它仅是一个包装块，包含其他块，但具有添加背景图片的能力。如果该节有背景图片，它会添加一些类并添加一个样式属性。

CSS 不会自动在前端加载。您必须添加自己的自定义样式。仅仅为了添加 10 行 CSS 就进行大量的请求是一个糟糕的设计决策。我将其与 Twentynineteen 子主题一起使用。

视频链接块需要未发布的和遗留的附加组件 rlj-wp-utils 或实验性插件 WPMultiplane。我稍后会修复它...

图片标题扩展是实验性的。

安装

将此存储库中的所有文件复制到 /wp-content/plugins/rlj-blocks。

我还不知道如何将插件添加到官方 WordPress 插件。

注意

如果您使用新的、花哨的古腾堡功能，WordPress 将尝试从 Google 加载 Webfont。他们仍然默认将用户的隐私直接踢到屁股。所以别忘了安装 Disable Google Fonts。

自定义 CSS

将此代码添加到您的子主题或复制到自定义化中的“附加 CSS”。

.has-background {
  background-size: cover;
  background-position: 50%;
  height: 100%; }

.has-parallax {
  background-attachment: fixed; }

.is-style-rounded {
  border-radius: 2px; }

.is-style-shadow {
  -webkit-box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2); }

.is-style-shadow-rounded {
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2); }

趣闻轶事

我开始探索 WordPress 的新古腾堡块，但我错过了一个非常重要的功能：一个带有背景图片的简单 <div>。我尝试了多个插件，但它们都

• 有太多无用的功能，
• 添加了 jQuery，但没有 JavaScript 就无法工作，
• 这里那里都有bug。
• ...

在阅读和测试了多个教程以构建自定义古腾堡块后，我发现 Create Guten Block。我应该一开始就使用这个。没有关于古腾堡、React 或 ESNext 的任何知识，我通过多次尝试和错误构建了这个插件，但现在它已经工作了。

使用 Create Guten Block 构建

该项目是用 Create Guten Block (@MrAhmadAwais) 启动的。

以下是一些关于如何运行脚本的说明。

您可以在 这里 找到此指南的最新版本。

npm start

• 用于在开发模式下编译和运行块。
• 监视任何更改并报告代码中的任何错误。

npm run build

• 用于在 dist 文件夹中为您的块构建生产代码。
• 运行一次并报告生成的代码的 gzip 文件大小。

npm run eject

• 用于将插件从 create-guten-block 中抽出。
• 提供所有配置，以便您可以像您希望的那样自定义项目。
• 这是一条单行道，eject 后您必须自己维护一切。
• 通常您不需要 eject 项目，因为一旦抽出，您就失去了与 create-guten-block 的联系，从那时起您必须自己更新和维护所有依赖项。