การปรับปรุงประสบการณ์ตัวสร้างเค้าโครงของ Drupal

เมื่อมีการแนะนำ Layout Builder ใน Drupal 8.6 และทำให้เสถียรใน Drupal 8.7 มันสร้างการเลื่อนลอยในกลไกการสร้างเพจที่ใช้ใน ecospace ของ Drupal เครื่องมือสร้างเลย์เอาต์ให้การแข่งขันที่ดุเดือดกับเครื่องมืออื่นๆ เช่น Paragraphs, Brick, Panels และ Display Suite ความสามารถเฉพาะตัวในการลากและวางส่วนประกอบและดูตัวอย่างแบบเรียลไทม์ถือเป็นการยอมจำนนอย่างแท้จริงสำหรับเครื่องมือสร้างเพจและสำหรับผู้เขียน

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

ในบทความนี้ ผมจะกล่าวถึง 10 โมดูลที่สนับสนุนโดย Drupal ซึ่งสามารถใช้ร่วมกับโมดูล Layout Builder ที่ยอดเยี่ยม ซึ่งจะทำให้เครื่องมือมีความน่าสนใจและเชื่อถือได้มากขึ้น เพื่อเพิ่มความยอดเยี่ยมนี้ โมดูลทั้งหมดเหล่านี้และเข้ากันได้กับ Drupal 9 ด้วย!

โมดูลแบ่งออกเป็นบางประเภท:

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

รูปแบบตัวสร้างเค้าโครง

Layout Builder Styles เป็นโมดูล Drupal อันทรงพลังที่ให้คุณเพิ่มสไตล์ให้กับบล็อกและส่วนต่างๆ ได้โดยตรงจาก UI สามารถใช้เพื่อให้ผู้เขียนสามารถเลือกจากรายการของสไตล์ที่กำหนดไว้ล่วงหน้าในแบ็กเอนด์

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

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

เนื่องจากสไตล์ถูกจัดเก็บเป็นการกำหนดค่า จึงสามารถส่งออกไปยังไฟล์การกำหนดค่าได้อย่างง่ายดายโดยใช้การจัดการการกำหนดค่าของ Drupal

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

แอตทริบิวต์ส่วนประกอบตัวสร้างเค้าโครง

โมดูลคุณลักษณะส่วนประกอบ Layout Builder จัดเตรียมข้อกำหนดที่คล้ายคลึงกันให้กับผู้สร้าง แต่มีตัวเลือกเพิ่มเติมและมีไว้สำหรับบล็อกที่วางไว้ในเค้าโครงเท่านั้น

บ่อยครั้ง ผู้เขียนจำเป็นต้องเพิ่ม data-attributes หรือ CSS Classes/IDs ลงในบล็อกเพื่อแสดงผลข้อมูลในลักษณะใดรูปแบบหนึ่ง มีโมดูลที่พร้อมใช้งานสำหรับกรณีดังกล่าว เช่น แอตทริบิวต์บล็อกและคลาสบล็อก แต่อาจขาดการสนับสนุน Layout Builder หรือจำเป็นต้องแก้ไขเพื่อให้ทำงานได้ โมดูลคุณลักษณะส่วนประกอบ Layout Builder มีตัวเลือกในการเพิ่มรายละเอียดเหล่านี้เป็นแอตทริบิวต์ให้กับบล็อกใน UI ของ Layout Builder ได้ทันที

โมดูลมีตัวเลือก ID, Class(es), Styles [inline style to the block], Data-* attributes คุณสามารถเพิ่มแอตทริบิวต์เหล่านี้ใน 1) องค์ประกอบบล็อก (ภายนอก) 2) ชื่อบล็อก และ 3) องค์ประกอบเนื้อหาบล็อก (ภายใน) ตัวเลือกสามารถกำหนดค่าได้สำหรับองค์ประกอบแต่ละประเภทเช่นถ้าคุณไม่ต้องการให้ฟิลด์ ID พร้อมใช้งานสำหรับชื่อบล็อกที่ไม่สามารถตรวจสอบได้ในแบบฟอร์มการกำหนดค่าโมดูลที่

“/admin/config/content/layout-builder-component-attributes”

Layout Builder Modal

