Gutenberg Tất cả những gì bạn cần biết về Trình chỉnh sửa mới nhất của WordPress
Gutenberg là một trình chỉnh sửa mới cho WordPress sẽ hoàn toàn thay thế trình soạn thảo hỗ trợ TinyMCE hiện tại. Đây là một dự án đầy tham vọng sẽ thay đổi WordPress theo nhiều cách và sẽ ảnh hưởng đến cả người dùng cuối và nhà phát triển thông thường, cụ thể là những người phụ thuộc vào màn hình chỉnh sửa để làm việc trên WordPress. Đây là vẻ ngoài của nó.
Gutenberg cũng giới thiệu một mô hình mới trong WordPress được gọi là “Khối”.
“Khối” là thuật ngữ trừu tượng được sử dụng để mô tả đơn vị đánh dấu được tạo thành từ nội dung hoặc bố cục của trang web. Ý tưởng kết hợp các khái niệm về những gì trong WordPress ngày nay chúng ta đạt được với mã ngắn, HTML tùy chỉnh và phát hiện nhúng vào một API nhất quán duy nhất và trải nghiệm người dùng.
Thiết lập dự án
Biết được sự thật rằng Gutenberg được xây dựng dựa trên React, một số nhà phát triển lo lắng rằng rào cản quá cao đối với các nhà phát triển cấp mới để phát triển Gutenberg.
Thiết lập React.js có thể khá tốn thời gian và khó hiểu nếu bạn mới bắt đầu với nó. Bạn sẽ cần ít nhất, biến áp JSX, Babel, tùy thuộc vào mã của bạn, bạn có thể cần một số plugin Babel và Bundler như Webpack, Rollup hoặc Parcel.
May mắn thay, một số người trong cộng đồng WordPress tăng cường và đang cố gắng làm cho việc phát triển Gutenberg dễ dàng nhất có thể cho mọi người theo dõi. Hôm nay, chúng tôi có một công cụ sẽ tạo ra một bản tóm tắt Gutenberg chúng ta có thể bắt đầu viết mã ngay lập tức thay vì làm rối với các công cụ và cấu hình.
Tạo khối Guten
Các tạo khối là một dự án khởi xướng của Ahmad Awais. nó là một bộ công cụ cấu hình không (# 0CJS) sẽ cho phép bạn phát triển khối Gutenberg với một số ngăn xếp hiện đại được cài đặt sẵn bao gồm React, Webpack, ESNext, Babel, ESLint và Sass. Làm theo hướng dẫn để bắt đầu với Tạo khối Guten.
Sử dụng ES5 (ECMAScript 5)
Sử dụng tất cả các công cụ này để tạo ra một đơn giản “Chào thế giới” khối có vẻ như quá nhiều. Nếu bạn muốn giữ cho ngăn xếp của mình gọn gàng, bạn thực sự có thể phát triển một khối Gutenberg bằng cách sử dụng một ECMAScript 5 đơn giản mà bạn có thể đã quen thuộc. Nếu bạn có WP-CLI 1.5.0 được cài đặt trên máy tính của bạn, bạn có thể chạy đơn giản
khối giàn giáo wp[--title = ] [--dashicon =<dashicon>] [--c loại =<category>] [--theme] [--plugin =<plugin>] [--lực lượng]</pre> <p>… đến <strong>tạo bản tóm tắt khối Gutenberg cho plugin hoặc chủ đề của bạn</strong>. Cách tiếp cận này hợp lý hơn, đặc biệt, đối với các plugin và chủ đề hiện có mà bạn đã phát triển trước thời đại Gutenberg.</p> <p>Thay vì tạo một plugin mới để chứa các khối Gutenberg, bạn có thể muốn tích hợp các khối vào các plugin hoặc chủ đề của mình. Và để làm cho hướng dẫn này dễ dàng để làm theo cho tất cả mọi người, <strong>chúng tôi sẽ sử dụng ECMAScript 5 với WP-CLI</strong>.</p> <h4>Đăng ký một khối mới</h4> <p>Gutenberg hiện được phát triển dưới dạng plugin và sẽ được hợp nhất vào WordPress 5.0 bất cứ khi nào nhóm cảm thấy sẵn sàng. Vì vậy, hiện tại, bạn sẽ cần phải cài đặt nó từ <strong>Trang plugin trong <code>quản trị viên</code></strong>. Khi bạn đã cài đặt và kích hoạt nó, hãy chạy lệnh sau trong Terminal hoặc Command Prompt nếu bạn đang ở trên máy Windows.</p> <pre name="code"> chuỗi khối giàn giáo wp --title = "Sê-ri HTML5" --theme</pre> <p>Lệnh này sẽ tạo một Khối cho chủ đề hiện đang hoạt động. Khối của chúng tôi sẽ bao gồm các tệp sau:</p> <pre name="code"> . â ??  ??¢Â ??  ??¢Â ?? loạt â ?? Â'Ã' â ??  ??¢Â ??  ??¢Â ?? block.js â ?? Â'Ã' â ??  ??¢Â ??  ??¢Â ?? biên tập viên¢Â ?? Â'Ã' â ??  ??¢Â ??  ??¢Â ?? style.css â ??  ??¢Â ??  ??¢Â ?? loạt.php </pre> <p>Hãy tải tập tin chính của các khối của chúng tôi trong <code>Hàm.php</code> của chủ đề của chúng tôi:</p> <pre name="code"> if (function_exists ('register_block_type')) yêu cầu get_template_directory (). '/blocks/series.php'; </pre> <p>Lưu ý rằng chúng tôi kèm theo tải tập tin với một điều kiện. Điều này đảm bảo <strong>khả năng tương thích với phiên bản WordPress trước đó mà khối của chúng tôi chỉ được tải khi có mặt Gutenberg</strong>. Khối của chúng tôi hiện có sẵn trong giao diện Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Nó trông như thế nào khi chúng ta chèn khối.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Gutenberg</h3> <p>Gutenberg giới thiệu hai bộ API để đăng ký một Khối mới. Nếu chúng ta nhìn vào <code>loạt.php</code>, chúng ta sẽ tìm thấy đoạn mã sau đăng ký Khối mới của chúng ta. Nó cũng <strong>tải biểu định kiểu và JavaScripts ở mặt trước và trình soạn thảo</strong>.</p> <pre name="code">register_block_type ('hai mươi</pre> <p>Như chúng ta có thể thấy ở trên, Khối của chúng ta được đặt tên <code>hai mươi / loạt</code>, tên Khối phải là duy nhất và được đặt tên để tránh va chạm với các Khối khác do các plugin khác mang đến.</p> <p>Hơn nữa, <strong>Gutenberg cung cấp một bộ API JavaScript mới để tương tác với “Khối” giao diện</strong> trong trình soạn thảo. Vì API khá phong phú, chúng tôi sẽ tập trung vào một số chi tiết cụ thể mà tôi nghĩ bạn nên biết để có được một khối Gutenberg đơn giản nhưng hoạt động đơn giản.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Đầu tiên, chúng tôi sẽ xem xét <code>wp.blocks.registerBlockType</code>. Hàm này được sử dụng để <strong>đăng ký mới “Khối” tới biên tập viên Gutenberg</strong>. Nó đòi hỏi hai đối số. Đối số đầu tiên là tên Khối nên theo tên đã đăng ký trong <code>register_block_type</code> chức năng trong phía PHP. Đối số thứ hai là một <strong>Đối tượng xác định thuộc tính Khối</strong> như tiêu đề, danh mục và một vài chức năng để hiển thị giao diện Chặn.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('hai mươi ); </pre> <h4><code>wp.element.createEuity</code></h4> <p>Hàm này cho phép bạn tạo phần tử trong “Khối” trong trình chỉnh sửa bài. Các <code>wp.element.createEuity</code> chức năng cơ bản là một sự trừu tượng của React <code>createdEuity ()</code> do đó, nó chấp nhận cùng một tập hợp các đối số. Đối số đầu tiên lấy loại phần tử ví dụ như một đoạn văn, một <code>khoảng</code>, hoặc một <code>div</code> như hình dưới đây:</p> <pre name="code">wp.element.createEuity ('div');</pre> <p>Chúng ta có thể <strong>bí danh hàm thành một biến</strong> vì vậy nó ngắn hơn để viết. Ví dụ:</p> <pre name="code"> var el = wp.element.createEuity; el ('div');</pre> <p>nếu bạn <strong>thích sử dụng cú pháp ES6 mới</strong>, bạn cũng có thể làm theo cách này:</p> <pre name="code"> const createdEuity: el = wp.element; el ('div');</pre> <p>Chúng ta cũng có thể <strong>thêm các thuộc tính yếu tố</strong> chẳng hạn như <code>lớp học</code> tên hoặc <code>ID</code> trên tham số thứ hai như sau:</p> <pre name="code"> var el = wp.element.createEuity; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>Các <code>div</code> mà chúng tôi tạo ra sẽ không có ý nghĩa nếu không có nội dung. Chúng ta có thể <strong>thêm nội dung vào đối số của tham số thứ ba</strong>:</p> <pre name="code"> var el = wp.element.createEuity; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Bài viết này là một phần của "Chuỗi hướng dẫn HTML5 / CSS3" của chúng tôi - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Nhấp vào đây để xem thêm các bài viết từ cùng một bộ ');</pre> <h4><code>wp.components</code></h4> <p>Các <code>wp.components</code> chứa một bộ sưu tập, như tên của nó, các thành phần Gutenberg. Các thành phần này về mặt kỹ thuật là các thành phần tùy chỉnh React bao gồm Nút, Popover, Spinner, Tooltip và một loạt các thành phần khác. Chúng ta có thể <strong>tái sử dụng các thành phần này vào Khối riêng của chúng tôi</strong>. Trong ví dụ sau, chúng tôi thêm một thành phần nút.</p> <pre name="code"> Nút var = wp.components.Button; el (Nút, 'class': 'nút tải xuống',, 'Tải xuống');</pre> <h4>Thuộc tính</h4> <p>Thuộc tính là cách lưu trữ dữ liệu trong Khối của chúng tôi, dữ liệu này có thể giống như nội dung, màu sắc, sự sắp xếp, URL, v.v. Chúng tôi có thể nhận được các thuộc tính từ Thuộc tính được truyền trên <code>chỉnh sửa()</code> chức năng, như sau:</p> <pre name="code"> chỉnh sửa: function (props) var content = props.attribut.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', nội dung); </pre> <p>Để cập nhật các thuộc tính, chúng tôi sử dụng <code>setAttribut ()</code> chức năng. Thông thường, chúng tôi sẽ thay đổi nội dung trên một số hành động nhất định, chẳng hạn như khi nhấp vào nút, đầu vào được điền, tùy chọn được chọn, v.v. Trong ví dụ sau, chúng tôi sử dụng nó để thêm <strong>dự phòng</strong> nội dung của Khối của chúng tôi trong trường hợp có điều gì đó bất ngờ xảy ra với chúng tôi <code>loạt liên tục</code> Thuộc tính.</p> <pre name="code"> chỉnh sửa: function (props) if (typeof props.attribut.seriesContent === 'không xác định' | ) var content = props.attribut.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', nội dung),]; </pre> <h4>Cứu khối</h4> <p>Các <code>tiết kiệm()</code> chức năng hoạt động tương tự như <code>chỉnh sửa()</code>, ngoại trừ nó xác định nội dung của Khối của chúng tôi để lưu vào cơ sở dữ liệu bài. Việc lưu nội dung Chặn khá đơn giản, như chúng ta có thể thấy dưới đây:</p> <pre name="code"> save: function (props) if (! props ||! props.attribut.seriesContent) return; var content = props.attribut.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', nội dung),]; </pre> <h3>Cái gì tiếp theo?</h3> <p>Gutenberg sẽ thay đổi hệ sinh thái WordPress tốt hơn (hoặc có thể tồi tệ hơn). Nó cho phép các nhà phát triển để <strong>áp dụng một cách mới để phát triển các plugin và chủ đề WordPress</strong>. Gutenberg chỉ là một sự khởi đầu. Sớm “Khối” mô hình sẽ được mở rộng sang các lĩnh vực khác của WordPress, chẳng hạn như API cài đặt và Widgets.</p> <p>Tìm hiểu JavaScript sâu sắc; đó là cách duy nhất để vào Gutenberg và phù hợp với tương lai trong ngành công nghiệp WordPress. Nếu bạn đã quen thuộc với những điều cơ bản về JavaScript, những điều kỳ quặc, chức năng, công cụ, hàng hóa và những điều xấu, tôi thực sự chắc chắn rằng bạn sẽ bắt kịp tốc độ với Gutenberg.</p> <p>Như đã đề cập, Gutenberg trưng bày rất nhiều API, đủ để làm hầu hết mọi thứ cho Khối của bạn. Bạn có thể chọn <strong>mã hóa Khối của bạn bằng JavaScript cũ, JavaScript đơn giản với cú pháp ES6, React hoặc thậm chí Vue</strong>.</p> <h4>Ý tưởng và cảm hứng</h4> <p>Tôi đã tạo một Khối Gutenberg rất (rất) đơn giản mà bạn có thể tìm thấy trong kho lưu trữ của tài khoản Github của chúng tôi. Hơn nữa, tôi cũng đã tập hợp một số kho lưu trữ từ đó bạn có thể truyền cảm hứng để xây dựng một Khối phức tạp hơn.</p> <ul><li>Gutenblocks - Tập hợp các khối của Mathieu Viet được viết bằng JavaScript với Cú pháp ES5</li> <li>Dự án Jetpack Gutenblocks - một tập hợp các Khối được gói trong Jetpack</li> <li>Danh sách các ví dụ về triển khai Gutenberg, bao gồm cả với Vue.js</li> </ul><h3>Tham khảo thêm</h3> <ul><li>Kho lưu trữ chính thức của Gutenberg</li> <li>Cẩm nang Gutenberg</li> </ul> <div class="rek-block ads-block" data-ads-size="netboard"> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block ads-block" data-ads-size="square"> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Hack một bảng thiếu IKEA vào giá thành phần</a> </div> </div> <div class="rek-block ads-block" data-ads-size="vertical"> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Hack một bàn phím cũ để tạo giao diện điều khiển tùy chỉnh</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Hướng dẫn về Trình quản lý tác vụ Windows 10 - Phần II</a> </div> </div> <div class="rek-block ads-block" data-ads-size="vertical"> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Bài viết tiếp theo</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hack một đèn pin $ 10 vào một Premium Premium siêu sáng</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Bài báo trước</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Hướng dẫn về Trình quản lý tác vụ Windows 10 - Phần III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.phhsnews.com"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://th.phhsnews.com/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://tr.phhsnews.com/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.phhsnews.com/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.phhsnews.com/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">PHHSNEWS</a> </div> <div class="col-md-9"> Thông tin hữu ích và lời khuyên về phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script src="js/ads.js"></script> </body> </html>