Giới thiệu về Gutenberg và Custom Block

Gutenberg là trình chỉnh sửa mặc định trong WordPress, cho phép người dùng tạo và chỉnh sửa nội dung một cách trực quan hơn. Với Gutenberg, bạn có thể sử dụng các block để tạo ra các bố cục phức tạp mà không cần phải viết mã. Tuy nhiên, đôi khi bạn có thể cần tạo ra một custom block để tùy chỉnh hơn theo nhu cầu của mình. Bài viết này sẽ hướng dẫn bạn cách tạo custom block trong WordPress với Gutenberg.

Các bước chuẩn bị

Trước khi bắt đầu, bạn cần đảm bảo rằng bạn đã cài đặt và kích hoạt WordPress trên máy chủ của mình. Sau đó, bạn cũng cần chuẩn bị một số công cụ để phát triển:

• Trình soạn thảo mã như Visual Studio Code hoặc Sublime Text.


• Node.js và npm đã được cài đặt trên máy tính của bạn.


• Kết nối đến hệ thống file của website WordPress của bạn.

Cách tạo custom block

Để tạo custom block, bạn cần làm theo các bước sau:

1. 
   

   Tạo thư mục cho block

   
   

   Đầu tiên, bạn cần tạo một thư mục trong thư mục wp-content/plugins của WordPress. Ví dụ, bạn có thể đặt tên thư mục là my-custom-block.

   
   


2. 
   

   Tạo file plugin chính

   
   

   Bên trong thư mục vừa tạo, hãy tạo file my-custom-block.php với nội dung sau:

   
   

   
   
           <?php
   
           /**
   
            * Plugin Name: My Custom Block
   
            * Description: A simple custom block.
   
            * Version: 1.0
   
            * Author: Your Name
   
            */
   
       if ( ! defined( 'ABSPATH' ) ) {
   
           exit; // Exit if accessed directly.
   
       }
   // Enqueue block editor assets
   
       function my_custom_block_editor_assets() {
   
           wp_enqueue_script(
   
               'my-custom-block-js',
   
               plugins_url( 'block.js', __FILE__ ),
   
               array( 'wp-blocks', 'wp-element', 'wp-editor' )
   
           );
   
       }
   
       add_action( 'enqueue_block_editor_assets', 'my_custom_block_editor_assets' );
   
       ?&gt;
   
       </pre>
   
   </li>
   
   <li>
   
       <p><strong>Tạo file JavaScript cho block</strong></p>
   
       <p>Tạo file <code>block.js</code> trong cùng thư mục với nội dung sau:</p>
   
       <pre>
   
       const { registerBlockType } = wp.blocks;
   
       const { RichText } = wp.editor;
   registerBlockType( 'my-plugin/my-custom-block', {
   
           title: 'My Custom Block',
   
           icon: 'smiley',
   
           category: 'layout',
   
           attributes: {
   
               content: {
   
                   type: 'string',
   
                   source: 'html',
   
                   selector: 'p',
   
               },
   
           },
   
           edit( { attributes, setAttributes } ) {
   
               return (
   
                   &lt;div&gt;
   
                       &lt;RichText
   
                           tagName="p"
   
                           onChange={ ( content ) =&gt; setAttributes( { content } ) }
   
                           value={ attributes.content }
   
                           placeholder="Type your text here..."
   
                       /&gt;
   
                   &lt;/div&gt;
   
               );
   
           },
   
           save( { attributes } ) {
   
               return &lt;RichText.Content tagName="p" value={ attributes.content } /&gt;;
   
           },
   
       } );
   
       </pre>
   
   </li>
   
   <li>
   
       <p><strong>Kích hoạt plugin</strong></p>
   
       <p>Quay lại trang quản trị của WordPress, vào mục <code>Plugins</code> và tìm đến plugin <strong>My Custom Block</strong>. Kích hoạt plugin này.</p>
   
   </li>
   
   <li>
   
       <p><strong>Thêm block vào bài viết</strong></p>
   
       <p>Giờ đây, bạn có thể thêm custom block của mình vào bài viết hoặc trang. Mở trình chỉnh sửa Gutenberg, nhấn vào biểu tượng <code>+</code> để thêm block mới, và tìm kiếm <strong>My Custom Block</strong>.</p>
   
   </li>
   
   
   

Chỉnh sửa và tùy biến block

Bạn có thể mở rộng khả năng của custom block bằng cách thêm các thuộc tính và đặc tính khác nhau. Ví dụ, bạn có thể thêm tùy chọn để chọn màu sắc, kích thước, hay các thuộc tính khác cho block. Để làm điều này, hãy sửa đổi file block.js của bạn.

1. 
   

   Thêm thuộc tính màu sắc

   
   

   
   
           attributes: {
   
               content: {
   
                   type: 'string',
   
                   source: 'html',
   
                   selector: 'p',
   
               },
   
               color: {
   
                   type: 'string',
   
                   default: '#000000',
   
               },
   
           },
   
           

   
   


2. 
   

   Thêm control trong phần edit

   
   

   
   
           import { ColorPalette } from '@wordpress/components';
   
       return (
   
           <div>
   
               <RichText
   
                   tagName="p"
   
                   style={ { color: attributes.color } }
   
                   onChange={ ( content ) => setAttributes( { content } ) }
   
                   value={ attributes.content }
   
               />
   
               <ColorPalette
   
                   colors={ [{ name: 'Black', color: '#000000' }, { name: 'Red', color: '#FF0000' }] }
   
                   value={ attributes.color }
   
                   onChange={ ( color ) => setAttributes( { color } ) }
   
               />
   
           </div>
   
       );
   
       </pre>
   
   </li>
   
   
   

Kết luận

Việc tạo custom block trong WordPress với Gutenberg không hề khó khăn nếu bạn làm theo các bước một cách cẩn thận. Bạn có thể thoải mái tùy chỉnh và mở rộng block của mình theo nhu cầu. Theo thời gian, việc tạo và quản lý các custom block sẽ giúp bạn tối ưu hóa quy trình làm việc và cung cấp cho người dùng những trải nghiệm tốt hơn. Hy vọng bài viết này đã giúp bạn có thêm kiến thức để tạo custom block cho theme của mình!