Questions tagged [wordpress-gutenberg]

Gutenberg is the visual editor for WordPress. A question tagged wordpress-gutenberg should be related to usage or modification of the Gutenberg editor. These are best asked on Stack Exchange WordPress Development.

Gutenberg is the new visual editor for WordPress. Introduced in WordPress 5.0, it provides tools for creating more flexible and media rich posts/pages. Gutenberg posts are composed of "blocks" which can be inserted, rearranged, and styled to create more complex layouts and formats, while not requiring as much technical knowledge from your average user. Gutenberg utilizes the WordPress REST API and React.

A basic understanding of JavaScript frameworks, specifically React, is recommended for Gutenberg development, and more in-depth editing may require a primary knowledge of state management patterns, such as Redux.

Questions with this tag should be related to either using the new Gutenberg editor or modifying and extending the editor's default functionality (blocks, filters, formats, etc).

General Information: https://wordpress.org/gutenberg/

Gutenberg Handbook: https://developer.wordpress.org/block-editor/

Block API: https://developer.wordpress.org/block-editor/developers/block-api/

GitHub: https://github.com/WordPress/gutenberg

React: https://reactjs.org/

795 questions
6
votes
0 answers

Type a tab character into a Gutenberg Code block

The Gutenberg Code blocks are for display blocks of code within your WordPress posts and pages. In ideal situations, most people just copy and paste code directly into these blocks. But I'd like to be able to just type the code into the block. How…
6
votes
2 answers

Using wp.data.subscribe properly

How to use wp.data.subscribe to Show/Hide a block for a certain Post Format (Audio, Video, and Gallery), I test this code and it's working good BUT it triggered while writing the post content and when select any other option so the target block…
Hady Shaltout
  • 457
  • 1
  • 4
  • 18
5
votes
2 answers

Show preview image for custom Gutenberg blocks

I've created a batch of custom ACF gutenberg blocks and now trying to assign a preview image. Issue: Getting the preview image to show The below image here shows a paragraph component which is a default block. You can see on the right hand side,…
Freddy
  • 1,651
  • 2
  • 13
  • 40
5
votes
1 answer

headless WordPress with react - styles in back and front-end Gutenberg

I want to build a headless WordPress + React website. I managed to do the "non-gutenberg" stuff (header, footer etc.) and it works all fine. My problem is the posts content. I can get its html styled in the JSON. If i write the styles in react…
eboycina
  • 84
  • 1
  • 11
5
votes
2 answers

How to insert gutenberg block inside post_content when using wp_insert_post()?

I would like to generate a gutenberg block in php. I'm currently developping a wordpress plugin that import videos from youtube and create a post for each video. I can insert the youtube video inside the post_content but when i edit the post with…
Olivier
  • 85
  • 11
5
votes
0 answers

Error handling in WordPress Data module selectors

When using the WordPress Data module (@wordpress/data, part of the Gutenberg project), it's easy to fetch posts or other entities using select('core').getEntityRecords method. Here's an example of Gutenberg using it internally. However I can't find…
adamboro
  • 342
  • 3
  • 8
5
votes
1 answer

InnerBlocks renderAppender doesn't do anything

I'm trying to add a custom appender to my InnerBlocks component. I followed the example here: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks However, nothing changes when I use this code. Am I…
Rice_Crisp
  • 1,061
  • 1
  • 13
  • 30
5
votes
1 answer

Retrieve theme colors array inside Javascsipt

I'm looking for a way to retrieve the array of color objects you can set in the theme using add_theme_support('editor-color-palette', [...]); Somehow I can not find any information in the documentation on how to retrieve the theme colors inside a…
tobiasegli
  • 51
  • 3
5
votes
2 answers

Get reusable block in php

For the life of me, I can't find anything on how to do this: simply output a reusable gutenberg block via php in a theme template. Seems like it should be doable. Anyone?
protohominid
  • 523
  • 4
  • 16
5
votes
2 answers

How to list and re-arrange or manipulate Gutenberg Block Categories in Wordpress

Anyone know how to re-arrange, manipulate the Block Categories in the Gutenberg Editor in Wordpress I can't even return a list of them as you can with the Blocks themselves, all I can find is 'getCategories' which doesn't seem do anything... the new…
5
votes
3 answers

Gutenberg/React pass dynamic property to filter function

I'm using Gutenberg block filters to try and add a dynamic class name to the block’s wrapper component in the editor. registerBlockType( name, { title: __( 'My Block' ), parent: [ 'myplugin/myblock' ], category: 'common', …
CyberJunkie
  • 18,604
  • 50
  • 135
  • 207
5
votes
1 answer

Firing Wordpress Gutenberg "Convert to Blocks" programmatically

I have several robots, written in Node.js, to auto-generate HTML contents and put them into several Wordpress sites using REST API. Recently Wordpress 5.0 has been officially released, and Gutenberg has become the default editor. All the old posts,…
kychung
  • 63
  • 4
5
votes
2 answers

How to "manually" (programmatically) insert a block in Gutenberg?

Gutenberg's API is quiet obscure and I can't figure how to create and append a block to a post. I've found the wp.blocks.createBlock('core/paragraph', {content: "blabla"}); which returns a pretty block object, but does not append any content to the…
4
votes
1 answer

Block editor giving invalid hook call error

I am trying to get the wordpress block editor to load in a react project: https://www.npmjs.com/package/@wordpress/block-editor. I have set it up exactly as per the example on the npm page but it gives an invalid hook error. I think perhaps it is…
Guerrilla
  • 9,785
  • 21
  • 79
  • 149
4
votes
0 answers

WordPress > Gutenberg > How to add Popover to custom format type?

I want to extend the WordPress (Gutenberg) default block Paragraph to give editors the possibility to add tooltips without writing code. Goal: Add block paragraph and add some text Make a text selection and click on a (new) button (should appear…
neosmart
  • 93
  • 7
1
2
3
52 53