Tìm hiểu trình soạn thảo Gutenberg sẽ có mặt trong phiên bản WordPress 5.0

Nếu bạn giống với phần đông các blogger, có thể bạn đang sử dụng WordPress để tăng sức mạnh cho blog của mình. WordPress hiện không chỉ là một nền tảng tốt nhất mà nó còn là một hệ quản trị nội dung (CMS – Content Managerment System) phổ biến nhất để viết blog. Hiện có 30% số trang web trên toàn thế giới sử dụng WordPress. Nếu bạn muốn biết các lý do vì sao sử dụng nền tảng WordPress để tạo blog/website, hãy đọc bài viết này.

Tôi vừa đọc được một tin tức rất mới về hệ quản trị nội dung lớn nhất thế giới này. Nếu tin tức này là thật thì nó sẽ làm thay đổi cách mà chúng ta viết và chỉnh sửa bài đăng trên blog. Sự thay đổi này đến từ một trình soạn thảo mới có tên gọi là Gutenberg. Đây là một dự án đầy tham vọng nhằm thay thế trình soạn thảo mặc định đang dùng của WordPress.

Trong bài viết này tôi sẽ giới thiệu đến bạn trình soạn thảo mới này, giúp bạn có cái nhìn tổng quan về cách thức hoạt động của nó. Tôi cũng sẽ cho bạn biết khi nào bạn có thể trải nghiệm trình soạn thảo mới này, và chia sẽ một vài chi tiết thú vị khác có liên quan.

Trình biên tập WordPress Gutenberg là gì?

Gutenberg là một trình biên tập được thiết kế mới một cách hoàn toàn nhằm thay thế cho trình biên tập hiên tại là TinyMCE. Nó lấy tên của một nhà phát minh người Đức Johannes Gutenberg, người đã phát minh ra máy in cơ khí vào năm 1450. Phát minh của ông đã tạo ra sự thay đổi to lớn đối với ngành xuất bản báo chí. Và với tên gọi Gutenberg, trình biên tập mới ra mắt cùng phiên bản WordPress 5.0 cũng sẽ giúp cho các blogger xây dựng các trang web một cách nhanh chóng, dễ dàng và chuyên nghiệp.

Mặc dù trình biên tập TinyMCE hiện tại cũng tương đối tốt và đáp ứng nhu cầu soạn thảo, chỉnh sửa thông thường nhưng mục tiêu của Gutenberg là làm cho mọi thứ trể nên đơn giản và dễ dàng hơn nữa đối với người dùng phổ thông. Giúp họ tạo ra cấu trúc nội dung bằng cách dùng các khối (Tôi sẽ giải thích kỹ hơn ở phần tiếp theo của bài viết).

Trình biên tập mới sẽ giúp cho việc tạo ra các trang và bài viết với chất lượng trải nghiệm tuyệt vời trở nên đơn giản. Và khái niệm “blocks” sẽ làm cho mọi thứ trở nên đơn giản hơn so với việc sử dụng shortcode, HTML tùy chỉnh. Hiện giờ chúng ta đang sử dụng trình biên tập TinyMCE, nên những gì tôi trình bày ở phía trên có lẽ làm cho bạn cảm thấy hơi xa lạ. Trình biên tập hiện tại TinyMCE nhìn giống như hình bên dưới: TinyMCE Trái lại, trình biên tâp mới Gutenberg nhìn giống như thế này: WordPress Gutenberg Ngoài sự thay đổi bạn có thể dễ dàng nhìn thấy về giao diện thì sự thay đổi thực sự mà Gutenberg mang lại là cách tiếp cận mới trong việc chỉnh sửa nội dung theo khối.

Trình biên tập WordPress Gutenberg làm việc như thế nào?

Nếu bạn đang dùng WordPress thì tôi chắc chắn rằng bạn không còn xa lạ gì với cách thức hoạt động của trình biên tập hiện tại. Bạn có một khung soạn thảo duy nhất để viết bài, chèn ảnh và thêm video. Gutenberg thay đổi bằng cách cho phép bạn sử dụng nhiều khối trong lúc viết bài. Một “khối” có thể chứa được khá nhiều thứ. Ví dụ: Các thứ dưới đây có thể được xem như là một khối:

  • Một đoạn văn bản
  • Một hình ảnh
  • Một video được chèn vào
  • Một câu trích dẫn
  • Một nút bấm

