create-guten-block
create-guten-block copied to clipboard
component does not load in block.js
` /**
- BLOCK: nh-blocks
- Registering a basic block with Gutenberg.
- Simple block, renders and saves the same content without any interactivity. */ import { categories } from '../components/categories'; // Import CSS. // import './editor.scss'; // import './style.scss';
const { __ } = wp.i18n; // Import __() from wp.i18n const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks const { PlainText, RichText, InspectorControls } = wp.editor; const { Fragment } = wp.element; const { TextControl, ToggleControl, Panel, PanelBody, PanelRow, SelectControl, Dropdown, Button, CheckboxControl } = wp.components; /**
- Register: aa Gutenberg Block.
- Registers a new block provided a unique name and an object defining its
- behavior. Once registered, the block is made editor as an option to any
- editor interface where blocks are implemented.
- @link https://wordpress.org/gutenberg/handbook/block-api/
- @param {string} name Block name.
- @param {Object} settings Block settings.
- @return {?WPBlock} The block, if it has been successfully
-
registered; otherwise `undefined`.
*/ registerBlockType( 'cgb/block-nh-blocks', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. title: __( 'nh-blocks - Latest Block' ), // Block title. icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/. category: 'text', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. keywords: [ __( 'nh-blocks — Post Block' ), __( 'Posts by Category' ), __( 'create-guten-block' ), ],
attributes: {
categories: {
type: 'array' },
selectCategory: { type: 'string' },
},
/**
* The edit function describes the structure of your block in the context of the editor.
* This represents what the editor will render when the block is used.
*
* The "edit" property must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Mixed} JSX Component.
*/
edit: ( props ) => {
// Creates a <p class='wp-block-cgb-block-nh-blocks'></p>.
if ( ! props.attributes.categories ) {
wp.apiFetch( {
url: '/wp-json/wp/v2/categories',
} ).then( categories => {
props.setAttributes( { categories: categories } );
} );
}
console.log( props.attributes.categories );
return (
<InspectorControls>
<PanelBody>
<PanelRow>
<label>Set Filter</label>
</PanelRow>
<PanelRow>
<categories />
</PanelRow>
</PanelBody>
</InspectorControls>
);
},
/**
* The save function defines the way in which the different attributes should be combined
* into the final markup, which is then serialized by Gutenberg into post_content.
*
* The "save" property must be specified and must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Mixed} JSX Frontend HTML.
*/
save: ( { className, attributes, setAttributes } ) => {
return null;
},
} );
`
`
const { Component } = wp.element;
export class categories extends Component { constructor( props ) { super( ...arguments ); this.props = props; }
render() {
return (
<p>categories label</p>
);
}
}
`