โมดูล Modal Layout Builder ของ Drupal ทำให้ UI และประสบการณ์การเขียนมีความทันสมัยสำหรับรูปแบบการกำหนดค่าบล็อกหรือแบบฟอร์มการสร้าง (ในกรณีของบล็อกแบบอินไลน์) แบบฟอร์มที่แสดงบนแถบด้านข้างของกล่องโต้ตอบนอกผ้าใบอาจดูยุ่งยากมากเพราะแคบมาก โดยเฉพาะอย่างยิ่งหากคุณกำลังจัดการกับฟิลด์ที่ซับซ้อน ฟิลด์ Rich Text การอ้างอิงสื่อ ฯลฯ กล่องโต้ตอบ off-canvas จะลดความสามารถในการใช้งานลงอย่างมาก และไม่เหมาะสำหรับสถานการณ์ดังกล่าว

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

โดยรวมแล้ว โมดูลนี้ปรับปรุงประสบการณ์การเขียนอย่างมากสำหรับผู้แก้ไขและความสามารถในการใช้งาน Layout Builder

ไลบรารีตัวสร้างเค้าโครง

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

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

ห้องสมุดมาตรา

คล้ายกับสถานการณ์ข้างต้นที่ผู้แก้ไขอาจต้องเลือกจากเค้าโครงที่มีอยู่จากไลบรารี อาจมีสถานการณ์ที่ผู้แก้ไขจะต้องใช้บางส่วนซ้ำจาก Layout Builder ในหลายหน้า นี่คือที่มาของ Section Library ด้วยโมดูลนี้ ผู้แก้ไขสามารถสร้างเลย์เอาต์ขนาดเล็กของตนเอง ซึ่งพวกเขาสามารถนำกลับมาใช้ใหม่บนเพจอื่นได้ ซึ่งช่วยให้พวกเขาสร้างหน้าได้เร็วขึ้นโดยไม่ต้องทำสิ่งเดิมซ้ำๆ

ความแตกต่างที่สำคัญระหว่างโมดูลนี้และโมดูล Layout Builder Library คือโมดูลหลังสร้างเทมเพลตแบบเต็มหน้าและอิงตามการกำหนดค่า ไลบรารีส่วนเป็นเนื้อหาตามเนื้อหา ดังนั้นตัวแก้ไขเนื้อหาจึงสามารถสร้างเทมเพลตได้ทันทีโดยไม่ต้องมีการกำหนดค่านำเข้า/ส่งออก และยังสร้างเทมเพลตสำหรับส่วนหรือเทมเพลต (หน้า) ที่รวมกันหลายส่วน

ไม่มีการทับซ้อนกันระหว่างสองโมดูล และคุณสามารถใช้ทั้งสองได้พร้อมกัน

ตัวสร้างเค้าโครง เพิ่มโดยตรง

คุณลักษณะหลักอย่างหนึ่งของ Layout Builder คือความสามารถในการเพิ่มบล็อกแบบอินไลน์ซึ่งเป็นบล็อกที่ไม่สามารถนำกลับมาใช้ใหม่ได้เฉพาะสำหรับเพจ ตอนนี้ หากหน้าต่างๆ ในระบบของคุณส่วนใหญ่ขึ้นอยู่กับบล็อคอินไลน์เหล่านี้เป็นส่วนประกอบ Layout Builder Direct Add สามารถประหยัดเวลาของผู้แก้ไขได้ด้วยการคลิกเพียงไม่กี่ครั้ง

โมดูลอย่างง่ายแทนที่ปุ่ม "เพิ่มบล็อก" ด้วยปุ่มดรอปดาวน์อย่างรวดเร็วไปยังประเภทบล็อกที่มีอยู่ในระบบด้วยตัวเลือก "เพิ่มเติม" ซึ่งจะเปิดแถบด้านข้างกล่องโต้ตอบนอกผ้าใบ เมื่อเอดิเตอร์เลือกประเภทบล็อกจากรายการ ตัวแก้ไขจะเปิดแบบฟอร์มบล็อกโดยตรงเพื่อสร้างส่วนประกอบนั้น

ลิงค์การทำงานของตัวสร้างเค้าโครง

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

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

ข้อจำกัดของตัวสร้างเค้าโครง

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