Dưới đây là ví dụ về việc các khối khác nhau hoạt động. Trong hình động phía bên dưới bạn có thể thấy rằng tôi đã thêm 4 khối khác nhau:

  • Hai khối văn bản
  • Một khối hình ảnh
  • Một khối video

what-is-the-wordpress-gutenberg-editor-3 Vì mỗi khối là một thực thể riêng biệt nên bạn có thể dễ dàng chọn màu nền cho từng khối. Nhưng đây mới là điều thực sự tuyệt vời của khối: các nhà phát triển có thể viết các khối cho riêng mình. Từ đó dẫn đến việc xóa bỏ các mã ngắn (shortcode) và mã nhúng (embed code).

Ví dụ: Thay vì phải sử dụng shortcode để thêm thư viện ảnh vào bài viết bạn chỉ cần sử dụng khối ảnh để  và xem trước trên ngay trình biên tập.

Tóm lại trình biên tập mới Gutenberg nằm đâu đó giữa trình biên tập TinyMCE hiện nay và các trình tạo trang mạnh mẽ. Nó hoạt động tương tự như Website Builder: Divi hay Thrive Architect.

Với nó bạn có thể tạo ra các trang cuốn hút hơn mà không cần biết nhiều về code. Điều đó sẽ tạo ra hàng loạt tính năng hữu ích cho blog của bạn.

Khi nào trình biên tập Gutenberg chính thức phát hành?

Theo kế hoạch trình biên tập Gutenberg sẽ được ra mắt như một phần của phiên bản WordPress 5.0.

Đây là phiên bản WordPress chính thức tiếp theo (hiện đang là phiên bản 4.9.x). Tôi không biết chính xác ngày phát hành phiên bản WordPress 5.0. Tất cả những gì tôi được biết là nó sẽ phát hành vào trong năm 2018.

Nếu khả quan có thể nó sẽ được phát hành vào tháng 6/2018. Tuy nhiên theo tôi thấy nếu tình huống này xảy ra có lẽ đội ngũ phát triển WordPress 5.0 sẽ không có đủ thời gian để hoàn thiện và tích hợp trình biên tập Gutenberg vào WordPress 5.0. Vì vậy tháng 6/2018 có lẽ chỉ là một trong những dự định mà thôi.

Bạn có phải buộc sử dụng Gutenberg khi WordPress 5.0 đươc phát hành?

Trong khi bộ soạn thảo Gutenberg sẽ mang lại cho bạn sự linh hoạt thì tôi hiểu rằng bạn sẽ không muốn sử dụng nó ngay. Vì có thể bạn sẽ phải bỏ ra một khoản thời gian để làm quen với bộ soạn thảo mới này.

Cái gì xài đã quen thuộc rồi thì thường dễ làm chủ hơn. Những điều mới mẻ tuy tốt nhưng phải cần có thời gian để tìm hiểu và học cách sử dụng.

Nói đến việc này làm tôi nhớ tới thời gian khi chuyển từ Office 2003 sang sử dụng Office 2007. Mọi thứ đều mới mẻ và hỗn độn. Có những thứ khi ở phiên bản cũ chỉ vài bước là có thể làm xong thì sang phiên bản mới phải mày mò rất lâu.

Có lẽ điều này sẽ lặp lại khi Gutenberg ra mắt. Nhưng cũng đừng quá lo lắng. Trong khi Gutenberg sẽ thay thế trình biên tập TinyMCE mặc định thì bạn vẫn có thể cài đặt plugin Classic Editor plugin vì:

  • Nó có thể thay thế hoàn toàn trình biên tập Gutenberg và TinyMCE.
  • Cho phép truy cập vào cả Gutenberg và TinyMCE thông qua việc thêm liên kết thay thế đến màn hình các trang và bài viết.

Làm thế nào để trải nghiệm phiên bản Gutenberg Beta ngay lúc này?

Như tôi đã nói ở trên. Gutenberg chỉ được phát hành chính thức như một phần của phiên bản WordPress 5.0. Nhưng điều đó không có nghĩa là bạn phải đợi cho đến khi đó mới có thể thử nghiệm trình biên tập này.

