วิธีเพิ่มปุ่มใน Gutenberg Editor โดยใช้ @wordpress/scripts

เกือบหนึ่งปีครึ่งที่แล้ว Antonio เขียนโพสต์บนบล็อกนี้เพื่ออธิบายปัญหาอย่างหนึ่งที่เราเผชิญเมื่อปรับปลั๊กอินของเราให้เข้ากับตัวแก้ไขบล็อก WordPress ใหม่ ผลลัพธ์ของการสอนของเขามีลักษณะดังนี้:

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

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

สร้างปลั๊กอิน

สิ่งแรกที่เราต้องทำคือสร้างปลั๊กอิน WordPress นี้ค่อนข้างตรงไปตรงมา โดยพื้นฐานแล้ว สิ่งที่เราต้องทำคือสร้างโฟลเดอร์ใน wp-content/plugins ด้วยชื่อที่เราต้องการให้ปลั๊กอินของเรา (เช่น gutenberg-button ) และสร้างไฟล์ที่มีชื่อเดียวกันและไฟล์ .php นามสกุล . .php จากนั้นพิมพ์รหัสต่อไปนี้ในไฟล์ปลั๊กอินของคุณ:

ตอนนี้ มาดูกันดีกว่าว่าตัวอย่างก่อนหน้านี้ทำอะไรได้บ้าง:

• ก่อนอื่นเราเปิดแท็ก <?php ไม่มีความประหลาดใจที่นี่
• ต่อไป ในไฟล์หลักนี้ เราเพิ่มความคิดเห็นแบบหลายบรรทัด ความคิดเห็นมีหลายบรรทัดที่มีคู่ "คีย์ / ค่า" ตัวอย่างเช่น เราจะเห็นวิธีการระบุชื่อของปลั๊กอิน ( Plugin Name ) เวอร์ชัน ( Version ) หรือชื่อผู้แต่ง ( Author ) ข้อมูลทั้งหมดนี้จะปรากฏในส่วน ปลั๊กอิน ภายใน WordPress
• สุดท้าย เราเพิ่มโค้ดสำเร็จรูปบางส่วน:
  • เราระบุ namespace (เราพูดถึงเนมสเปซที่นี่)
  • เราตรวจสอบให้แน่ใจว่าหากไฟล์ทำงาน ไฟล์นั้นทำงานโดยเป็นส่วนหนึ่งของ WordPress และ
  • เรากำหนดค่าคงที่บางอย่างเกี่ยวกับปลั๊กอิน (ซึ่งจะเป็นประโยชน์ในภายหลัง)

เมื่อเราทำทั้งหมดนี้แล้ว หากเราไปที่หน้าจอ ปลั๊กอิน ของ WordPress เราจะเห็นว่า ปุ่ม Gutenberg อยู่ที่นั่น:

เราเปิดใช้งานและ… voila! แน่นอนว่ามันไม่ทำอะไรเลย แต่มันมีอยู่แล้ว

การพัฒนาปลั๊กอิน JavaScript

ทุกวันนี้ นักพัฒนา WordPress ต้องมีความชำนาญด้าน JavaScript นั่นเป็นหนึ่งในผลที่ตามมาของ Gutenberg ที่เป็นแกนหลักฉันเดา และบทช่วยสอนนี้ก็ไม่มีข้อยกเว้น

เตรียมสิ่งแวดล้อม

หากเราต้องการเพิ่มปุ่มใหม่ให้กับอินเทอร์เฟซ Gutenberg เราต้องเขียนโค้ดคุณลักษณะนี้ใน JavaScript มาเตรียมสภาพแวดล้อมการพัฒนา JavaScript ในปลั๊กอินของเรากัน ในการดำเนินการนี้ เพียงเรียกใช้คำสั่งต่อไปนี้จากบรรทัดคำสั่งของคุณ (ตรวจสอบให้แน่ใจว่าคุณอยู่ใน wp-content/plugins/gutenberg-button เมื่อทำเช่นนั้น):

 npm init

