Gutenberg là gì? Cách sử dụng cơ bản, Ưu và Nhược điểm của Gutenberg

Cách đây không lâu, phiến bản WordPress 5.0 cũng đã giới thiệu trình soạn thảo mới Block Edit (Gutenberg), vậy Gutenberg là gì? Tại sao nên dùng nó? sẽ được Blog Hướng Dẫn chia sẻ trong bài viết này

Gutenberg là gì?

Gutenberg thường được gọi là Block Edit là trình soạn thảo bài viết mới nhất của WordPress, Gutenberg được cập nhật trên WordPress từ phiên bản WordPress 5.0, là trình soạn thảo hiện đại, nhiều tính năng mới và rất dễ sử dụng.

gutenberg là gì? cách sử dụng block edit 2435

Cha đẻ của trình soạn thảo bài viết mới Gutenberg là Johannes Gutenberg, chính vì vậy nên tên của trình soạn thảo bài viết mới này của WordPress cũng được lấy tên là Gutenberg, chính là tên của người tạo ra nó.

Tại sao bạn nên dùng Gutenberg?

Trình soạn thảo bài viết cũ Classic Editor sẽ ngừng hỗ trợ

Đây là một thông tin đáng buồn cho những bạn yêu thích sự cổ điển của WordPress, và mình cũng là một FAN của Classic Editor, tuy nhiên cuộc chơi nào thì cũng sẽ đến hồi kết, đã đến lúc chúng ta nên thay đổi, chấp nhận cái mới.

Mọi nổ lực thay đổi của WordPress đều có lý do của nó, thật không thể phủ nhận, WordPress ngày càng tốt hơn, hỗ trợ tốt hơn cho chúng ta trong quá trình soạn thảo bài viết, tại sao mình lại nói như vậy? Hãy cùng Blog Hướng Dẫn phân tích qua các ưu và nhược điểm của trình soạn thảo mới Gutenberg nhé:

Ưu và nhược điểm của trình soạn thảo bài viết mới Gutenberg

gutenberg là gì? cách sử dụng block edit 2428

Sau đây là một số ưu và nhược điểm của trình soạn thảo bài viết mới Gutenberg mời các bạn tham khảo:

Như vậy có thể thấy được những ưu điểm vượt trội của Gutenberg, là khả năng mở rộng bất tận nhờ Plugin hoặc tự phát triển Block cho riêng mình, tuy nhiên nó vẫn còn khá nhiều nhược điểm, cái mình thấy rõ nhất là chậm khi sử dụng quá nhiều Block trên 1 bài viết.

Hướng dẫn sử dụng trình soạn thảo Block Edit (Gutenberg)

Cài đặt Gutenberg

Đối với trình soạn thảo bài viết mới Gutenberg thì sẽ được tích hợp sẵn trong WordPress từ bản 5.0 trở đi, điều này đồng nghĩa với việc bạn muốn sử dụng Gutenberg thì phải nâng cấp WordPress lên phiên bản 5.0 hoặc cao hơn, tuy nhiên mình khuyên các bạn nên nâng cấp WordPress lên bản mới nhất.

Để tiện cho quá trình sử dụng Gutenberg các bạn mới bắt đầu nên chuyển WordPress về bản Tiếng Việt để dễ sài nhé, cách chuyển các bạn vào Setting -> Garenal -> Language -> Chọn Tiếng Việt sau đó Save lại nhé.

gutenberg là gì? cách sử dụng block edit 2403

Sử dụng Block Edit Gutenberg cơ bản cho người mới

Các bạn sẽ thiết lập một số tùy chọn trước khi sử dụng như hình ở dưới, để tiện cho quá trình sử dụng:

Các bạn vào Biểu tượng … dọc và thiết lập như hình dưới đây:

gutenberg là gì? cách sử dụng block edit 2404

Các bạn vào Biểu tượng … dọc -> chọn Thiết lập -> Tổng quan và cài đặt như hình dưới đây:

gutenberg là gì? cách sử dụng block edit 2405

Tiếp theo bạn chọn Giao diện, và cài đặt như hình:

gutenberg là gì? cách sử dụng block edit 2406

Bạn chọn tiếp Block và thiết lập như hình dưới:

gutenberg là gì? cách sử dụng block edit 2407

Danh sách, chính là phần nâng cao, ở đây nếu bạn không sử dụng phần nào thì tắt đi cho gọn nhé, không cần phải làm theo hình dưới đâu nhé.

gutenberg là gì? cách sử dụng block edit 2408

Như vậy là đã xong Bước chuẩn bị rồi, bây giờ vào vấn đề chính nè:

gutenberg là gì? cách sử dụng block edit 2410

Thêm văn bản bạn sẽ chọn văn bản như hình.

gutenberg là gì? cách sử dụng block edit 2411

Sau khi nhập văn bản, nếu bạn muốn chuyển sang Block khác thì chọn theo hình ở dưới:

gutenberg là gì? cách sử dụng block edit 2412

Còn muốn di chuyển Block lên xuống thì bạn nhấn vào 2 mũi tên trong hình để lên và xuống:

