Boilerplate ปลั๊กอินตัวแก้ไขบล็อก WordPress

การพัฒนาใน WordPress ได้รับการปรับปรุงให้ทันสมัยอย่างก้าวกระโดด เมื่อไม่กี่วันก่อน ฉันได้อธิบายเทคโนโลยีปัจจุบันที่มีอยู่แล้วในเวอร์ชัน 5 ของระบบการจัดการเนื้อหาของเรา ตอนนี้ได้เวลาสอนวิธีพัฒนาปลั๊กอินสำหรับ WordPress โดยคำนึงถึงความเป็นไปได้ของตัวแก้ไขบล็อกใหม่

วันนี้ผมจะมาอธิบายเกี่ยวกับ ต้นแบบ ที่เราใช้ใน Nelio สำหรับการพัฒนา WordPress ของเราด้วยฐาน JavaScript

คุณมีฐานรหัสทั้งหมดของ ปลั๊กอินสำเร็จรูป ของเราสำหรับ WordPress ใน GitHub ดังนั้นคุณจึงไม่มีข้อแก้ตัวที่จะไม่ปรับปรุงและขยายขอบเขตอันไกลโพ้นของคุณในฐานะนักพัฒนา

WordPress Block Editor Boilerplate

เหตุผลหลักในการสร้างโครงการที่ทำหน้าที่เป็นพื้นฐานสำหรับการสร้างปลั๊กอิน WordPress ใหม่เกิดจากความต้องการของเราเองในฐานะนักพัฒนาเพื่อให้สามารถรวมและสร้างมาตรฐานโครงการทั้งหมดของเราได้

แรงบันดาลใจจาก WordPress Plugin Boilerplate แนวคิดของเราคือทำสิ่งที่คล้ายคลึงกัน แต่เน้นที่ปลั๊กอินที่ขยายตัวแก้ไขบล็อกด้วยสแต็กที่ทันสมัยโดยใช้คอมไพเลอร์ transpilers บันเดิล และท้ายที่สุดคือเครื่องมือการพัฒนาทั่วไปสำหรับโปรเจ็กต์ JavaScript

กระบวนการติดตั้งและพัฒนา

ปลั๊กอินสำเร็จรูปที่เราสร้างเป็นฐานสามารถดาวน์โหลดได้โดยตรงจาก GitHub หลังจากนั้น คุณสามารถย้ายไปยังโฟลเดอร์ปลั๊กอิน ( /wp-content/plugins/ ) ของการติดตั้ง WordPress ของคุณ:

 git clone https://github.com/avillegasn/wp-beb.git

การดำเนินการนี้จะดาวน์โหลดโฟลเดอร์ปลั๊กอินพร้อมเนื้อหาทั้งหมด จากนั้นคุณต้องเปลี่ยนชื่อทั้งโฟลเดอร์นี้และเนื้อหาเพื่อใช้ชื่อที่คุณต้องการ ตัวอย่างเช่น หากปลั๊กอินของคุณจะถูกเรียกว่า my-plugin :

• เปลี่ยนชื่อ wp-beb เป็น my-plugin
• แทนที่ wp-beb ด้วย my-plugin
• แทนที่ wp_beb ด้วย my_plugin
• แทนที่ WP_BEB ด้วย MY_PLUGIN

เมื่อคุณทำเสร็จแล้ว ในการคอมไพล์ปลั๊กอินและสร้างโค้ดสุดท้าย ให้รันสิ่งนี้:

 npm install && npm run build

โปรดทราบว่าคุณจะต้องติดตั้งเครื่องมือต่อไปนี้:

• Node.js v8.9.1 หรือใหม่กว่า
• npm v5.5.1 หรือใหม่กว่า
• นักแต่งเพลง v1.8.1 หรือใหม่กว่า

คำสั่ง npm install ดาวน์โหลดการขึ้นต่อกันของ Node.js และ PHP ในโฟลเดอร์ node_modules และ vendor ตามลำดับ เมื่อกระบวนการเสร็จสิ้น คุณจะมีโฟลเดอร์ dist พร้อมไฟล์ที่คอมไพล์แล้ว ตอนนี้เปิดใช้งานปลั๊กอินใน WordPress ได้อย่างปลอดภัยแล้ว

นอกเหนือจากคำสั่งก่อนหน้านี้ ต้นแบบของเรายังมีคำสั่งเพิ่มเติมดังต่อไปนี้:

