Gutenberg get block name

admin管理员组

文章数量:1134247

I'm using a filter in the Block API to add a class name to a block's wrapper. I have to add the class name to a specific block, not all blocks.

I tried:

const addClassName = createHigherOrderComponent( ( BlockListBlock ) => {    
  return ( props, blockType ) => {      
    if ( blockType.name === 'myplugin/myblock' ) {
        return <BlockListBlock { ...props } className="test" />;
    }
    return <BlockListBlock { ...props } />
  }
}, 'addClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'myplugin/add-class-name', addClassName );

The issue: blockType.name returns undefined. I also tried getBlockType.name and it also returns undefined. I also tried getting the block name of core blocks. For example core/columns.

I'm using a filter in the Block API to add a class name to a block's wrapper. I have to add the class name to a specific block, not all blocks.

I tried:

const addClassName = createHigherOrderComponent( ( BlockListBlock ) => {    
  return ( props, blockType ) => {      
    if ( blockType.name === 'myplugin/myblock' ) {
        return <BlockListBlock { ...props } className="test" />;
    }
    return <BlockListBlock { ...props } />
  }
}, 'addClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'myplugin/add-class-name', addClassName );

The issue: blockType.name returns undefined. I also tried getBlockType.name and it also returns undefined. I also tried getting the block name of core blocks. For example core/columns.

• block-editor

Share Improve this question asked Mar 2, 2019 at 19:40 CyberJCyberJ 43755 silver badges1919 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 2

From the props object we can get the block information. The object contains the name property you are looking for; this would be the code:

const addClassName = createHigherOrderComponent(BlockListBlock => {
    return props => {
        if (props.name === "myplugin/myblock") {
            return <BlockListBlock {...props} className="test" />;
        }
        return <BlockListBlock {...props} />;
    };
}, "addClassName");

wp.hooks.addFilter(
    "editor.BlockListBlock",
    "myplugin/add-class-name",
    addClassName
);

You can get the selected block name by using this wp.data.select( 'core/editor' ).getSelectedBlock().name; inside the block edit or save function. This is the answer of what your question title is saying.

By the way you can easily add class anywhere in the layout inside edit function so why are you hassling so much.

You can simple use wp data api to get the default class name of your block like this:

const className = getBlockDefaultClassName("namespace/yourblockname");

getBlockDefaultClassName is from wp.blocks so you can import it:

import { getBlockDefaultClassName } from "@wordpress/blocks";

or

const { getBlockDefaultClassName } = wp.blocks;

Hope it helps!

It seems to me most everything in WP is more complicated than it needs to be. If I want the name of a block type, why can't the name simply show up when I click on a block?

And now I am trying to simply copy and paste a block in order to copy its color scheme, and none of the color scheme attributes will copy. Further, I can no longer go to the parent (existing) block and read the colors; they do not show up, like the data seems to be gone, though the block still renders correctly on the live site.

Very frustrating.

本文标签： Gutenberg get block name