NTCDE.COM

Blog cá nhân chia sẻ về Lập trình, WordPress, Thủ thuật, Phầm mềm hay.

Làm quen với các components thường dùng khi tạo Gutenberg Block

author avatar NTC Web Development, WordPressNo Comments on Làm quen với các components thường dùng khi tạo Gutenberg Block

Trong bài viết này mình sẽ giới thiệu qua cho mọi người một số components thường sử dụng.

Table of contents

Component trong Gutenberg

Gói này bao gồm một thư viện các thành phần WordPress chung được sử dụng để tạo các phần tử giao diện người dùng chung được chia sẻ giữa các màn hình và các tính năng của bảng điều khiển WordPress.

Cài đặt

Cài đặt module này bằng cách

npm install @wordpress/components --save hoặc yarn add --dev @wordpress/components

Trong bài viết hôm trước về Cách tạo Gutenberg Block trong WordPress bằng create-guten-block thì nó đã tích hợp sẵn module trên rồi nên bạn không cần thiết phải cài đặt vào nữa, chỉ cần import và sử dụng thôi.

Ví dụ: 

import { Button } from '@wordpress/components';
 
export default function MyButton() {
    return <Button>Click Me!</Button>;
}

Các components thường sử dụng khi phát triển Gutenberg Blocks

RichText

RichText là một component cho phép các nhà phát triển hiển thị đầu vào có thể thay đổi nội dung, cung cấp cho người dùng tùy chọn định dạng nội dung block để làm cho nó in đậm, in nghiêng, được liên kết hoặc sử dụng định dạng khác.

RichText Reference
RichText Reference

Các bạn lưu ý lưu dữ liệu khi sử dụng RichText nên sử dụng <RichText.Content /> để có thể lưu đầy đủ định dạng bạn sử dụng như in đậm, nghiêng,…

Bạn có thể xem thêm danh sách thuộc tính của RichText tại đây.

Sử dụng:

import { RichText } from '@wordpress/block-editor';

registerBlockType('cgb/my-block', {
	title: __('my-block - CGB Block'),
	icon: 'shield',
	category: 'common',
	keywords: [
		__('my-block — CGB Block'),
		__('CGB Example'),
		__('create-guten-block'),
	],
	attributes: {
		text: {
			type: 'string',
			default: ''
		}
	},

	edit: (props) => {
		let {attributes, className, setAttributes} = props

		return (
			<div className={className}>
				 <RichText
					 tagName="h2" // The tag here is the element output and editable in the admin
					 value={attributes.text} // Any existing content, either from the database or an attribute default
					 allowedFormats={['core/bold', 'core/italic']} // Allow the content to be made bold or italic, but do not allow other formatting options
					 onChange={(text) => setAttributes({text})} // Store updated content as a block attribute
					 placeholder={__('Heading...')} // Display this text before any content has been added by the user
				 />
			</div>
		);
	},

	save: (props) => {
		let {attributes, className} = props
		return (
			<div className={className}>
				// Saves <h2>Content added in the editor...</h2> to the database for frontend display
				<RichText.Content tagName="h2" value={attributes.text} />;
			</div>
		);
	},
});

Nested Blocks: Using InnerBlocks

Bạn có thể tạo một khối duy nhất lồng các khối khác bằng cách sử dụng thành phần InnerBlocks. Điều này được sử dụng trong Columns block, Social Links block hoặc bất kỳ khối nào bạn muốn chứa các khối khác.

Sử dụng:

import { InnerBlocks } from '@wordpress/block-editor';
 