• npm run dev Build โดยไม่มีการลดขนาด
• npm run watch Build และดูการเปลี่ยนแปลง
• npm run build Build และย่อ JS และ CSS
• npm run lint-php เรียกใช้ PHP_CodeSniffer บนไฟล์ PHP เพื่อตรวจจับข้อผิดพลาด
• npm run lint-php:fix รัน phpcbf เพื่อพยายามแก้ไขข้อผิดพลาด PHP
• npm run lint-css เรียกใช้ stylelint บนไฟล์ SCSS เพื่อตรวจจับข้อผิดพลาด
• npm run lint-css:fix พยายามแก้ไขข้อผิดพลาดในไฟล์ SCSS
• npm run lint-js รัน eslint บนไฟล์ JS เพื่อตรวจจับข้อผิดพลาด
• npm run lint-js:fix พยายามแก้ไขข้อผิดพลาดในไฟล์ JS
• npm run lint เรียกใช้กระบวนการ linting ในไฟล์ PHP, SCSS และ JS
• npm run update:packages อัพเดตการพึ่งพาแพ็คเกจใน Node.js

โดยปกติ คุณจะใช้ npm run watch ในขณะที่คุณกำลังพัฒนาโค้ดเพื่อรวบรวมและรวมการเปลี่ยนแปลงในแบบเรียลไทม์ ในการสร้างเวอร์ชันสุดท้ายที่เสถียร แม้ว่า ให้รัน npm run build

เนื้อหาและโครงสร้างโฟลเดอร์

Boilerplate ตัวแก้ไขบล็อก WordPress ของเราประกอบด้วยไฟล์และโฟลเดอร์ต่อไปนี้:

• .babelrc ไฟล์การกำหนดค่า Babel
• .editorconfig ไฟล์ EditorConfig ที่ช่วยรักษารูปแบบการเข้ารหัสที่สอดคล้องกันสำหรับนักพัฒนาหลายคนที่ทำงานในโครงการเดียวกันในโปรแกรมแก้ไขและ IDE ต่างๆ
• .eslintignore ใช้เพื่อแยกไฟล์บางไฟล์ออกจากกระบวนการ ESLint linting
• .eslintrc ไฟล์กำหนดค่า ESLint
• .gitattributes ไฟล์ข้อความที่ระบุแอตทริบิวต์ให้กับชื่อพาธใน Git
• .gitignore . ใช้เพื่อแยกไฟล์บางไฟล์ออกจากที่เก็บ
  composer.json .json อธิบายการพึ่งพา PHP ของโปรเจ็กต์และอาจมีข้อมูลเมตาอื่นๆ ด้วย
• composer.lock .ล็อค ใช้เพื่อล็อกนักพัฒนาหลายคนที่ทำงานในโปรเจ็กต์เดียวกันให้เป็นเวอร์ชันอ้างอิงของ PHP เดียวกัน
  index.php . เพื่อซ่อนโครงสร้างไฟล์ภายในในเซิร์ฟเวอร์ไม่ว่าจะเป็นอะไรก็ตาม
• LICENSE.txt สำเนาใบอนุญาต GNU GPL v2
• package-lock.json ใช้เพื่อล็อกนักพัฒนาหลายคนที่ทำงานในโปรเจ็กต์เดียวกันให้เป็นเวอร์ชันของการพึ่งพา NPM เดียวกัน
• แพ็คเกจ. package.json ไฟล์ Manifest สำหรับโครงการ ที่เก็บส่วนกลางของคอนฟิกูเรชัน ซึ่งคุณจะพบชื่อของแพ็กเกจที่จำเป็นและคำสั่ง CLI ที่คุณสามารถใช้เพื่อจัดการโปรเจ็กต์
• phpcs.ruleset.xml ไฟล์กำหนดค่า PHP_CodeSniffer
• postcss.config.js ไฟล์กำหนดค่า PostCSS
• README.md ไฟล์ที่คุณกำลังอ่านอยู่
• readme.txt เทมเพลตสำหรับไฟล์ readme ของปลั๊กอิน WordPress
• webpack.config.js ครับ ไฟล์คอนฟิกสำหรับ webpack
• wp-beb.php . ไฟล์หลักของปลั๊กอิน WordPress
• ไดเร็กทอรี assets ที่มีทรัพยากร CSS, JS และรูปภาพ
• ไดเร็กทอรี languages ที่มีไฟล์การแปลสำหรับ i18n
• ไดเร็กทอรี packages ที่มีคำจำกัดความของบล็อกเพื่อขยายตัวแก้ไขบล็อกของ WordPress

นอกเหนือจากทั้งหมดนี้ เมื่อคุณคอมไพล์โปรเจ็กต์แล้ว คุณจะได้รับโฟลเดอร์ dist ที่มีไฟล์ที่คอมไพล์แล้ว ไดเร็กทอรี vendor ที่มีการขึ้นต่อกันและไฟล์เรียกทำงานสำหรับ PHP และไดเร็กทอรี node_modules ที่มีการขึ้นต่อกันและไฟล์เรียกทำงานสำหรับ NPM และ JavaScript

เพิ่มบล็อกใหม่ให้กับ WordPress Block Editor

