How to use the @wordpress/blocks.registerBlockType function in @wordpress/blocks

To help you get started, we’ve selected a few @wordpress/blocks examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Automattic / wp-calypso / apps / full-site-editing / full-site-editing-plugin / posts-list-block / blocks / posts-list / index.js View on Github external
/**
 * Internal dependencies
 */
import * as metadata from './block.json';
import './editor.scss';
import './style.scss';
import { transforms, isValidHomepagePostsBlockType } from './transforms';

const icon = (
	<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
		<path d="M0 0h24v24H0V0z" fill="none" opacity=".87"></path>
		<path d="M3 5v14h17V5H3zm4 2v2H5V7h2zm-2 6v-2h2v2H5zm0 2h2v2H5v-2zm13 2H9v-2h9v2zm0-4H9v-2h9v2zm0-4H9V7h9v2z"></path>
	</svg>
);

registerBlockType( metadata.name, {
	title: __( 'Blog Posts Listing', 'full-site-editing' ),
	description: __( 'Displays your latest Blog Posts.', 'full-site-editing' ),
	icon: icon,
	category: 'layout',
	supports: {
		html: false,
		multiple: false,
		reusable: false,
		inserter: false,
	},
	attributes: metadata.attributes,
	edit: ( { attributes, setAttributes, clientId, isSelected } ) =&gt; {
		const block = select( 'core/block-editor' ).getBlock( clientId );

		// Find if any of possible transformations is into the Homepage Posts block.
		const possibleTransforms = getPossibleBlockTransformations( [ block ] );
github Automattic / wp-calypso / apps / full-site-editing / full-site-editing-plugin / full-site-editing / blocks / post-content / index.js View on Github external
/**
 * External dependencies
 */
import { createHigherOrderComponent } from '@wordpress/compose';
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';

/**
 * Internal dependencies
 */
import edit from './edit';
import save from './save';
import './style.scss';

registerBlockType( 'a8c/post-content', {
	title: __( 'Content' ),
	description: __( 'The page content.' ),
	icon: 'layout',
	category: 'layout',
	supports: {
		align: [ 'full' ],
		anchor: false,
		customClassName: false,
		html: false,
		inserter: false,
		multiple: false,
		reusable: false,
	},
	attributes: {
		align: {
			type: 'string',
github Automattic / sensei / assets / blocks / course-outline / index.js View on Github external
[ CourseOutlineBlock ].forEach( ( block ) => {
	const { name, ...settings } = block;
	registerBlockType( name, settings );
} );
github WordPress / gutenberg / packages / block-library / src / index.native.js View on Github external
].forEach( ( { name, settings } ) => {
		registerBlockType( name, settings );
	} );
};
github php4dev / heroku-wordpress / wp-content / plugins / woocommerce / packages / woocommerce-blocks / assets / js / blocks / reviews / reviews-by-category / index.js View on Github external
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, review } from '@woocommerce/icons';

/**
 * Internal dependencies
 */
import Editor from './edit';
import sharedAttributes from '../attributes';
import save from '../save.js';
import { example } from '../example';

/**
 * Register and run the "Reviews by category" block.
 */
registerBlockType( 'woocommerce/reviews-by-category', {
	title: __( 'Reviews by Category', 'woocommerce' ),
	icon: {
		src: ,
		foreground: '#96588a',
	},
	category: 'woocommerce',
	keywords: [ __( 'WooCommerce', 'woocommerce' ) ],
	description: __(
		'Show product reviews from specific categories.',
		'woocommerce'
	),
	supports: {
		html: false,
	},
	example: {
		...example,
github php4dev / heroku-wordpress / wp-content / plugins / woo-gutenberg-products-block / assets / js / blocks / product-search / index.js View on Github external
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Icon, search } from '@woocommerce/icons';
/**
 * Internal dependencies
 */
import './style.scss';
import './editor.scss';
import Block from './block.js';
import edit from './edit.js';

registerBlockType( 'woocommerce/product-search', {
	title: __( 'Product Search', 'woo-gutenberg-products-block' ),
	icon: {
		src: ,
		foreground: '#96588a',
	},
	category: 'woocommerce',
	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
	description: __(
		'A search box to allow customers to search for products by keyword.',
		'woo-gutenberg-products-block'
	),
	supports: {
		align: [ 'wide', 'full' ],
	},
	example: {
		attributes: {
github GraphQLAPI / graphql-api-for-wp / blocks / access-control-user-capabilities / src / index.js View on Github external
*
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * Application imports
 */
import EditBlock from './edit.js';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
registerBlockType( 'graphql-api/access-control-user-capabilities', {
	/**
	 * This is the display title for your block, which can be translated with `i18n` functions.
	 * The block inserter will show this name.
	 */
	title: __( 'User capabilities', 'graphql-api' ),

	/**
	 * This is a short description for your block, can be translated with `i18n` functions.
	 * It will be shown in the Block Tab in the Settings Sidebar.
	 */
	description: __(
		'Grant access to the selected fields and directives based on the user having any of the selected capabilities',
		'graphql-api'
	),

	/**
github Automattic / wp-calypso / apps / o2-blocks / src / project-status / index.js View on Github external
export function registerBlock() {
	registerBlockType( 'a8c/project-status', {
		title: __( 'Task' ),
		description: __( 'Display a task overview of the status of a project.' ),
		icon,
		category: 'a8c',
		supports: {
			className: false,
			anchor: true,
		},
		attributes: {
			estimate: {
				type: 'string',
			},
			team: {
				type: 'string',
				default: '',
			},
github php4dev / heroku-wordpress / wp-content / plugins / woocommerce / packages / woocommerce-blocks / assets / js / blocks / featured-category / index.js View on Github external
import { registerBlockType } from '@wordpress/blocks';
import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
import { Icon, folderStarred } from '@woocommerce/icons';

/**
 * Internal dependencies
 */
import './style.scss';
import './editor.scss';
import Block from './block';
import { example } from './example';

/**
 * Register and run the "Featured Category" block.
 */
registerBlockType( 'woocommerce/featured-category', {
	title: __( 'Featured Category', 'woocommerce' ),
	icon: {
		src: ,
		foreground: '#96588a',
	},
	category: 'woocommerce',
	keywords: [ __( 'WooCommerce', 'woocommerce' ) ],
	description: __(
		'Visually highlight a product category and encourage prompt action.',
		'woocommerce'
	),
	supports: {
		align: [ 'wide', 'full' ],
		html: false,
	},
	example,
github GraphQLAPI / graphql-api-for-wp / blocks / schema-config-field-deprecation-lists / src / index.js View on Github external
*
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * Application imports
 */
import EditBlock from './edit';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
registerBlockType( 'graphql-api/schema-config-field-deprecation-lists', {
	/**
	 * This is the display title for your block, which can be translated with `i18n` functions.
	 * The block inserter will show this name.
	 */
	title: __( 'Field Deprecation Lists for the Schema Configuration', 'graphql-api' ),

	/**
	 * This is a short description for your block, can be translated with `i18n` functions.
	 * It will be shown in the Block Tab in the Settings Sidebar.
	 */
	description: __(
		'Select Field Deprecation Lists for the Schema Configuration',
		'graphql-api'
	),

	/**