wordpress 古腾堡

Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.

您想为您的WordPress网站创建自定义古腾堡块吗？ WordPress 5.0更新后，您需要使用块在新的WordPress块编辑器中创建内容。

WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.

WordPress附带了几个有用的块，您可以在编写内容时使用它们。 许多WordPress插件还带有您可以使用的自己的块。

However, sometimes you may want to create your own custom Gutenberg block to do something specific.

但是，有时您可能想创建自己的自定义Gutenberg块以执行特定的操作。

If you’re looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then you’re in the right place.

如果您正在寻找一种简单的解决方案来为您的WordPress网站创建自定义古腾堡块，那么您来对地方了。

In this step by step tutorial, we’ll show you the easy way to create a custom WordPress block for Gutenberg.

在本分步教程中，我们将向您展示为古腾堡创建自定义WordPress块的简单方法。

Note: This article is for intermediate users. You’ll need to be familiar with HTML and CSS to create custom Gutenberg blocks.

注意 ：本文适用于中级用户。 您需要熟悉HTML和CSS才能创建自定义的Gutenberg块。

步骤1：开始 (Step 1: Get Started)

The first thing you need to do is install and activate the Block Lab plugin.

您需要做的第一件事是安装并激活Block Lab插件。

It’s a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.

这是一个WordPress插件，可让您轻松地从管理面板创建自定义块。

To install the plugin, you may follow our beginner’s guide on how to install a WordPress plugin.

要安装插件，您可以按照我们的初学者指南安装WordPress插件 。

Once the plugin is activated, you can proceed to the next step of creating your first custom block.

激活插件后，您可以继续执行创建第一个自定义块的下一步。

步骤2：建立新区块 (Step 2: Create a New Block)

For the sake of this tutorial, we will build a ‘testimonials’ block.

为了本教程的缘故，我们将构建一个“推荐”块。

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

首先，从管理面板的左侧栏中转到Block Lab»Add New 。

On this page, you need to give a name to your block. You can write any name of your choice in the “Enter block name here” textbox.

在此页面上，您需要为块命名。 您可以在“在此处输入块名称”文本框中输入您选择的任何名称。

We will name our custom block: Testimonials.

我们将自定义模块命名为：客户推荐。

On the right side of the page, you’ll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.

在页面的右侧，您将找到块属性。 在这里，您可以为块选择一个图标，然后从“类别”下拉框中选择一个块类别。

The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.

弹头将根据您的方块名称自动填充，因此您无需更改它。 但是，您可以在“关键字”文本字段中最多写入3个关键字，以便可以轻松找到您的块。

Now let’s add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.

现在，让我们向块添加一些字段。 您可以添加不同类型的字段，例如文本，数字，电子邮件，URL，颜色，图像，复选框，单选按钮等等。

We’ll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.

我们将3个字段添加到我们的自定义推荐区中：一个用于评论者图像的image字段，一个用于评论者姓名的文本框以及一个用于推荐文本的textarea字段。

Click on the + Add Field button to insert the first field.

单击+添加字段按钮以插入第一个字段。

This will open up some options for the field. Let’s take a look at each of them.

这将为该字段打开一些选项。 让我们看看它们中的每一个。

• Field Label: You can use any name of your choice for the field label. Let’s name our first field as Reviewer Image.字段标签 ：您可以使用任意选择的名称作为字段标签。 让我们将第一个字段命名为“审阅者图像”。
• Field Name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for every field.字段名称 ：字段名称将根据字段标签自动生成。 我们将在下一步中使用此字段名称，因此请确保每个字段的名称都是唯一的。
• Field Type: Here you can select the type of field. We want our first field to be an image, so we’ll select 字段类型 ：您可以在此处选择字段的类型。 我们希望我们的第一个字段是图像，因此我们将从下拉菜单中选择Image from the dropdown menu.图像 。
• Field Location: You can decide whether you want to add the field to the editor or the inspector.字段位置 ：您可以决定要将字段添加到编辑器还是检查器。
• Help Text: You can add some text to describe the field. This is not required if you’re creating this block for your personal use.帮助文本 ：您可以添加一些文本来描述该字段。 如果要创建此块供个人使用，则不需要这样做。

You may also get some additional options based on the field type you choose. For example, if you select a text field, then you’ll get extra options like placeholder text and character limit.

您还可能会根据您选择的字段类型获得一些其他选项。 例如，如果您选择一个文本字段，那么您将获得额外的选项，例如占位符文本和字符限制。

You can click on the Close Field button once you’re done with the image field.

处理完图像字段后，可以单击“ 关闭字段”按钮。

Following the above process, let’s add 2 other fields for our testimonials block by clicking the + Add Field button.

按照上述过程，让我们通过单击+添加字段按钮为我们的推荐模块添加2个其他字段。

In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.

如果您想对字段进行重新排序，则可以使用每个字段标签左侧的汉堡包图标拖动它们来完成。

To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.

要编辑或删除特定字段，您需要将鼠标悬停在字段标签上才能获得编辑和删除选项。

Once you’re done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.

完成后，单击页面右侧的“ 发布”按钮，以保存自定义的Gutenberg块。

步骤3：建立区块范本 (Step 3: Create a Block Template)

Although you’ve created the custom WordPress block in the last step, it’ll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.

尽管您已在最后一步中创建了自定义WordPress区块，但只有创建名为block-testimonials.php的区块模板并将其上传到当前主题文件夹后，该模板才能工作。

The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.

