block-editor - Read For Learn

Add Custom Block Supports to Core Block

How to remove class=”wp-block-heading” from Heading tags?

you can remove the class=”wp-block-heading” attribute from your heading tags by modifying your theme’s functions.php file or by using a plugin. Option: Modify functions.php Go to Appearance > Theme Editor in your WordPress dashboard. Click on the functions.php file on the right-hand side. Add the following code at the end of the file: function remove_block_css(){ … Read more

Add to Media Inserter Categories

Block Development: hamburger module throwing error in save function

This is because you’ve put interactive components inside your save component, which is forbidden. A save components job is to generate raw HTML strings that get saved in the database. It does this in the editor in javascript, save components never run on the frontend, and there is no way to “save” an interactive or … Read more

Creating my own “recent blog posts” static Gutenberg block, can’t use react hooks in the frontend

That’s not how blocks work, the save component generates static HTML, so you can’t use interactive hooks or state. The important part is that the save component only runs inside the editor on your browser. It does not run in the database, or on the client. You can’t save a react component to the database … Read more

Rem font size is different in the frontend and block editor

Error with RichText Component

You left out important required props: value: String Required. HTML string to make editable. The HTML should be valid, and valid inside the tagName, if provided. onChange ( value: String ): Function Required. Called when the value changes. These props are not optional, the error you are encountering is likely because it’s trying to call … Read more

Errror generated in console leading to block validation failer

The Fragment export lives in the @wordpress/element package, not block-editor. Having said that, you no longer have to explicitly write <Fragment> (as of React 16.2). Instead, you can just use the “empty tag”: return ( <> <p>One</p> <p>Two</p> </> );

How to defer block.json scripts?

Display a block conditionally based on user input button

I think the most simple approach (if you’re able to add some JS) is to use custom classes for your buttons and blocks that can be settled through advanced settings in block editor. Then a really basic JS snippet can do the trick. Here’s an example in vanilla JS with an IFFE that takes care … Read more

+ More