问题标签 [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 回答
1118 浏览

wordpress - 在高级块设置中添加字段

尝试使用选项卡中的设置构建自定义块,该Advanced block settings选项卡在 RHS 的侧边栏中打开...

WordPress 的默认块似乎在那里有设置,但不幸的是在任何地方都找不到它的记录......

任何指针都会非常有帮助!

0 投票
2 回答
1152 浏览

wordpress - 如何向 WordPress Gutenberg 块添加自定义块?

我想为 Gutenberg 创建一个新的自定义块,可以吗?

0 投票
1 回答
685 浏览

wordpress - 在独立插件中添加整个古腾堡编辑器

在我目前正在开发的插件之一 ( TargetPop ) 中,我嵌入了 TinyMCE 编辑器,以便用户可以为其弹出窗口创建内容,包括“视觉”和“文本”视图以及功能添加媒体、样式/格式选项等。请参见下面的屏幕截图。

我的问题是:我将如何使用即将推出的古腾堡编辑器复制整个功能?我找到了大量关于如何为 Gutenberg 创建新块的示例,但没有真正将整个 Gutenberg 编辑器嵌入其他地方,就像我嵌入了 TinyMCE 编辑器一样。我可能只是在某个地方错过了这个信息......有什么想法吗?

在此处输入图像描述

0 投票
0 回答
229 浏览

wordpress - 带有APIData HOC的古腾堡未在页面重新加载时获取

遵循古腾堡手册中的这个例子

它通常在块添加时获取帖子。但是保存并重新加载后编辑页面后没有数据并停留在“加载”状态

0 投票
2 回答
5383 浏览

javascript - 如何“手动”(以编程方式)在古腾堡中插入一个块?

Gutenberg 的 API 非常晦涩难懂,我不知道如何在帖子中创建和附加块。

我发现wp.blocks.createBlock('core/paragraph', {content: "blabla"});它返回了一个漂亮的块对象,但没有将任何内容附加到帖子中。

我想通过单击一个按钮插入一个带有一些自定义内容的简单段落。

0 投票
0 回答
956 浏览

gutenberg-blocks - 添加自定义古腾堡块图标

我添加了一个用于添加简码的静态块。我不想使用破折号作为块图标,而是想使用插件“图像”文件夹中已经存在的自定义图标。请任何人帮助我使用 .svg 图像作为块图标。以下是我迄今为止尝试添加自定义图标的代码

0 投票
2 回答
2845 浏览

wordpress - 为 Gutenberg 自定义块添加内置调色板

我创建了一个古腾堡自定义块。我的古腾堡自定义块

在这个块中,我需要更改背景颜色(绿色)和文本颜色。我有什么办法可以启用内置的 Gutenberg 调色板,当我单击默认的 Gutenberg 段落和其他块时会出现该调色板。

这是我的 Gutenberg 块的代码。

请帮帮我。

0 投票
3 回答
8784 浏览

wordpress - Gutenberg - 一种块类型中的多个 InnerBlocks

我正在尝试阻止自定义列,因为古腾堡使用的 wordpress 默认值不是我需要的。

所以我查看了它是如何工作的,它使用带有布局定义的 InnerBlocks 块,但是没有办法指定 html 标记和列的类,所以它对我来说没用。

然后我决定使用 map 循环出列,效果很好,然后我在每一列中添加了 InnerBlocks 组件以允许将其他块插入到列中,但问题是在每一列中 InnerBlocks 的内容是共享的,所以我已尝试将每个 InnerBlock 和列的键属性设置为唯一,并且它们的内容仍然是共享的(不,我没有使用共享块)。

看起来古腾堡在每一列中都使用了相同的 InnerBlocks 实例。

我正在尝试构建一个块类型,您可以在其中动态添加列,并在每列中添加带有一些信息的“卡片”。

为了说明我在做什么,这里是编辑功能的返回:

谢谢

0 投票
1 回答
215 浏览

reactjs - 如何为 React Gutenberg 属性分配 iframe url 查询参数值

我正在开发一个定制的古腾堡块。我接受了一些输入(标题、按钮文本等)并显示了一个 iframe。这些属性的值是 iframe 的 url 中的查询参数。当我尝试编辑该块时,我试图从该 iframe 中提取这些值,但我一直失败。我的计划 B 是用这些值保存一个不可见的 div,或者将一些数据属性传递给 iframe,然后以这种方式取回值,因为我不知道如何解析 src 以获取查询参数。

我的 src 的样子是:

如何在 React 中检索标题和按钮的正确值?有任何想法吗?

0 投票
2 回答
4776 浏览

wordpress - Wordpress Gutenberg:前端的 React 组件

Gutenberg 仍然很新,但我仍然希望有人遇到这个问题并找到解决方案。

我使用 create-guten-block 对项目进行样板化并创建了一个测试块。我遇到的问题是,当我尝试使用 React 组件在前端修改状态时,什么也没有发生。通过 save() 可以很好地加载组件,但是当您尝试执行简单的操作(例如切换列表)时,前端仍然对状态更改没有响应。我还要注意 create-guten-block 不加载任何前端 JS,所以我将编译后的 javascript 换成在前端加载,但仍然无法让它工作。

这是我从 Codecademy 中提取的一些代码,作为一个简单的测试示例。当您选择一个名称时,它会更改sibling.js 中的文本以显示该名称。该代码在 create-react-app 中运行良好,但在前端作为 Gutenberg 中的块什么也不做:

块.js

父.js

child.js

兄弟.js