Sonata Extra Bundle: tích hợp trình chỉnh sửa Gutenberg

Giới thiệu

Tích hợp trình soạn thảo Gutenberg vào Sonata bao gồm việc sử dụng thư viện 'Automatic Isolated block editor'. Hướng dẫn này chi tiết các bước cần thiết để cài đặt và cấu hình trình soạn thảo Gutenberg trong ứng dụng Sonata của bạn.

Màn hình

Cài đặt thư viện

Trình soạn thảo Gutenberg dựa trên một thư viện 'Trình chỉnh sửa khối tự động cô lập'. Bạn có thể tải thư viện bằng cách sử dụng liên kết sau: Thư viện trình chỉnh sửa các khối tự động cách ly

Các bước cài đặt

1. Tải xuống và cài đặt thư viện :

Sử dụng dòng lệnh để tải xuống và cài đặt các tài nguyên của thư viện Gutenberg:

bin/console sonata:extra:install-gutenberg
bin/console assets:install

2. Thêm một trường widget Gutenberg vào các chủ đề biểu mẫu Twig :

Cập nhật của bạn twig.yaml cấu hình để bao gồm trường widget Gutenberg :

#config/packages/twig.yaml
twig:
    form_themes:
        - '@PartitechSonataExtra/Form/gutenberg_field.html.twig'

Sử dụng Gutenberg trong Sonata Admin

Cấu hình loại biểu mẫu

Triển khai loại biểu mẫu Gutenberg trong lớp quản trị Sonata của bạn:

<?php

namespace App\Admin;

use App\Form\Type\GutenbergType;
use Sonata\AdminBundle\Form\FormMapper;
// ... other uses

class YourEntityAdmin extends AbstractAdmin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('yourField', GutenbergType::class, [
                'label' => 'Your Field',
                // ... other options
            ]);
    }
}

Khối Gutenberg

Trình soạn thảo Gutenberg đi kèm với nhiều khối mặc định:

Văn bản

• cốt lõi/đoạn văn
• "core/trích dẫn"
• core/định dạng trước
• nhân/câu
• cốt lõi/danh sách
• core/element-danh-sach

Truyền thông

• cốt lõi/hình ảnh
• noyau/audio
• cốt lõi/đoạn video
• cốt lõi/thư viện ảnh
• « cốt lõi/văn bản-truyền thông »
• core/tệp
• cốt lõi/bìa

Định dạng

• nhân/mã
• core/html
• "core/trích dẫn"
• nhân/bảng
• các cột văn bản chính

Bố cục trang

• cốt/lấy nút
• core/nút
• nhân/cột
• cốt lõi/các cột
• nhóm/hạt nhân
• core/bộ phân tách
• nhân/khoảng cách
• core/danh-sach-trang
• core/element-danh-sach-trang
• nhân/điều hướng
• core/liên-kết-dẫn-đường
• cốt lõi/thực đơn-dẫn-đường

Tiện ích

• cốt lõi/lưu trữ
• cốt lõi/lịch
• nhân/loại
• hạt nhân/bình luận cuối cùng
• cốt lõi/bài-viết-mới-nhất
• "core/rss"
• core/tìm kiếm
• cốt lõi/mã-ngắn
• «cốt lõi/mối liên kết xã hội»
• cốt lõi/liên kết-xã hội
• lõi/đám-mây-thẻ

Tích hợp

• "cốt lõi/nhúng"
• "cốt lõi/khối"
• "core/mẫu"

Trang web

• «core/logo-site»
• cốt lõi/tiêu đề-của-trang
• cốt lõi/khẩu hiệu của trang web
• trang chủ/liên kết
• core/kết nối-ngắt kết nối

Mẫu

• cốt lõi/truy vấn
• "core/truy vấn-phan-trang"
• core/yêu-cầu-phan-trang-tiếp-theo
• noyau/phỏng-vấn-trang-hóa-số
• "core/yêu-cầu-trang-trước"
• core/yêu-cầu-không-kết-quả
• "core/query-titre"
• core/mô-đun-phần

Bưu điện

• cốt lõi/tiêu đề-bài-báo
• core/trích-xuất-từ-ấn-phẩm
• hạt nhân/hình-ảnh-nổi-bật
• lõi/nội-dung-bài-báo
• core/tác giả-bài-báo
• core/tên-tác-giả
• core/ngày-đăng
• core/termes-post
• core/liên-kết-điều-hướng-tiếp-theo
• core/mô hình-xuất bản
• core/mẫu-bình-luận
• hạt nhân/tiểu sử-tác giả

Bình luận

