Gutenberg ทั้งหมดที่คุณต้องรู้เกี่ยวกับตัวแก้ไขล่าสุดของ WordPress
Gutenberg เป็นเครื่องมือแก้ไขใหม่สำหรับ WordPress ที่จะทั้งหมด แทนที่โปรแกรมแก้ไขที่ขับเคลื่อนโดย TinyMCE ปัจจุบัน. มันเป็นโครงการที่มีความทะเยอทะยานที่จะเปลี่ยน WordPress ในหลาย ๆ ทางและจะส่งผลกระทบต่อทั้งผู้ใช้ทั่วไปและนักพัฒนาโดยเฉพาะผู้ที่อาศัยหน้าจอแก้ไขสำหรับการทำงานกับ WordPress นี่คือลักษณะที่ปรากฏ.
Gutenberg ยังแนะนำกระบวนทัศน์ใหม่ใน WordPress ที่เรียกว่า “กลุ่ม”.
“กลุ่ม” เป็นศัพท์นามธรรมที่ใช้อธิบาย หน่วยของมาร์กอัป ที่ประกอบด้วยรูปแบบเนื้อหาหรือเค้าโครงของหน้าเว็บ แนวคิดนี้รวมแนวความคิดเกี่ยวกับสิ่งที่อยู่ใน WordPress วันนี้ที่เราจะประสบความสำเร็จ รหัสย่อ HTML ที่กำหนดเองและการค้นหาฝังลงใน API ที่สอดคล้องกันเดียว และประสบการณ์ผู้ใช้.
การตั้งค่าโครงการ
เมื่อทราบถึงความจริงที่ว่า Gutenberg นั้นถูกสร้างขึ้นจาก React นักพัฒนาบางคนก็กังวลว่า สิ่งกีดขวางนั้นสูงเกินไปสำหรับผู้พัฒนาระดับเริ่มต้นสำหรับการพัฒนากูเทนแบร์ก.
การตั้งค่า React.js อาจใช้เวลานานและสับสนหากคุณเพิ่งเริ่มต้นใช้งาน อย่างน้อยคุณจะต้องมีหม้อแปลง JSX, Babel ขึ้นอยู่กับรหัสของคุณคุณอาจต้องใช้ปลั๊กอิน Babel และ Bundler เช่น Webpack, Rollup หรือพัสดุ.
โชคดี, บางคนในชุมชน WordPress เริ่มก้าวขึ้น และกำลังพยายามทำให้การพัฒนากูเทนแบร์กง่ายที่สุดเท่าที่จะเป็นไปได้สำหรับทุกคนที่จะติดตาม วันนี้เรามีเครื่องมือที่จะสร้างหม้อไอน้ำ Gutenberg เราสามารถเริ่มเขียนโค้ดได้ทันที แทนที่จะสับสนกับเครื่องมือและการกำหนดค่า.
สร้าง Guten Block
สร้าง-Guten บล็อก
เป็นโครงการเริ่มต้นโดย Ahmad Awais มันคือ ชุดเครื่องมือ zero-configuration (# 0CJS
) ที่จะช่วยให้คุณพัฒนา Gutenberg block ด้วยค่าที่ตั้งไว้ล่วงหน้าอันทันสมัยเช่น React, Webpack, ESNext, Babel, ESLint และ Sass ทำตามคำแนะนำเพื่อเริ่มต้นกับ Create Guten Block.
ใช้ ES5 (ECMAScript 5)
ใช้เครื่องมือทั้งหมดเหล่านี้เพื่อสร้างง่าย “สวัสดีชาวโลก” บล็อกอาจดูเหมือนมากเกินไป หากคุณต้องการเก็บสแต็คของคุณไว้ให้ดีคุณสามารถพัฒนาบล็อกกูเทนเบิร์กโดยใช้ ECMAScript 5 แบบเรียบง่ายซึ่งคุณอาจคุ้นเคยอยู่แล้ว ถ้าคุณมี WP-CLI 1.5.0 ติดตั้งบนคอมพิวเตอร์ของคุณ, คุณสามารถเรียกใช้ ...
บล็อกนั่งร้าน wp[--title = ] [--dashicon = ] [- หมวดหมู่ = ] [- ธีม] [--plugin = ] [- บังคับ]
…ถึง สร้าง Gutenberg block สำเร็จรูปสำหรับปลั๊กอินหรือธีมของคุณ. วิธีการนี้มีความสมเหตุสมผลมากขึ้นโดยเฉพาะอย่างยิ่งสำหรับปลั๊กอินและธีมที่มีอยู่ซึ่งคุณได้พัฒนาขึ้นก่อนยุค Gutenberg.
แทนที่จะสร้างปลั๊กอินใหม่เพื่อรองรับบล็อก Gutenberg คุณอาจต้องการรวมบล็อกเข้ากับปลั๊กอินหรือธีมของคุณ และเพื่อให้การสอนนี้ง่ายต่อการติดตามสำหรับทุกคน, เราจะใช้ ECMAScript 5 กับ WP-CLI.
การลงทะเบียนบล็อกใหม่
ปัจจุบันกูเทนแบร์กได้รับการพัฒนาเป็นปลั๊กอินและจะถูกรวมเข้ากับ WordPress 5.0 ทุกครั้งที่ทีมรู้สึกว่ามันพร้อม ดังนั้นในขณะนี้คุณจะต้องติดตั้งจาก หน้าปลั๊กอินใน WP-ผู้ดูแลระบบ
. เมื่อคุณติดตั้งและเปิดใช้งานแล้วให้เรียกใช้คำสั่งต่อไปนี้ใน Terminal หรือพรอมต์คำสั่งหากคุณใช้เครื่อง Windows.
ชุดบล็อกนั่งร้าน wp --title = "ชุด HTML5" - ชุดรูปแบบ
คำสั่งนี้จะสร้างบล็อกให้กับธีมที่ใช้งานในปัจจุบัน บล็อกของเราจะประกอบด้วยไฟล์ต่อไปนี้:
. â ?? ?? â ?? ?? â ?? ?? ชุดâÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? block.js âÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? editor.css âÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? สไตล์. cs â ?? ?? â ?? ?? â ?? ?? series.php
ลองโหลดไฟล์หลักของบล็อกของเราใน functions.php
ในธีมของเรา:
if (function_exists ('register_block_type')) ต้องการ get_template_directory () '/blocks/series.php';
โปรดสังเกตว่าเราใส่ไฟล์ที่มีเงื่อนไข สิ่งนี้ทำให้มั่นใจ ความเข้ากันได้กับเวิร์ดเพรสรุ่นก่อนหน้านั้นบล็อกของเราจะโหลดเมื่อ Gutenberg ปรากฏเท่านั้น. บล็อกของเราควรจะพร้อมใช้งานในอินเทอร์เฟซ Gutenberg.
นี่เป็นลักษณะเมื่อเราใส่บล็อก.
Gutenberg API
Gutenberg แนะนำ API สองชุดเพื่อลงทะเบียนบล็อกใหม่ ถ้าเราดูที่ series.php
, เราจะพบรหัสต่อไปนี้ที่ลงทะเบียน Block ใหม่ของเรา มันยัง โหลดสไตล์ชีทและจาวาสคริปต์ในส่วนหน้าและแก้ไข.
register_block_type ('twentyseventeen / series', อาร์เรย์ ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));
ดังที่เราเห็นด้านบนบล็อกของเรามีชื่อ twentyseventeen / ชุด
, ชื่อบล็อกจะต้องไม่ซ้ำกันและเนมสเปซเพื่อหลีกเลี่ยงการชนกับบล็อกอื่นที่นำโดยปลั๊กอินอื่น.
นอกจากนี้, Gutenberg มีชุด JavaScript API ใหม่เพื่อโต้ตอบกับ “กลุ่ม” อินเตอร์เฟซ ในตัวแก้ไข เนื่องจาก API มีอยู่มากมายเราจะเน้นเฉพาะบางอย่างที่ฉันคิดว่าคุณควรรู้เพื่อให้ได้ Gutenberg Block ที่เรียบง่าย แต่ใช้งานได้.
wp.blocks.registerBlockType
ก่อนอื่นเราจะทำการตรวจสอบ wp.blocks.registerBlockType
. ฟังก์ชั่นนี้ใช้เพื่อ ลงทะเบียนใหม่ “กลุ่ม” ถึงบรรณาธิการกูเทนแบร์ก. มันต้องมีสองข้อโต้แย้ง อาร์กิวเมนต์แรกคือชื่อบล็อกซึ่งควรตามด้วยชื่อที่ลงทะเบียนใน register_block_type
ฟังก์ชั่นในด้าน PHP อาร์กิวเมนต์ที่สองคือ วัตถุที่กำหนดคุณสมบัติบล็อก เช่นชื่อเรื่องหมวดหมู่และฟังก์ชั่นสองสามอย่างในการสร้างหน้าจอ Block Interface.
var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), หมวดหมู่: 'วิดเจ็ต', คำหลัก: ['html'], แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) , บันทึก: function (props) );
wp.element.createElement
ฟังก์ชั่นนี้ช่วยให้คุณสร้างองค์ประกอบภายใน “กลุ่ม” ในเครื่องมือแก้ไขบทความ wp.element.createElement
ฟังก์ชั่นนั้นเป็นนามธรรมของปฏิกิริยา createElement ()
ฟังก์ชั่นจึงยอมรับชุดของข้อโต้แย้งที่เหมือนกัน อาร์กิวเมนต์แรกใช้ประเภทขององค์ประกอบเช่นย่อหน้า a ระยะ
, หรือ div
ที่แสดงด้านล่าง:
wp.element.createElement ( 'div');
เราทำได้ นามแฝงฟังก์ชั่นเป็นตัวแปร ดังนั้นจึงสั้นกว่าที่จะเขียน ตัวอย่างเช่น:
var el = wp.element.createElement; เอล ( 'div');
ถ้าคุณ ต้องการใช้ไวยากรณ์ ES6 ใหม่, คุณสามารถทำได้ด้วยวิธีนี้:
const createElement: el = wp.element; เอล ( 'div');
เรายังสามารถ เพิ่มองค์ประกอบองค์ประกอบ เช่น ชั้น
ชื่อหรือ รหัส
บนพารามิเตอร์ที่สองดังนี้:
var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');
div
ที่เราสร้างขึ้นจะไม่สมเหตุสมผลหากไม่มีเนื้อหา เราทำได้ เพิ่มเนื้อหาในอาร์กิวเมนต์ของพารามิเตอร์ที่สาม:
var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'บทความนี้เป็นส่วนหนึ่งของ "ชุดบทเรียน HTML5 / CSS3" ของเรา - เฉพาะ เพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้นคลิกที่นี่เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน ');
wp.components
wp.components
มีคอลเลกชันซึ่งเป็นชื่อที่บ่งบอกถึงองค์ประกอบของกูเทนแบร์ก ในทางเทคนิคส่วนประกอบเหล่านี้คือทำปฏิกิริยาองค์ประกอบที่กำหนดเองซึ่งรวมถึงปุ่ม, Popover, Spinner, Tooltip และกลุ่มอื่น ๆ เราทำได้ นำส่วนประกอบเหล่านี้กลับมาใช้ใหม่ในบล็อกของเราเอง. ในตัวอย่างต่อไปนี้เราเพิ่มองค์ประกอบปุ่ม.
ปุ่ม var = wp.components.Button; el (ปุ่ม, 'class': 'download-button',, 'ดาวน์โหลด');
แอตทริบิวต์
แอตทริบิวต์เป็นวิธีการจัดเก็บข้อมูลในบล็อกของเราข้อมูลนี้อาจเหมือนกับเนื้อหาสีการจัดตำแหน่ง URL ฯลฯ เราสามารถรับแอตทริบิวต์จากคุณสมบัติที่ส่งผ่านไปยัง แก้ไข ()
ฟังก์ชั่นดังต่อไปนี้:
แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'เนื้อหา -html-post-id-001' เนื้อหา);
ในการอัปเดตแอตทริบิวต์เราใช้ setAttributes ()
ฟังก์ชัน โดยทั่วไปแล้วเราจะเปลี่ยนเนื้อหาของการกระทำบางอย่างเช่นเมื่อมีการคลิกปุ่มการป้อนข้อมูลจะเต็มไปด้วยตัวเลือกที่ถูกเลือก ฯลฯ ในตัวอย่างต่อไปนี้เราใช้เพื่อเพิ่ม รั้งท้าย เนื้อหาของบล็อกของเราในกรณีที่มีบางสิ่งที่ไม่คาดคิดเกิดขึ้นกับเรา seriesContent
คุณลักษณะ.
แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) ถ้า (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'สวัสดีชาวโลกนี่คือเนื้อหาทางเลือก' ) var content = props.attributes.seriesContent; ส่งคืน [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', เนื้อหา),];
บันทึกบล็อก
บันทึก ()
ฟังก์ชั่นการทำงานคล้ายกับ แก้ไข ()
, ยกเว้นจะกำหนดเนื้อหาของบล็อกของเราเพื่อบันทึกลงในฐานข้อมูลโพสต์ การบันทึกเนื้อหาของบล็อกค่อนข้างตรงไปตรงมาตามที่เราเห็นด้านล่าง:
บันทึก: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) ถ้า (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; ส่งคืน [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', เนื้อหา),];
อะไรต่อไป?
Gutenberg จะเปลี่ยนระบบนิเวศของ WordPress ให้ดีขึ้น (หรืออาจแย่กว่านั้น) มันช่วยให้นักพัฒนา ใช้วิธีการใหม่ในการพัฒนาปลั๊กอินและธีม WordPress. กูเทนแบร์กเป็นเพียงการเริ่มต้น ในไม่ช้า “กลุ่ม” กระบวนทัศน์จะถูกขยายไปยังพื้นที่อื่น ๆ ของ WordPress เช่น API การตั้งค่าและวิดเจ็ต.
เรียนรู้ JavaScript อย่างลึกซึ้ง; มันเป็นวิธีเดียวที่จะเข้า Gutenberg และเกี่ยวข้องกับอนาคตในอุตสาหกรรม WordPress หากคุณคุ้นเคยกับพื้นฐาน JavaScript, นิสัยใจคอ, ฟังก์ชั่น, เครื่องมือ, สินค้าและ bads ฉันแน่ใจว่าคุณจะได้รับความเร็วที่สูงขึ้นด้วย Gutenberg.
ดังที่กล่าวไว้ Gutenberg มี API จำนวนมากเพียงพอที่จะทำเกือบทุกอย่างกับบล็อกของคุณ คุณสามารถเลือกได้ว่าจะ รหัส Block ของคุณด้วย JavaScript เก่าธรรมดา, JavaScript พร้อมไวยากรณ์ ES6, React หรือแม้แต่ Vue.
ความคิดและแรงบันดาลใจ
ฉันได้สร้าง Gutenberg แบบธรรมดามาก ๆ ซึ่งคุณสามารถหาได้จากที่เก็บของบัญชี Github ของเรา นอกจากนี้ฉันยังรวบรวมที่เก็บข้อมูลจำนวนหนึ่งจากที่ซึ่งคุณสามารถขับเคลื่อนแรงบันดาลใจในการสร้างบล็อกที่ซับซ้อนมากขึ้น.
- Gutenblocks - กลุ่มของ Blocks by Mathieu Viet เขียนใน JavaScript พร้อมด้วย ES5 Syntax
- โครงการ Jetpack Gutenblocks - กลุ่มของบล็อกที่รวมอยู่ใน Jetpack
- รายชื่อตัวอย่างของการดำเนินงานกูเทนแบร์กรวมถึงกับ Vue.js
อ้างอิงเพิ่มเติม
- พื้นที่เก็บข้อมูลอย่างเป็นทางการของ Gutenberg
- คู่มือกูเทนเบิร์ก