Trình biên tập Gutenberg thật ra đã được xuất bản công khai vào năm 2017 như là một WordPress plugin. Đến thời điểm 3/2018, plugin này đã có 7.000 lượt cài đặt và kích hoạt. Bạn có thể tải nó về tại đây.

Điều đó có nghĩa là bạn có thể tải nó về cài đặt và thử nghiệm như các plugin khác. Tuy nhiên bạn nên nhớ rằng mặc dù trình biên tập này đã có nhiều cải tiến đáng kể nhưng hiện nó vẫn còn trong giai đoạn thử nghiệm.

Vì lý do an toàn và bảo mật, tôi khuyên bạn không nên cài đặt và sử dụng nó trên blog/website thực của mình. Hãy tạo ra môi trường localhost hoặc stagging để cài đặt và thử nghiệm plugin này.

Hãy đọc hai bài viết bên dưới để biết cách cài đặt localhost và môi trường stagging nếu bạn là người mới:

Đó là hai cách mà bạn có thể trải nghiệm plugin mới mà không làm ảnh hưởng đến blog/website của mình. Hãy cài đặt và kích hoạt plugin Gutenberg như các plugin khác. Nếu bạn chưa biết các cài đặt plugin hãy đọc bài viết này.

Sau khi bạn đã cài đặt và kích hoạt plugin Gutenberg, bạn sẽ thấy một menu có tên là Gutenberg. Nó có 03 menu con là Demo, Feedback, Documentation

  • Demo: Cho phép bạn chỉnh sửa các bài viết mẫu mà WordPress đã đăng
  • Feedback: Cho phép bạn phản hồi về plugin và đưa ra các vấn đề cần hỗ trợ
  • Documentation: Giới thiệu đầy đủ các thông tin có liên quan đến plugin (dành cho các nhà phát triển).

Một khi bạn đã cài đặt và kích hoạt plugin Gutenberg, trang web của bạn sẽ tự động dùng Gutenberg để biên tập các trang và bài viết mới. Nhưng nếu cần, bạn vẫn có thể truy cập vào trình biên tập Classic Editor bằng cách dùng menu xổ xuống của nút Add New. gutenberg editor options

Một số tính năng chính

Tính năng chính của plugin Gutenberg là cung cấp cho bạn các khối để bạn sắp xếp bố cục cho trang web của mình một cách chuyên nghiệp mà không cần am hiểu nhiều về code.

Bạn kết hợp các khối khác nhau để biên soạn nội dung cho website của mình. Một khối có thể chứa bất kỳ phần tử nào trong bài viết của bạn như: tiêu đề (heading), đoạn văn (paragraph), hình ảnh (image), bảng (table), trích dẫn (quote), danh sách (list), …

Với trình biên tập mới bạn sẽ có nhiều không gian hơn để viết bài. Thậm chí bạn có thể mở rộng không gian làm việc bằng cách ẩn cột bên phải bằng cách nhấp vào biểu tượng Setting. Điều này rất hữu ích nếu bạn làm việc trên màn hình kích cỡ nhỏ. Bạn sẽ không còn nhìn thấy thanh công cụ TinyMCE nữa. Trong phần Setting ở bên phải, có hai thẻ:

  • Document: Cho phép bạn chọn chế độ hiển thị, trạng thái xuất bản, định dạng, chuyên mục, thẻ, ảnh tiêu biểu, trích dẫn…Nó giống với những gì hiện nay chúng ta đang dùng.
  • Block: Khi bạn kích chọn tùy chọn này, trình biên tập sẽ hiển thị các cài đặt và tùy chỉnh có thể áp dụng cho khối đó.

Bạn có thể chọn một khối mình muốn sau đó thêm vào bài viết bằng cách nhấp vào hình dấu (+) ở phía trên đầu trình biên tập hoặc kích chuột trong nội dung bài viết nơi bạn muốn chèn khối.