สิ่งที่น่าสนใจเกี่ยวกับ Boilerplate ตัวแก้ไขบล็อก WordPress นี้คือสถานะเริ่มต้น เมื่อคุณดาวน์โหลดและคอมไพล์ปลั๊กอินแล้ว ให้เปิดใช้งาน และคุณจะพบว่าเป็นปลั๊กอินที่ทำงานได้อย่างสมบูรณ์ ซึ่งจะเพิ่มบล็อกใหม่ในตัวแก้ไขของคุณ

บล็อกการ สาธิต ที่เพิ่มโดยต้นแบบของเราเป็นเพียงบล็อกข้อความธรรมดาที่นำหน้าด้วย dashicon หัวใจ ดังที่คุณเห็นในภาพหน้าจอก่อนหน้านี้ บล็อกยังกำหนดรูปแบบเพิ่มเติมอีกสองรูปแบบ ซึ่งปรับเปลี่ยนสีของข้อความภายในบล็อก สิ่งเหล่านี้จะช่วยให้คุณเข้าใจวิธีสร้างบล็อกและสไตล์ใน Gutenberg

โค้ด JavaScript ที่เพิ่มบล็อกนี้ในตัวแก้ไขอยู่ใน packages/blocks/demo (ดูที่นี่) หากคุณต้องการลบบล็อกนี้ เพียงลบไดเร็กทอรี demo และลบการนำเข้าและการใช้งานในไฟล์ packages/blocks/index.js

นอกจากนี้ โค้ดสำหรับบล็อกการสาธิตยังถูกแบ่งออกเป็นไฟล์ต่างๆ ซึ่งแต่ละไฟล์รวมถึงอาร์กิวเมนต์ส่วนต่างๆ ที่ใช้โดย registerBlockType

ในทางกลับกัน หากคุณต้องการเพิ่มบล็อกเพิ่มเติม ให้ทำซ้ำ packages/blocks/demo และตั้งชื่อบล็อกที่คุณต้องการ แก้ไขไฟล์ JavaScript ภายในตามที่คุณต้องการ และอย่าลืมนำเข้าไฟล์หลักของบล็อกใหม่ใน packages/blocks/index.js

ขยายตัวแก้ไขบล็อกด้วยปลั๊กอิน

นอกเหนือจากบล็อกการสาธิตที่ฉันได้กล่าวถึงก่อนหน้านี้แล้ว เทมเพลต ของเราสำหรับเครื่องมือแก้ไขบล็อกยังมีคำจำกัดความของปลั๊กอิน Gutenberg โปรดทราบว่า "ปลั๊กอิน" นี้ไม่ใช่ปลั๊กอิน WordPress ทั่วไป แต่เป็นสิ่งที่ขยายตัวแก้ไขบล็อกได้ “ปลั๊กอินภายในปลั๊กอิน WordPress” หากคุณต้องการ

คุณสามารถดูปลั๊กอินได้ในภาพหน้าจอด้านบน ซึ่งอยู่ทางด้านขวา ปลั๊กอินนี้เปิดใช้งานโดยคลิกที่ไอคอนด้านบนขวา ถัดจากปุ่มเผยแพร่

ปลั๊กอินประกอบด้วยตัวเลือกสี (เพื่อให้คุณสามารถดูวิธีที่คุณสามารถใช้ส่วนประกอบ React ที่ Gutenberg มีอยู่ซ้ำได้อย่างง่ายดาย) และปุ่มสำหรับแทรกบล็อกการสาธิตไปยังตัวแก้ไขโดยทางโปรแกรม (อีกสถานการณ์หนึ่งที่น่าสนใจ)

คุณมีโค้ดปลั๊กอินใน assets/src/js/admin (ดูได้ที่นี่) โดยเฉพาะอย่างยิ่ง ไฟล์ plugin.js มีการเรียก registerPlugin และไฟล์ plugin-component.js กำหนดองค์ประกอบที่รับผิดชอบในการแสดงตัวเลือกสีและปุ่มที่ฉันกล่าวถึงก่อนหน้านี้

อีกครั้ง คุณสามารถแก้ไขปลั๊กอินนี้ได้ตามที่คุณต้องการ หรือจะลบก็ได้ถ้าต้องการ ในการดำเนินการดังกล่าว อย่าลืมลบไฟล์ JavaScript ของ plugin.js ที่อยู่ในคิวในไฟล์หลัก wp-beb.php (ดูที่นี่) รวมถึงไฟล์ CSS ที่เกี่ยวข้อง (ที่นี่)

มาลองดูกัน!

เราหวังว่า Boilerplate ตัวแก้ไขบล็อก WordPress ของเราจะช่วยคุณกำจัดความกลัว JS ของคุณและเริ่มต้นการเขียนโปรแกรมส่วนขยายสำหรับตัวแก้ไขบล็อก WordPress ด้วยวิธีง่ายๆ ลองใช้และบอกเราเกี่ยวกับประสบการณ์ของคุณ เรายินดีที่จะอ่านความคิดเห็นของคุณ!

ภาพเด่นโดย ทีม Icons8 บน Unsplash