และปฏิบัติตามคำแนะนำ:

 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gutenberg-button) version: (1.0.0) description: Adding a formatting button in Gutenberg. entry point: (index.js) ...

ผลลัพธ์ของกระบวนการนี้คือไฟล์ package.json ดังที่คุณเห็นในอีกสักครู่ ไฟล์นี้จะเป็นประโยชน์อย่างมากในอนาคต

ตามที่ฉันได้เปิดเผยไปแล้วในชื่อโพสต์นี้ เราจะใช้ @wordpress/scripts เพื่อสร้างปลั๊กอินของเรา ให้เพิ่มเป็นการพึ่งพาโดยเรียกใช้คำสั่งต่อไปนี้:

 npm install --save-dev @wordpress/scripts

คำสั่งนี้จะดาวน์โหลดการพึ่งพาจำนวนมากภายในปลั๊กอินของเรา (ภายใต้ node_modules ) และจะแก้ไข package.json ของเราเพื่อให้ชัดเจนว่า @wordpress/scripts เป็นการพึ่งพาการพัฒนาแล้ว

หากคุณดูเอกสารประกอบของแพ็คเกจนี้ คุณจะเห็นว่ามีสคริปต์มากมายในการสร้าง ตรวจสอบไวยากรณ์ โค้ดรูปแบบ ฯลฯ:

 { "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md:docs": "wp-scripts lint-md-docs", "lint:md:js": "wp-scripts lint-md-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "packages-update": "wp-scripts packages-update", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

เรามาแก้ไขไฟล์ package.json กันเถอะ เพื่อให้ส่วน "scripts" มีคำสั่งที่แนะนำทั้งหมด

วิธีตรวจสอบว่าทุกอย่างใช้งานได้...

มาสร้างโฟลเดอร์ src ที่รูทของโปรเจ็กต์ของคุณและเพิ่มไฟล์ index.js ข้างในกัน นี่จะเป็นไฟล์ JavaScript หลักของปลั๊กอินของเราและจะมีโค้ดทั้งหมดของคุณ (จากนั้นคุณสามารถจัดระเบียบโค้ดได้ตามต้องการ ตราบใดที่ไฟล์หลักคือ src/index.js )

มาลองดูว่าสิ่งต่าง ๆ ทำงานตามที่คาดไว้หรือไม่โดยเพิ่มคำสั่ง index.js ต่อไปนี้:

 console.log( 'Hi!' );

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

สิ่งที่เราต้องทำตอนนี้คือบอก WordPress ว่ามีสคริปต์นี้เพื่อให้สามารถโหลดได้ ในการทำเช่นนั้น เพียงเปิดไฟล์หลักของปลั๊กอินของคุณ ( gutenberg-button.php ) และเพิ่มบรรทัดต่อไปนี้ในตอนท้าย:

 function enqueue_script() { wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', [], GUTENBERG_BUTTON_VERSION ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

หากคุณให้ความสนใจ คุณจะเห็นว่าเราแค่บอกให้ WordPress จัดคิวสคริปต์ใหม่ของเรา /build/index.js เป็นทรัพยากรตัวแก้ไขบล็อก ด้วยวิธีนี้ เมื่อผู้ใช้เข้าถึงตัวแก้ไขบล็อก สคริปต์ของเราจะเป็นส่วนหนึ่งของเนื้อหาที่ตัวแก้ไขจะรวมไว้

ลองตรวจสอบดู ไปที่แดชบอร์ด WordPress แก้ไขโพสต์ และดูคอนโซล JavaScript ของเบราว์เซอร์ หากทุกอย่างเป็นไปตามที่คาดไว้ คุณจะเห็น "สวัสดี!" เขียนบนคอนโซล:

จำลองบทช่วยสอนของเราเพื่อเพิ่มปุ่มไปที่ Gutenberg

โอเค ตอนนี้เราได้เห็นแล้วว่าเราสามารถเขียนโค้ด JavaScript และ npm run build มันเป็นสิ่งที่เบราว์เซอร์ของเราจะเข้าใจ ได้เวลาทำซ้ำบทช่วยสอนของ Antonio และนี่ ผู้อ่านที่รัก มันง่ายมาก

เปิดไฟล์ src/index.js และแทนที่คำสั่ง console.log ก่อนหน้าด้วยสิ่งต่อไปนี้:

อย่างที่คุณเห็น นี่เป็นโค้ดเดียวกับที่ Antonio เขียนเมื่อไม่กี่เดือนก่อน ความแตกต่างที่สำคัญคือความจริงที่ว่าเราไม่ได้ใช้ตัวแปรทั่วโลก wp เพื่อเข้าถึงฟังก์ชันและส่วนประกอบของ Gutenberg อีกต่อไป ตอนนี้เราใช้คำสั่ง import แทน แต่นอกนั้นค่อนข้างเหมือนกัน

เมื่อคุณเขียนโค้ดแล้ว ให้ npm run build เท่านั้น เท่านี้ก็เรียบร้อย! ตอนนี้คุณมีปุ่มใน Gutenberg:

ตรวจสอบให้แน่ใจว่ามันใช้งานได้โดยเลือกข้อความและคลิกที่ปุ่ม:

และแล้ว เราเห็นข้อความปรากฏขึ้นในคอนโซลอีกครั้ง!

บันทึกสุดท้ายเกี่ยวกับการพึ่งพา...

หากคุณดูภายในโฟลเดอร์บิลด์ คุณจะเห็นว่า @wordpress/scripts ไม่ได้ build เพียงไฟล์ index.js แต่มีไฟล์ index.asset.php ไฟล์นี้กำหนดอ็อบเจ็กต์ขนาดเล็กที่มีคุณสมบัติสองประการ:

• รายการการพึ่งพา (กล่าวคือ สคริปต์ WordPress) ที่ปลั๊กอินของเราต้องการ
• เวอร์ชันบิลด์

เราสามารถ (และควร) ใช้คุณสมบัติทั้งสองนี้เมื่อจัดคิวสคริปต์ของเราใน WordPress หากเราต้องการให้แน่ใจว่าสคริปต์จะทำงานอย่างถูกต้อง ในการดำเนินการดังกล่าว ให้กลับไป gutenberg-button.php แล้วเปลี่ยนดังที่แสดงด้านล่าง:

 function enqueue_script() { $asset = include GUTENBERG_BUTTON_PATH . '/build/index.asset.php'; wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', $asset['dependencies'], $asset['version'] ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

เพียงโหลดวัตถุใน index.asset.php โดยใช้คำสั่ง include และแทนที่รายการการพึ่งพาที่เรามี ( [] ) ด้วยการพึ่งพาจริงและใช้หมายเลขบิลด์เป็นเวอร์ชันปลั๊กอิน

บทสรุป

การสร้างปลั๊กอิน WordPress ที่มีประโยชน์จริงๆ นั้นค่อนข้างยุ่งยาก คุณต้องเข้าใจดีว่า JavaScript ทำงานอย่างไร และทำความคุ้นเคยกับทรัพยากรทั้งหมดที่ WordPress มี แต่ต้องขอบคุณแพ็คเกจ @wordpress/scripts การจัดเตรียมสภาพแวดล้อม JavaScript dev และสร้างปลั๊กอิน JavaScript ที่สามารถทำงานภายใน WordPress ได้ง่ายกว่าที่เคย

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

อ้อ และอีกอย่าง นี่คือลิงค์ของโปรเจ็กต์ พร้อมที่จะดาวน์โหลดและทดสอบหากคุณต้องการ เพียงโคลนโปรเจ็ก npm install การพึ่งพาทั้งหมด npm run build แล้วลองดู!

ภาพเด่นโดย Ashim D'Silva บน Unsplash