Sau khi nhấp vào dấu (+), bạn sẽ được cung cấp danh sách các khối có thể chèn vào bài viết của mình.

  • Recent: Các khối mà bạn thường sử dụng.
  • Block: Các khối có thể chèn vào bài viết: Commont Blocks (Các khối phổ biến), Formatting (các khối liên quan đến code), Layout Blocks (Các khối liên quan đến bố cục), Widget (Chèn các tiện ích).
  • Embed: Cung cấp các tùy chọn để bạn nhúng các thành phần khác nhau từ các nền tảng nổi tiếng như Youtube, Instagram, Vimeo, Slideshare, VideoPress.
  • Saved: Các khối mà bạn đã lưu bằng cách nhấp vào “Convert to reusable block”.

Thêm, chỉnh sửa một khối

Trình biên tập Gutenberg được thiết kế để làm cho trải nghiệm thêm và chỉnh sửa nội dung trở nên dễ dàng. Khi bạn thêm hoặc chọn một khối để chỉnh sửa, một trình đơn sẽ xuất hiện ở phía trên của khối với các tùy chọn khác nhau.

gutenberg top

  1. Dưới đây là các bước để thêm nội dung vào bài viết của bạn.
  2. Đăng nhập vào WordPress Dashboard
  3. Vào menu Post » Add New
  4. Nhập tiêu đề cho bài viết
  5. Chọn khối cho nội dung. Bạn có thể tìm thấy các tuỳ chọn thêm khối bằng cách rê chuột qua điểm trung tâm bên dưới của khối. Bạn sẽ thấy biểu tượng dấu cộng (+). Trong ví dụ này tôi thêm một khối ảnh cho bài viết.
  6. Sau khi chọn khối ảnh, bạn cần chọn hình ảnh cho nó.
  7. Khi đã thêm ảnh xong, bạn có thể tiếp tục thêm các khối khác cho đến khi kết thúc nội dung bài viết. Khi đã hoàn thành bài viết hoặc trang, nhấp vào nút Update hoặc Publish ở phía góc phải trên.

Di chuyển và căn chỉnh khối

Bạn có thể dễ dàng thay đổi vị trí của một khối bằng cách sử dụng dấu mũi tên lên, xuống phía bên trái của khối. Có thể hiện tại bạn sẽ mất nhiều thời gian để di chuyển một khối vào đúng vị trí mà mình mong muốn.

Nhưng có lẽ đội ngũ phát triển Gutenberg sẽ cung cấp tính năng kéo thả trong tương lai khi nó được phát hành cùng WordPress 5.0.

di chuyen block trong bo soan thao gutenberg

Khi một khối được chọn, bạn sẽ thấy các tùy chọn cho phép bạn căn chỉnh văn bản của khối. Tuy nhiên chức năng căn chỉnh hoạt động không chính xác bằng việc sử dụng mã HTML và CSS. Nếu văn bạn trong một khối dài hơn các khối khác, kết quả căn chỉnh nhìn có vẻ rất “dị”.

can chinh block trong bo soan thao gutenberg

Visual Editor và Text Editor

Khi sử dụng trình biên tập cũ, bạn sẽ thấy có hai chế độ soạn thảo là Visual Editor và Text Editor. Trong chế độ Visual Editor bạn sẽ nhìn thấy các công cụ phục vụ cho việc soạn thảo ở phía trên. Bạn chỉ cần nhấp vào lệnh cần áp dụng cho dữ liệu trong bài viết của mình. Còn ở chế độ Text Editor bạn sẽ nhìn thấy các mã HTML, CSS… giúp bạn tạo nên các hiệu ứng, định dạng kiểu, bố cục cho bài viết.

Điều này cũng tương tự trên bộ soạn thảo Gutenberg như hình bên dưới:

bo soan thao gutenberg

Các khối được tạo bởi bộ soạn thảo Gutenberg đều có mã HTML tương ứng. Việc này giúp bạn tận dụng tối đa lợi thế của bộ soạn thảo Gutenberg khi tạo bố cục bài viết nhưng vẫn muốn sử dụng thế mạnh của trình soạn thảo cũ.

Các tính năng mở rộng khác của bộ soạn thảo Gutenberg

Ngoài các tính năng cơ bản được đề cập ở trên, bộ soạn thảo Gutenberg còn có một số tính năng mở rộng khác giúp bạn nâng cao hiệu quả trong quá trình viết bài.

Mục lục

Bộ soạn thảo Gutenberg lấy các tiêu đề H1, H2 trong bài viết của bạn và hiển thị, liệt kê ở thanh bên. Nó giúp cho bạn dễ dàng kiểm soát, theo dõi trong quá trình soạn thảo.

