Stack Overflow
Stack Overflow

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
4
votes
0 answers

Custom Gutenberg Blocks automatically wrapping with

I'm trying to write a custom Gutenberg slider. I have this in my edit() and save() functions:
{ attributes.images.map( function ( imageData ) { return(
Jonas Merhej
  • 59
  • 11
4
votes
2 answers

WordPress Gutenberg, update post content programmatically

I have been starting to testing out Gutenberg editor with both ACF and custom blocks. And I have been looking around to solve my problem but I couldn't find anything about this topic (Maybe my google skills is not good enought) But my case is…
zarex360
  • 322
  • 2
  • 13
4
votes
1 answer

Wordpress Add onclick event inside Gutenberg block

I have been searching everywhere to figure out how to add an event inside a gutenberg block. I am working to add an accordion system using ACF and Foundation. I have created a block and fields and template using ACF. I would like my users to be…
James
  • 722
  • 2
  • 14
  • 34
4
votes
1 answer

How to provide class with multiline element gutenberg RichText block?

I'm using following code for gutenberg RichText block el( RichText, { key: 'editable', tagName: 'ul', multiline: 'li', className: 'list-group', onChange: onChangeContent, value: content, …
Rameez Iqbal
  • 335
  • 1
  • 3
  • 14
4
votes
1 answer

Gutenberg custom block with responsive images

I followed this tutorial on how to build a custom WordPress Gutenberg Block: https://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/ This first block is nice, but I would like to use a custom images size in this block. This…
Luke
  • 97
  • 1
  • 9
4
votes
1 answer

add custom fonts (my website's fonts) in Gutenberg editor

I'd like to adapt the gutenberg editor to my website's appearance, and use my web-fonts for the various block elements. I've been looking in the plugin's various folders/CSS-files, but haven't found anything useful. Where are the font definitions…
David Braun
  • 339
  • 3
  • 13
3
votes
1 answer

Is there a way to add new tab in WordPress Gutenberg editor

I am completely new to Gutenberg and I need to add a new tab in the setting section Please check this screenshot I Have created some blocks for Gutenberg but no experience in this. I tried this code import { TabPanel } from…
Manoj Dhiman
  • 4,896
  • 6
  • 24
  • 59
3
votes
4 answers

How to useBlockProps()

I'm trying to rebuild and extend the original Wordpress blocks for Buttons & Button. I created the boilerplate with npx @wordpress/create-block, copied the original code,... It works as long as I remove the useBlockProps() part. e.g. here (original…
mmoollllee
  • 51
  • 5
3
votes
0 answers

HTML in createNotice with Gutenberg shows [object Object]

I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links. I ended up only seeing the raw HTML output, so after some searching on Google I…
tijmen
  • 139
  • 4
  • 17
3
votes
4 answers

WP Block Styles - Trigger JS when selecting a block style

Is there a 'right way' to run JS in the WP Block editor when a block style is selected? I've searched through documentation and google but can't see an example of anyone running a JS script on a block style. Essentially, I want to inject two…
lukeseager
  • 1,785
  • 7
  • 32
  • 48
3
votes
0 answers

How to disable the toolbar of a declared Gutenberg InnerBlock element in a template?

I am trying to design a custom Gutenberg block using InnerBlocks with a template. I want to disable each control in the toolbar of a 'paragraph' innerblock in that template. I have searching but I didn't find a solution. Maybe it's more…
Luis Eduardo Correa Alvarez
  • 154
  • 1
  • 6
3
votes
0 answers

How to create a custom DropdownMenu Button in Gutenberg Paragraph

I have some issues developing a Dropdownmenu for Core/Paragraph. I want to add a dropdownmenu to insert text (like Personalized Tags on Email Services). I'm tried making this code in Vanilla to implement DropdownMenu for Core/Paragraph without…
user2551137
  • 31
  • 1
3
votes
1 answer

How to set default variable in JSX for const with selector

I am fairly experienced with PHP and Wordpress theming, but now struggling with the new Gutenberg editor. I have created a custom block plugin, which involves a lot of JS (React). To the latter I am a bit new. The block is creating a simple wrapper…
rob2911
  • 33
  • 3
3
votes
0 answers

Remove heading options from Gutenberg core block

I want to remove the heading options for the Gutenberg core block using filters. Here is what I tried: const { createHigherOrderComponent } = wp.compose; const withInspectorControls = createHigherOrderComponent( ( HeadingToolbar ) => { return (…
Dennis
  • 306
  • 1
  • 6
3
votes
1 answer

Getting attributes of InnerBlocks and saving them to parent

I have created a "Tabbed Panels" (tabbed content) block that is essentially just an InnerBlocks component that only allows the block "Panel". When you create a Panel you must give the Panel a heading which is then used in the Panel as well as the…
Rice_Crisp
  • 1,061
  • 1
  • 13
  • 30
1 2 3
…
52 53