registerBlockType( 'gutenberg-examples/example-06', {
    // ...
 
    edit: () => {
        return (
            <div>
                <InnerBlocks />
            </div>
        );
    },
 
    save: () => {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );
  • Sử dụng thuộc tính ALLOWED_BLOCKS, bạn có thể xác định tập hợp các khối được phép trong InnerBlock của mình. Điều này hạn chế các khối chỉ có thể được đưa vào danh sách được liệt kê, tất cả các khối khác sẽ không được hiển thị.
const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
//...
<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;
  • Orientation: Theo mặc định, trong InnerBlocks các khối của nó được hiển thị trong một danh sách dọc. Bạn có thể sử dụng orientation để thay đổi hướng của các block trong InnerBlocks
<InnerBlocks orientation="horizontal" />
  • Template: Sử dụng thuộc tính template để xác định một tập hợp các khối có sẵn trong InnerBlocks khi được chèn vào.
const MY_TEMPLATE = [
    [ 'core/image', {} ],
    [ 'core/heading', { placeholder: 'Book Title' } ],
    [ 'core/paragraph', { placeholder: 'Summary' } ],
];
 
//...
 
    edit: () => {
        return (
            <InnerBlocks
                template={ MY_TEMPLATE }
                templateLock="all"
            />
        );
    },

Sử dụng prop all để khóa template, không cho thực hiện thay đổi.

Button

Button là một trong những component được sử dụng nhiều trong Gutenberg.

Sử dụng:


import { Button } from '@wordpress/components';

registerBlockType('cgb/my-block', {
//...
	edit: (props) => {
		return (
			<div className={props.className}>
				<Button isSecondary>isSecondary</Button>
				<Button isPrimary>isPrimary</Button>
				<Button isTertiary>isTertiary</Button>
				<Button isDestructive>isDestructive</Button>
				<Button isPrimary isSmall>isPrimary isSmall</Button>
				<Button isPressed>isPressed</Button>
				<Button isBusy>isBusy</Button>
				<Button isLink>isLink</Button>
				<Button isPrimary icon={'insert'}>isPrimary icon</Button>
				<Button isSecondary disabled>isSecondary disabled</Button>
			</div>
		);
	},
//...
});

TextControl

Component TextControl cho phép người dùng nhập và chỉnh sửa văn bản.

Sử dụng:


import { TextControl } from '@wordpress/components';

registerBlockType('cgb/my-block', {
	//...
	attributes: {
		text: {
			type: 'string',
			default: 'Input text'
		}
	},

	edit: (props) => {
		let {attributes, className, setAttributes} = props

		return (
			<div className={className}>
				<TextControl
					label="Your text"
					value={attributes.text}
					onChange={(text) => setAttributes({text})}
				/>
			</div>
		);
	},

	save: (props) => {
		let {attributes, className} = props
		return (
			<div className={className}>
				<h3>{attributes.text}</h3>
			</div>
		);
	},
});

Ở đoạn code trên như bạn thấy thì mình có sử dụng attributes để lưu dữ liệu của input đó lại.

Khi bạn chỉnh sửa text trong input, sau đó bật qua chế độ code editor sẽ thấy dữ liệu dạng như sau:

<!-- wp:cgb/my-block {"text":"this input text"} -->
<div class="wp-block-cgb-my-block"><h3>this input text</h3></div>
<!-- /wp:cgb/my-block -->

SelectControl

SelectControl cho phép người dùng chọn từ menu một tùy chọn. Nó hoạt động như một phần tử <select> gốc của trình duyệt.

Sử dụng:


import { SelectControl } from '@wordpress/components';

registerBlockType('cgb/my-block', {
	//...
	attributes: {
		size: {
			type: 'string',
			default: ''
		}
	},

	edit: (props) => {
		let {attributes, className, setAttributes} = props
        let {size} = attributes
		return (
			<div className={className}>
				<SelectControl
        label="Size"
        value={ size }
        options={ [
            { label: 'Choose a size', value: '' },
            { label: 'Big', value: '100%' },
            { label: 'Medium', value: '50%' },
            { label: 'Small', value: '25%' },
        ] }
        onChange={ ( size ) => {
            setAttributes( { size } );
        } }
    />
			</div>
		);
	},

	save: (props) => {
		let {attributes, className} = props
		return (
			<div className={className}>
				<h3>{attributes.size}</h3>
			</div>
		);
	},
});

ColorPicker

ColorPicker hỗ trợ bạn chọn màu sắc, ví dụ như text color, background color.

Sử dụng:

import { ColorPicker } from '@wordpress/components';

registerBlockType('cgb/my-block', {
	title: __('my-block - CGB Block'),
	icon: 'shield',
	category: 'common',
	keywords: [
		__('my-block — CGB Block'),
		__('CGB Example'),
		__('create-guten-block'),
	],
	attributes: {
		color: {
			type: 'string',
			default: '#ff0000'
		}
	},

	edit: (props) => {
		let {attributes, className, setAttributes} = props

		return (
			<div className={className}>
				<div style={{backgroundColor: attributes.color}}>
					<p>this text</p><p>this text</p><p>this text</p>
				</div>
				<hr />
				<ColorPicker
					color={attributes.color}
					onChangeComplete={(color) => setAttributes({color: color.hex})}
					disableAlpha
				/>
			</div>
		);
	},

	save: (props) => {
		let {attributes, className} = props
		return (
			<div style={{backgroundColor: attributes.color}} className={className}>
				this text
			</div>
		);
	},
});

Các components khác

Trên đây là một số components mình thấy thường được sử dụng trong quá trình phát triển Blocks Gutenberg. Ngoài ra còn rất nhiều components có sẵn khác, bạn có thể tham khảo thêm tại đây.

Component Reference
, , , ,

Related Post

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Gutenberg Block Attributes

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.