• cốt lõi/bình luận
• core/tên-tác-giả-của-bình-luận
• core/nội-dung-bình-luận
• "core/ngày-bình-luận"
• core/liên-kết-sửa-bình-luận
• hạt nhân/liên kết-để-đáp-ứng-bình-luận
• core/mô hình-bình luận
• nhận xét/tiêu đề
• "core/comments-pagination"
• core/bình luận-phan-trang-tiếp theo
• core/nhận xét-trang-đánh-số
• core/nhận-xét-trang-trước

Cộng

• "core/plus"
• "trang tiếp theo"
• core/đọc-thêm
• nhân/chi tiết
• core/chú thích cuối trang
• cốt lõi/ảnh đại diện
• core/thiếu

Tải lên phương tiện

Chức năng tải xuống phương tiện được bật theo mặc định. Bạn có thể ghi đè ngữ cảnh của phương tiện như sau:

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'context' => 'default'
    ]);

Tùy chỉnh các khối được phép

Bạn có thể chỉ định những khối nào được phép:

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'allowed_blocks' => [
            "core/pattern",
            "core/categories",
            // ... other allowed blocks
        ],
    ]);

Thêm các họa tiết tùy chỉnh

Bước 1: Tạo một thư mục mẫu

Để thêm các mẫu tùy chỉnh, hãy tạo một thư mục trong cấu hình của dự án của bạn:

• Truy cập vào thư mục cấu hình của bạn: config/
• Tạo một thư mục mới có tên patterns/

Bước 2: Thêm thư viện mẫu của bạn

Trong thư mục mẫu, hãy tạo thư viện mẫu của riêng bạn:

• Tạo một thư mục con cho thư viện của bạn: config/patterns/my-library/
• Bên trong thư mục thư viện này, hãy thêm các tệp mẫu của bạn (ví dụ, pattern1.php). Các tệp có thể được đặt tên theo ý muốn.

Bước 3: Xác định các tệp mẫu

Mỗi tệp mẫu phải chứa một tiêu đề PHP và mã khối Gutenberg. Đây là một ví dụ về tiêu đề và bố cục khối:

<?php
/**
 * Title: My Test Pattern 1
 * Description: Example of a custom pattern
 * Categories: test
 */
?>
<!-- wp:group {"layout":{"type":"constrained","contentSize":"400px"}} -->
<div class="wp-block-group">
    <!-- wp:cover {"url":"[Image URL]","dimRatio":0,"isDark":false,"style":{"border":{"radius":"10px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-cover is-light" style="border-radius:10px">
        <!-- Your block content -->
    </div>
    <!-- /wp:cover -->
</div>
<!-- /wp:group -->

Cuối cùng, cấu trúc nên trông như sau:

--config<br>
-----patterns<br>
--------my-library<br>
-----------------patern1.php<br>
-----------------patern2.php<br>

Bước 4: Cấu hình FormType

1. Nhà nhập khẩu GutenbergPatternsService :

Nhập khẩu GutenbergPatternsService trong lớp quản trị của bạn.

use App\Service\GutenbergPatternsService;

2. Tiêm dịch vụ :

Sử dụng thuộc tính #[Required] để tiêm GutenbergPatternsService :

#[Required]
public function required(GutenbergPatternsService $gutenbergPatterns): void {
    $this->gutenbergPatterns = $gutenbergPatterns;
}

3. *Cấu hình FormMapper :

Thu thập các họa tiết và truyền chúng cho FormMapper :

$patterns = $this->gutenbergPatterns->getPatterns(['my-library']);

$formMapper
    ->add('content', GutenbergType::class, [
        'label' => 'Content',
        'patterns' => $patterns,
        'context' => 'default',
        'allowed_blocks' => [
            "core/pattern",
            "core/categories",
            // ... other allowed blocks
        ],
    ])
;

Điều chỉnh ví dụ cho phù hợp với phiên bản đã cài đặt

Các ví dụ Symfony và Sonata vẫn gắn với các phiên bản được chỉ ra trong bài viết. Symfony 4.x và Symfony 6.2 không còn được duy trì: đối với một dự án hiện tại, hãy sử dụng một nhánh được duy trì và tài liệu tương ứng chính xác với các phụ thuộc của bạn.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Trước khi tiếp tục với mã, hãy kiểm tra các chữ ký, dịch vụ, tuyến đường và mẫu liên quan. Sau đó thêm một bài kiểm tra chức năng bao phủ quyền, mã HTTP và kết quả hiển thị.

Tham chiếu : phiên bản Symfony được hỗ trợ.