README

此插件提供以下两项功能

1. 部分块
2. 列块

这些块是所有WordPress页面构建器项目的基石，具有通常所需的基本设置。可以通过扩展和重写features属性来开启或关闭设置。

部分

部分默认启用的以下功能

• 背景
• 垂直对齐
• 宽度
• 垂直填充
• 背景图像
• 背景颜色

可以通过这种方式关闭它们

// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
    if (settings.name !== 'next24hr/section') {
        return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
            // Add the features you want to use in the array
			features: { type: 'array', default: [
                'background', 
                'verticalAlignment', 
                'width', 
                'verticalPadding', 
                'background.image',
            ] },
		});
	}
	return settings;
});

列布局

部分预先加载了一些常见的列分割。如果您想添加更多，可以这样做

const template = {
    // gutenberg editor css
    style: 'minmax(min-content, 1fr) minmax(min-content, 4fr) minmax(min-content, 1fr)',
    title: __( 'Three columns; wider center column' ),
    icon: <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-rule="evenodd" d="M 41 14 C 41 12.895 40.105 12 39 12 L 9 12 C 7.895 12 7 12.895 7 14 L 7 34 C 7 35.105 7.895 36 9 36 L 39 36 C 40.105 36 41 35.105 41 34 L 41 14 Z M 32.681 34 L 14.694 34 L 14.733 14 L 32.602 14 L 32.681 34 Z M 34.329 34 L 34.368 14 L 39 14 L 39 34 L 34.329 34 Z M 12.928 34 L 9 34 L 9 14 L 13.006 14.039 L 12.928 34 Z"></path></svg>,
    template:[
        [ "next24hr/column", { "width": "1/6" } ],
        [ "next24hr/column", { "width": "2/3" } ],
        [ "next24hr/column", { "width": "1/6" } ]
    ],
};

// when you extend the gutenberg block:
<BlockEdit { ...props } extraTemplates={[ template ]}>

您还可以通过其slug名称禁用这些默认模板（除了单列模板），如下所示

// when you extend the gutenberg block:
<BlockEdit { ...props } disableTemplates={[ 'threeColumnsWideCenter', 'fourColumnsEqual' ]}>

/**
 * Defaults:
 * 
 * twoColumnsEqual
 * twoColumnsOneAndTwoThirds
 * twoColumnsTwoAndOneThirds
 * threeColumnsEqual
 * threeColumnsWideCenter
 * fourColumnsEqual
 */

列

如部分所示，列有一组可以开启或关闭的功能

• 方向
• 对齐

可以通过与部分相同的方式关闭它们（在这个例子中，我们关闭了direction）

// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
	if (settings.name !== 'next24hr/column') {
		return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
            // Add the features you want to use in the array. 
			features: { type: 'string', default: ['aligment'] },
		});
	}
	return settings;
});

列中的块（禁用）

如果您想在列中禁用某些块，可以更改名为blockedBlocks的属性，如下所示

// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
	if (settings.name !== 'next24hr/column') {
		return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
			blockedBlocks: { type: 'array', default: ['mysupercoolblock'] },
		});
	}
	return settings;
});

## How to develop

This is base on Create Gutenberg Block

### 👉  `npm start`
- Use to compile and run the block in development mode.
- Watches for any changes and reports back any errors in your code.

### If you're pushing to master branch you can just push and github will build the js files for you. Otherwise you'll need to build them running the command below:
#### 👉  `npm run build`
- Use to build production code for your block inside `dist` folder.
- Runs once and reports back the gzip file sizes of the produced code.