Bài 11: Cách thêm Style vào Block

Như vậy để xây dựng một Block cơ bản theo Block Editor Handbook, ta sẽ cần làm những bước sau

Xây dựng một Scaffold Block theo cấu trúc mong muốn (Static hoặc Dynamic)
Xây dựng các meta data của block.json, tất cả nhằm mục đích
Đăng ký Block ở file PHP chính (tên block).php
Xác định rõ plugins sẽ tạo file nào (index.js, editor.js, save.js….)
Xác định icons, danh mục để sử dụng Block theo ý muốn
Đăng ký Block ở file (tên plugin).php
Dẫn ra file index.js, đổ ra 2 function là Edit và Save, thường sẽ đổ ra 2 files là edit.js và save.js, đối với Static Block sẽ sử dụng function Save, đối với Dynamic Block sẽ cài hàm render.php yêu cầu dữ liệu từ Server.

Hãy cùng đến với hướng dẫn tiếp theo, cách thêm phong cách hiển thị vào Block, lưu ý là bài viết này Nam Digital đi dịch từ Block Editor Handbook, đồng thời cũng có viết thêm những ý kiến và quan điểm bản thân khi triển khai với Block Themes

Phương pháp Inline Style

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
    edit() {
        const greenBackground = {
            backgroundColor: '#090',
            color: '#fff',
            padding: '20px',
        };

        const blockProps = useBlockProps( { style: greenBackground } );

        return (
            <p { ...blockProps }>Hello World (from the editor, in green).</p>
        );
    },
    save() {
        const redBackground = {
            backgroundColor: '#900',
            color: '#fff',
            padding: '20px',
        };

        const blockProps = useBlockProps.save( { style: redBackground } );

        return (
            <p { ...blockProps }>Hello World (from the frontend, in red).</p>
        );
    },
} );

Ta lồng những thuộc tính hiển thị vào 2 biến là greenBackground và redBackground, lưu ý là ta chạy các hàm này ở JSX – React nên cách viết các thuộc tính hiển thị sẽ khác một chút so với CSS, nhưng cơ bản ta cũng hiểu chúng khá rõ. Tiếp đó, ta truyền thuộc tính style của useBlockProps gán vào 2 biến đó để thể hiện ở các ngữ cảnh khác nhau

Edit sẽ thể hiện style tại editor
Save sẽ thể hiện kiểu dữ liệu được lưu vào Database

Lưu ý hàm phía trên là viết gộp vào hàm index.js, thay vì tách ra làm 2 function riêng rẽ ở 2 files edit.js và save.js.

Phương pháp Block classname

Phương pháp Inline style sẽ phù hợp với những Block có ít phong cách hiển thị, trong trường hợp muốn xây dựng giải pháp style toàn diện, tốt nhất ta nên sử dụng phương pháp Block classname để gọi Block tới file style tương ứng, như vậy sẽ hay và dễ quản lý hơn.

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
    edit() {
        const blockProps = useBlockProps();

        return (
            <p { ...blockProps }>Hello World (from the editor, in green).</p>
        );
    },
    save() {
        const blockProps = useBlockProps.save();

        return (
            <p { ...blockProps }>Hello World (from the frontend, in red).</p>
        );
    },
} );

Như ở ví dụ này, class bọc lấy Block sẽ có dạng wp-block-gutenberg-examples-example-02-stylesheets, với gutenberg-examples-example-02-stylesheets là tên của Block, lúc này bạn có thể style nó trong file style.css, nhưng Nam không recommend hướng này, bởi nó sẽ khiến ngay cả không có Block đó trên trang, style đó vẫn tải.

Như ở hướng dẫn tạo block, ta cần tác động vào block.json để gọi tới file cần tải khi Block được tạo ra.

{
    "apiVersion": 3,
    "name": "gutenberg-examples/example-02-stylesheets",
    "title": "Example: Stylesheets",
    "icon": "universal-access-alt",
    "category": "layout",
    "editorScript": "file:./block.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

Như vậy editorStyle là trình hiển thị ở đầu editor, khi soạn thảo, những giao diện sẽ được tải ở đây. Tại editor.css ta muốn tải những style sau:

/* green background */
.wp-block-gutenberg-examples-example-02-stylesheets {
    background: #090;
    color: white;
    padding: 20px;
}

Tại style.css, để tải phong cách hiển thị ra đầu Frontend – đầu nhìn của website ta chọn thuộc tính sau

/* red background */
.wp-block-gutenberg-examples-example-02-stylesheets {
    background: #900;
    color: white;
    padding: 20px;
}

Đối với việc phải tải nhiều Style, bạn có thể tải Block đó ở đầu plugins-name.php bằng các hàm

wp_enqueue_style
enqueue_block_editor_assets
enqueue_block_assets