ข้อจำกัดของตัวสร้างเค้าโครงช่วยแก้ปัญหานี้โดยจัดเตรียมเค้าโครงที่กำหนดค่าได้พร้อมตัวเลือกที่จำเป็น ตัวเลือกเหล่านี้จะแสดงทุกครั้งที่เปิดใช้งาน Layout Builder สำหรับการแสดงเอนทิตีใดๆ UI ที่กำหนดค่าได้ของโมดูลสำหรับบล็อกและเลย์เอาต์การอนุญาตรายการ/ปฏิเสธการแสดงรายการ ไซต์สามารถอนุญาตตัวเลือกทั้งหมดจากผู้ให้บริการบางราย หรือจำกัดตัวเลือกทั้งหมดโดยผู้ให้บริการ หรือระบุบล็อกและเลย์เอาต์ที่อนุญาตแต่ละรายการ ผู้ดูแลไซต์สามารถอนุญาต/ปฏิเสธบล็อกเหล่านั้นที่เป็นประโยชน์สำหรับบรรณาธิการในการสร้างเพจ และเฉพาะบล็อกและเลย์เอาต์เหล่านั้นเท่านั้นที่บรรณาธิการสามารถเลือกได้

Layout Builder สิทธิ์ขั้นสูง

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

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

ล็อคตัวสร้างเค้าโครง

ดังที่กล่าวไว้ข้างต้น Layout Builder Lock จะให้การเข้าถึงแบบคร่าวๆ สำหรับผู้ใช้ อนุญาตให้ผู้ดูแลระบบล็อกส่วนของเค้าโครงเริ่มต้น ดังนั้นผู้ใช้จึงไม่สามารถดำเนินการบางอย่างเมื่อแทนที่เค้าโครงสำหรับเอนทิตีแต่ละรายการ

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

สรุปด่วน

1. สไตล์ตัวสร้างเลย์เอาต์ - อนุญาตให้ผู้สร้างไซต์เลือกจากรายการสไตล์เพื่อนำไปใช้กับบล็อกตัวสร้างเลย์เอาต์และส่วนตัวสร้างเลย์เอาต์
2. Layout Builder Component Attributes - อนุญาตให้ผู้แก้ไขเพิ่มแอตทริบิวต์ HTML ให้กับส่วนประกอบ Layout Builder (บล็อก)
3. Layout Builder Modal - ให้คุณเพิ่มและกำหนดค่าบล็อกที่มีอยู่ใน modal ใน Layout Builder UI
4. ไลบรารีตัวสร้าง เลย์เอาต์ - จัดเตรียมไลบรารีเลย์เอาต์ที่อนุญาตให้ผู้แก้ไขเนื้อหาเลือกจากรายการเลย์เอาต์ที่กำหนดไว้ล่วงหน้า
5. ไลบรารีส่วน - สร้างเทมเพลตที่ใช้ซ้ำได้สำหรับส่วนเดียวหรือหลายส่วน
6. Layout Builder Direct Add - แทนที่ลิงก์ "เพิ่มบล็อก" ด้วยปุ่มดรอปที่แสดงประเภทบล็อกที่กำหนดเอง
7. ลิงก์การดำเนินการ Layout Builder - เพิ่มลิงก์การดำเนินการ 'Layout' ไปยังเนื้อหาที่เปิดใช้งาน Layout Builder บนหน้าการดูแลระบบ Drupal
8. ข้อจำกัดของตัวสร้างเลย์เอาต์ - ตั้งค่าว่าบล็อกใดและเลย์เอาต์ใดควรพร้อมสำหรับการจัดวางใน Layout Builder
9. สิทธิ์ขั้นสูงของตัวสร้างเค้าโครง - อนุญาตให้ควบคุมการเข้าถึงรายละเอียดไปยังหน้าตัวสร้างเค้าโครงโดยกำหนดชุดการอนุญาตที่ละเอียดยิ่งขึ้น
10. ล็อคตัวสร้างเค้าโครง - อนุญาตให้ผู้ดูแลระบบล็อกส่วนของเค้าโครงเริ่มต้น ดังนั้นผู้ใช้จึงไม่สามารถดำเนินการบางอย่างเมื่อแทนที่เค้าโครงสำหรับเอนทิตีแต่ละรายการ