块模板文件将告诉插件如何在编辑器中显示块字段。 插件将查找模板文件，然后使用它显示块内容。

If you don’t have this file, then it’ll display an error saying “Template file blocks/block-testimonials.php not found”.

如果您没有此文件，那么它将显示错误消息 “找不到模板文件blocks / block-testimonials.php”。

Let’s create our block’s template file.

让我们创建块的模板文件。

First, go ahead and create a folder in your desktop and name it blocks. You’ll create your block template file inside this folder and then upload it to your current WordPress theme directory.

首先，继续在桌面上创建一个文件夹，并将其命名为blocks 。 您将在此文件夹中创建您的阻止模板文件，然后将其上传到当前的WordPress主题目录。

To create the template file, you can use a plain text editor like Notepad.

要创建模板文件，可以使用纯文本编辑器(如记事本)。

Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:

每次将新字段添加到自定义块时，都需要将以下PHP代码添加到块模板文件中：

<?php block_field( 'add-your-field-name-here' ); ?>

Just remember to replace add-your-field-name-here with the field name.

只需记住用此处的字段名称替换add-your-field-name-here即可 。

For example, the name of our first field is reviewer-image, so we will add the following line to the template file:

例如，我们的第一个字段的名称是reviewer-image，因此我们将以下行添加到模板文件中：

<?php block_field( 'reviewer-image' ); ?>

Simple, isn’t it? Let’s do the same for the rest of our fields:

很简单，不是吗？ 让我们对其余字段做同样的事情：

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Next, we’ll add some HTML tags to the above code for styling purposes.

接下来，我们将在上面的代码中添加一些HTML标记以进行样式设置。

For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?

例如，您可以将审阅者图像包装在img标签中以显示图像。 否则，WordPress将显示您不想要的图像URL，对吗？

You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which we’ll do in this next step).

您还可以将类名添加到HTML标记中，并将代码包装在div容器中以设置块内容的样式(我们将在下一步中进行此操作)。

So here’s our final code for our block template:

因此，这是块模板的最终代码：

<div class="testimonial-block clearfix">
<div class="testimonial-image">
<img src ="<?php block_field( 'reviewer-image' ); ?>">
</div>
<div class="testimonial-box">
<h4><?php block_field( 'reviewer-name' ); ?></h4>
<p><?php block_field( 'testimonial-text' ); ?></p>
</div>
</div>

Finally, name the file as block-testimonials.php and save it inside the blocks folder.

最后，将文件命名为block-testimonials.php并将其保存在blocks文件夹中。

第4步：设置自定义块的样式 (Step 4: Style Your Custom Block)

Want to style your custom block? You can do that with the help of CSS.

要设置自定义块的样式吗？ 您可以在CSS的帮助下做到这一点。

Open a plain text editor like Notepad and add the following code:

打开一个纯文本编辑器(如记事本)，并添加以下代码：

.testimonial-block {
width: 100%;
margin-bottom: 25px;
}
.testimonial-image {
float: left;
width: 25%;
padding-right: 15px;
}
.testimonial-box {
float: left;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}

Once done, name the file as block-testimonials.css and save it inside the blocks folder.

完成后，将文件命名为block-testimonials.css并将其保存在blocks文件夹中。

步骤5：将阻止模板文件上传到主题文件夹 (Step 5: Upload Block Template File to Theme Folder)

Now let’s upload the blocks folder containing our custom block template file to our WordPress theme folder.

现在，将包含自定义块模板文件的blocks文件夹上载到WordPress主题文件夹。

To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.

为此，您需要使用FTP客户端连接到WordPress网站。 为了获得帮助，您可以查看有关如何使用FTP将文件上传到WordPress网站的指南。

Once you’re connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.

建立连接后，转到/ wp-content / themes /文件夹。 在这里，您需要打开当前的主题文件夹。

Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.

现在将包含块模板文件和CSS文件的blocks文件夹上载到主题目录。

Once done, you can proceed to the final step to test your custom block.

完成后，您可以进行最后一步来测试您的自定义块。

Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.

注意 ：Block Lab插件允许您创建主题特定的块。 如果更改WordPress主题，则需要将blocks文件夹复制到新的主题目录。

步骤6：测试新区块 (Step 6: Test Your New Block)

It’s time to test our custom testimonials block. You can do this by heading over to Pages » Add New to create a new page.

现在是时候测试我们的自定义推荐区了。 您可以转到页面 » 添加新页面来创建新页面。

Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.

接下来，单击添加块 (+)图标并搜索“推荐”块。 找到它后，单击它以将自定义块添加到页面编辑器。

You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.

现在，您可以使用您的自定义块向该页面添加推荐 。 要添加更多个人鉴定，您始终可以插入新的个人鉴定。

Once you’re done, you can preview or publish the page to check whether it’s working properly or not.

完成后，您可以预览或发布页面以检查其是否正常运行。

That’s all! You’ve successfully created your first custom WordPress block for your site.

就这样！ 您已经为网站成功创建了第一个自定义WordPress区块。

Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.

您是否知道可以在编辑器中使用可重复使用的块来节省时间？ 查阅我们的指南， 了解如何在WordPress块编辑器中轻松创建可重复使用的块并在其他网站上使用它们。

You may also want to see our guide on how to create a custom WordPress theme without writing any code.

您可能还想查看我们的指南， 该指南介绍了如何在不编写任何代码的情况下创建自定义WordPress主题 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-gutenberg-block-in-wordpress/

wordpress 古腾堡