问题标签 [gutenberg-blocks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3317 浏览

wordpress - 带有响应式图像的古腾堡自定义块

我按照本教程了解如何构建自定义 WordPress Gutenberg 块:https ://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/

第一个块很好,但我想在这个块中使用自定义图像大小。这个图像大小也应该是响应式的,这意味着应该在前端添加其他图像大小的 srcset 属性。

我在互联网上搜索了很长时间,但没有找到任何东西。使用来自 wordpress 的标准图像块或画廊块调整大小的图像,但对我来说,整个代码太复杂而无法遵循,因为我还不习惯古腾堡的编码方式......

有没有关于如何实现这一点的现有指南或代码示例?

最佳卢卡斯

0 投票
2 回答
1043 浏览

wordpress-theming - Gutenberg 模板:核心块属性

Gutenberg 手册目前有一个简短的条目,用于创建用于自定义帖子类型等的整个块模板。

https://wordpress.org/gutenberg/handbook/templates/

不过,它似乎缺少对 core/-Blocks 的全面概述。特别是可用的属性在这里很有趣。是否有我只是缺少的参考条目?

详细说明:

玩了一圈,发现了一些东西。例如,预格式化块确实采用了 php 文件的格式,如换行符、缩进和制表符,这使得它们有点敏感..

这确实转化为:(请注意,后面的行之前的每个制表符或缩进也会被接管)

截屏

那么 - 我还需要修改“内容”和“占位符”属性吗?我可以利用它们是数组并插入选择器或其他 html 之类的事实 .. 这不起作用:

..但这确实:

我在哪里可以找到一阶属性的完整列表,因为例如,核心/块是否会采用“文本”字符串或“内容”数组等等并不总是很清楚。

0 投票
2 回答
1181 浏览

wordpress - 使用 Wordpress 简码函数呈现 Gutenberg 块,将属性作为参数发送

给定画廊 ID,我有一个生成画廊的简码。

现在,我制作了一个在编辑器中完美运行的 Gutenberg 块。您可以选择一个画廊,它将保存。但是,我不想重复代码并将 html 放在 save 属性和 php 代码中。

所以我想知道是否有一种方法可以使用相同rb_scroll_gallery_shortcode的函数在前端渲染块。

我已经看到您可以使用register_block_type并将其设置render_callbackrb_scroll_gallery_shortcode,但我需要在块中选择的 ID 将其发送到$atts数组中的函数

0 投票
1 回答
3138 浏览

gutenberg-blocks - Gutenberg is not saving my custom block data

I am absolutely new to Gutenberg and trying to learn it. Today I have created a custom block with multiple fields.

Here is the code:

The block appears fine in the editor when I click it from the inserter dialog but information I put in block's field are not getting saved at all!

I am using create-guten-block tool to create the block structure: npx create-guten-block ss-events

Gutenberg is a completely new world for me and I have no idea what I am doing wrong.

0 投票
1 回答
816 浏览

wordpress - Gutenberg 元信息在 post_content 字段中保存为 HTML 注释

我对 Gutenberg 很陌生,刚刚开始学习块开发。今天我尝试创建一个引用thisthis的元字段。

这就是我为自定义帖子类型注册元字段的方式:

块注册:

当我保存帖子并检查post_content字段内容时,我看到的值是这样的:

元信息保存为 HTML 注释。

然后我继续尝试使用 REST API 来查看 JSON 的样子。正如预测的那样,由于数据被保存为 HTML 注释,因此其中没有任何meta键。

这是 JSON 输出(没有任何meta键)http://local.subratasarkar.com/wp-json/wp/v2/ss_event/654

但是根据我引用的文章(上面),它应该有元键。

而且我可能错了,当我声明 a 时meta,它会保存在wp_postmeta表中吗?

更新

我刚刚参考了这个并将属性更改为

现在元数据根本没有保存!当我回来编辑帖子时,元框是空的。我也没有看到保存在该post_content字段中的值。

0 投票
1 回答
497 浏览

wordpress - 将颜色设置添加到 Wordpress Gutenberg 标题

如何将颜色设置添加到 Gutenberg Header 块?我已经为此段落添加了主题支持......

0 投票
1 回答
793 浏览

reactjs - Gutenberg 块在选择元素时显示某些内容

我正在构建一个 Gutenberg 块,并尝试在选择元素时显示输入。

When the element with class name "button" is selected the form should show. 相反,表格从一开始就显示。我使用 isSelected 错误吗?

0 投票
2 回答
1899 浏览

wordpress - Gutenberg 块:如何将 RichText 添加到无序列表

我正在尝试创建一个自定义 Gutenberg 块,该块将具有多个 RichText 组件的无序列表。

最终结果将是这样的:

<ul> <li> <span class="class-one">First item</span> <span class="class-two">Second item</span> </li> </ul>

我一直在玩这个WordPress 教程中的食谱卡示例

我可以看到 RichText 组件如何多行以实现“li”作为获取列表的标签,但我不知道如何使用子 Richtext 组件进行多行。

这是我到目前为止所拥有的:

我认为问题是应该将第一个 RichText 切换为其他内容,但我不知道将其更改为什么仍会将所有内容显示为列表。我尝试删除第一个 RichText 并将其设置为带有“li”标签的“ul”,然后编辑器显示第二个 RichText,但它没有将其显示为列表。

任何帮助是极大的赞赏。

0 投票
1 回答
48 浏览

wordpress - 从 3.6.2 升级到 3.7.0 后 Gutenberg 块抛出错误

我创建了一个从 CPT 中提取内容的块。在我从 Gutenberg 3.6.2 升级到 3.7.0 之前,我没有任何错误,并且在 Gutenberg 编辑器中一切正常。我浏览了 3.7.0 更新日志,乍一看没有任何问题。

控制台中抛出的错误:

相关代码:

有任何想法吗?提前致谢。

0 投票
1 回答
4269 浏览

javascript - 检查控件中的古腾堡媒体上传

我正在尝试通过 Gutenberg 的 Inspect Control 的媒体库上传文件。我目前在 JS 中使用此代码:

在这里我正在注册块类型:

但由于某种原因,它对我不起作用。在控制台中它给了我这个错误:

错误:缩小的 React 错误 #130;访问 https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。

当我点击块时,它说:

编辑器遇到了意外错误。

任何人都可以帮助我吗?