Bạn có thể chọn và di chuyển đến phần tiêu đề một cách dễ dàng. Nó cũng giúp tiết kiệm thời gian cuộn trang đối với những người dùng trên các thiết bị di động.

Neo văn bản

Thẻ Anchor cho phép bạn liên kết trực tiếp đến các phần khác trong bài viết. Giống như cách tạo mục lục, bạn có thể tạo các tiêu đề và gán các thẻ Anchor cho nó. Các thẻ Anchor này cho phép độc giả dễ dàng di chuyển đến từng mục trong bài viết.

Khi bạn chọn một tiêu đề của một khối trong bài viết, sẽ xuất hiện tùy chọn HTML Anchor. Hãy đặt tên và nhấp vào nút Copy Link để tạo liên kết đến tiêu đề này.

Tùy chỉnh, bổ sung CSS

Hầu hết tất cả các khối đều có tùy chọn để thêm các mã CSS định dạng kiểu. Nó cho phép bạn ghi đè hoặc tùy biến định dạng kiểu mặc định của một khối mặc định trong bộ soạn thảo Gutenberg.

Tạo khối nhanh chóng bằng cách nhập tên của các khối

Bạn có thể dễ dàng tạo một khối trong Gutengerg bằng cách nhấp vào các nút như đã trình bày ở trên. Tuy nhiên để tiết kiệm thời gian, bạn chỉ cần gõ theo cú pháp /TÊN-KHỐI. Một hộp gợi ý hiện ra giúp bạn dễ dàng tìm được một khối có liên quan. Ví dụ: Để chèn một hình ảnh bạn có thể gõ /image.

Chỉnh sửa trực tiếp mã nguồn

Nếu muốn chỉnh sửa mã của các khối, bạn chỉ cần nhấp vào nút ba chấm ở phía góc phải trên. Sau đó chọn Code Editor.

Ưu và khuyết điểm của bộ soạn thảo Gutenberg

ƯU ĐIỂMKHUYẾT ĐIỂM
Đơn giản hóa quá trình soạn thảoĐang ở trong giai đoạn phát triển chưa sẵn sàng cho blog/website đang hoạt động
Sử dụng định nghĩa Khối trong việc soạn thảo nội dungCó một số đánh giá chưa cao
Dễ dàng xây dựng các bố cục phức tạpCòn tồn tại nhiều lỗi
Các công cụ hiển thị theo ngữ cảnh chỉ xuất hiện khi bạn cần đến chúngChưa có tính năng kéo thả trong quá trình di chuyển các khối
Nhúng nội dung từ các website khác một cách nhanh chóng

Lời kết

Việc chuyển từ sử dụng TinyMCE sang bộ soạn thảo Gutenberg chắc chắn sẽ có một số điều mới mẻ mà bạn sẽ phải học hỏi và thích nghi. Nhưng một khi đã quen thuộc với giao diện mới và làm chủ được nó bạn sẽ có một công cụ vô cùng mạnh mẽ để sáng tạo nội dung trên blog/website của mình.

Bạn thấy bộ soạn thảo Gutenberg mới này như thế nào và nghĩ gì về nó? Bạn thích trình soạn thảo nào hơn? TinyMCE hay Gutenberg?

Hãy cho tôi biết ý kiến của bạn bằng cách để lại bình luận phía bên dưới. Tôi muốn nhận được chia sẽ của bạn về kinh nghiệm sử dụng bộ soạn thảo mới này.

Nếu bạn thấy bài viết này hữu ích đừng quên Like và Share!

Hẹn gặp lại bạn trong các bài viết tiếp theo.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Plugins Themes Thủ thuật
Hướng dẫn tạo mục lục cho bài viết trong wordpress
Hướng dẫn tạo mục lục cho bài viết trong WordPress
Brute Force Attack là gì cách bảo vệ website của bạn trước các cuộc tấn công brute force attack
Hướng dẫn bảo vệ website của bạn khỏi Brute Force Attack
Hướng dẫn thêm xác thực hai yếu tố miễn phí cho WordPress
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Cách đặt tên miền
Tên miền là gì? Cách chọn tên miền cho blog WordPress
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?