gutenberg là gì? cách sử dụng block edit 2413

Định dạng canh lề, in đậm và in nghiên thì bạn chọn các công cụ như hình dưới:

gutenberg là gì? cách sử dụng block edit 2414

Muốn chèn liên kết thì bạn bôi đậm vùng cần chèn bằng cách kéo chuột trái và chọn vào biểu tượng liên kết:

gutenberg là gì? cách sử dụng block edit 2415

Nếu muốn sử dụng các tính năng nâng cao của Block bạn nhấn vào biểu tượng như hình dưới:

gutenberg là gì? cách sử dụng block edit 2416

Muốn xóa, sao chép, di chuyển Block thì bạn nhấn vào nút … nằm dọc như hình dưới:

gutenberg là gì? cách sử dụng block edit 2417

Các tùy chọn màu sắc, cỡ chữ, chiều cao chữ sẽ nằm bên side bar bên phải màn hình:

gutenberg là gì? cách sử dụng block edit 2418

Để cài đặt thông tin bài viết bạn nhấn vào Tab bài viết, các thông tin bao gồm, danh mục, đường dẫn tĩnh…

gutenberg là gì? cách sử dụng block edit 2419

Để lưu nháp, đăng bài thì bạn sẽ sử dụng công cụ phía trên, góc phải màn hình:

gutenberg là gì? cách sử dụng block edit 2420

Cài đặt thông tin SEO bài viết bạn nhấn vào biểu tượng Rank Math như hình dưới:

gutenberg là gì? cách sử dụng block edit 2421

Mình hướng dẫn cách sử dụng Block Edit cơ bản thôi, chứ hướng dẫn toàn bộ thì bài viết này dài lắm, các bạn từ từ tìm hiểu thêm nhé, nếu muốn mình làm video hướng dẫn chi tiết, bạn có thể bình luận tại bài viết này.

Các phím tắt nhanh của Gutenberg

Dưới đây là bảng 25 phím tắt nhanh trên Windows của trình soạn thảo mới Gutenberg dành cho các bạn thích sử dụng phím thay vì sài chuột:

gutenberg là gì? cách sử dụng block edit 2424
gutenberg là gì? cách sử dụng block edit 2425

Tối ưu hóa tốc độ Block Edit Gutenberg bằng Code Function

Trong Gutenberg mặc định sẽ load thêm thư viện CSS, nó bao gồm các Block tùy biến giao diện, tuy nhiên nếu bạn không cần dùng các Block đó thì có thể dùng Code để ngăn việc load File CSS thừa gây nặng Web.

Các bạn vào Giao diện -> Chỉnh sửa giao diện -> Chọn file function.php của giao diện đang sử dụng và thêm code dưới dây vào và nhấn Cập nhật tập tin để hoàn thành:

Nếu bạn không biết File function là gì? Thì có thể tham khảo bài viết: Theme là gì? Cách cài đặt theme WordPress cơ bản

add_action( 'wp_enqueue_scripts', 'wptangtoc_gutenberg_remove_block_css', 100 );
function wptangtoc_gutenberg_remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // WordPress core
wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
}

Trong trường hợp bạn dùng WooCommerce thì thêm vào code này nữa nha:

function wptangtoc_disable_woocommerce_block_styles() {
	wp_deregister_style( 'wc-blocks-vendors-style' );
  }
  add_action( 'wp_enqueue_scripts', 'wptangtoc_disable_woocommerce_block_styles' );

Như vậy là đã rút gọn lại được Gutenberg rồi, tuy nhiên hướng dẫn này chỉ dành cho các bạn đã rành về WordPress, còn các bạn mới dùng thì có thể bỏ qua.

Kết luận

Việc thay đổi luôn là điều cần thiết, đôi khi chúng ta cần phải học cách chấp nhận cái mới tốt hơn, trong WordPress cũng vậy, mọi tình năng đều được nghiêm cứu, phát triển từng ngày, nên mình nghĩ là nó không thừa đâu, bạn nên dần dần học cách sử dụng Gutenberg đi cho bắt kịp với xu hướng.

Nếu bạn vẫn quyết tâm sử dụng trình soạn thảo cũ, thì mình có cách, đây là bài hướng dẫn quay lại trình soạn thảo bài viết cũ dành cho bạn: Code sử dụng trình Edit và Widget cũ của WordPress

Mọi đóng góp và ý kiến về bài viết bạn có thể bình luận ở dưới bài viết này, đừng quên chia sẻ nếu bài viết hay và hữu ích nhé.!

Bài viết liên quan
  • Các Plugin cần thiết cho WordPress
  • Các bước cấu hình gửi Mail trong WordPress Chi Tiết Nhất
  • Tạo menu dọc với Plugin OT Flatsome Vertical Menu
  • Tổng hợp tất cả Hook Flatsome thường dùng
  • So sánh WordPress.Org và WordPress.com
  • Hướng dẫn Cài Đặt Theme Flatsome Chi Tiết Từng Bước
  • WordPress là gì? Ưu nhược điểm của WordPress
  • Cài đặt WordPress trên Localhost XAMPP chi tiết từng bước
  • Viết một bình luận