גוטנברג כל מה שאתה צריך לדעת על עורך 'וורדפרס האחרונה
גוטנברג הוא עורך חדש עבור WordPress זה יהיה לגמרי להחליף את עורך TinyMCE הנוכחי מופעל. זהו פרויקט שאפתני אשר ניתן לטעון וורדפרס במובנים רבים וישפיע על משתמשי הקצה הרגיל ועל מפתחים, במיוחד, אלה תלויים המסך עורך לעבוד על וורדפרס. הנה איך זה נראה.
גוטנברג גם מציג פרדיגמה חדשה ב- WordPress “לחסום”.
“לחסום” הוא המונח המופשט המשמש לתיאור יחידות סימון כי הם מורכבים טופס תוכן או פריסה של דף אינטרנט. הרעיון משלב מושגים של מה היום וורדפרס אנו משיגים עם קודים קצרים, HTML מותאם אישית וגילוי הטמעה לתוך ממשק API עקבי אחד ואת חוויית המשתמש.
הגדרת הפרויקט
לדעת את העובדה כי גוטנברג בנוי על גבי React, מפתחי כמה מודאגים כי המכשול גבוה מדי עבור מפתחי הכניסה ברמת פיתוח Gutenberg.
הגדרת React.js יכול להיות די זמן מבלבל אם אתה רק מתחיל עם זה. אתה צריך לפחות, JSX שנאי, בבל, בהתאם הקוד שלך ייתכן שיהיה עליך כמה תוספים בבל, וכן Bundler כמו Webpack, אוסף, או חבילה.
למרבה המזל, כמה אנשים בתוך הקהילה וורדפרס צעד למעלה ומנסים להפוך את הפיתוח של גוטנברג לקל ככל האפשר עבור כולם. היום, יש לנו כלי אשר יפיק boilerplate Gutenberg כך אנחנו יכולים להתחיל לכתוב קוד מיד במקום להתערב עם הכלים והתצורות.
צור בלוק גוטן
ה ליצור גוטן בלוק
הוא פרויקט יזום של אחמד עוואיס. זה ערכת כלי אפס תצורה (# 0CJS
) שיאפשר לך לפתח בלוק גוטנברג עם כמה ערימות מודרניות מראש כולל React, Webpack, ESNext, בבל, ESLint, ו Sass. בצע את ההוראות כדי להתחיל עם יצירת גוטן בלוק.
שימוש ב- ES5 (ECMAScript 5)
באמצעות כל הכלים האלה כדי ליצור פשוט “שלום עולם” בלוק אולי נראה יותר מדי. אם אתה רוצה לשמור על ערימות שלך רזה, אתה יכול למעשה לפתח בלוק גוטנברג באמצעות רגיל E "טוב ECMAScript 5 כי ייתכן שכבר יש היכרות עם. אם יש לך WP-CLI 1.5.0 מותקן במחשב שלך, אתה יכול פשוט לרוץ ...
wp פיגום בלוק[- כותרת = ] [- dashicon = ] [- קטגוריה = ] [- -] [- פלוגין = ] [- כוח]
… ל ליצור את גלוטנברג לחסום boilerplate לתוסף או נושא. גישה זו היא הגיונית יותר, במיוחד עבור תוספים קיימים ונושאים שפיתחתם לפני עידן גוטנברג.
במקום ליצור תוסף חדש כדי להתאים את גוטנברג בלוקים, ייתכן שתרצה לשלב את אבני כדי plugins שלך או את הנושאים. וכדי להפוך את זה מורה קל לעקוב אחר כולם, אנו נשתמש ב- ECMAScript 5 עם WP-CLI.
רישום בלוק חדש
גוטנברג מפותחת כיום כתוסף ותמוזג ל - WordPress 5.0 בכל פעם שהצוות ירגיש שהוא מוכן. אז, לעת עתה, יהיה עליך להתקין את זה דף תוספים wp-admin
. לאחר התקנתו והפעלתו, הפעל את הפקודה הבאה במסוף או בשורת הפקודה אם אתה משתמש במחשב Windows.
wp פיגום בלוק סדרה - כותרת = "HTML5 סדרה" - theme
פקודה זו תיצור בלוק לנושא הפעיל כעת. הבלוק שלנו יכלול את הקבצים הבאים:
. ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? סדרה ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? block.js ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? editor.css ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? style.css ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? series.php
בואו לטעון את הקובץ הראשי של בלוקים שלנו פונקציות
של הנושא שלנו:
אם (function_exists ('register_block_type')) דרוש get_template_directory (). '/blocks/series.php';
שים לב שאנו מצרפים את טעינת הקובץ עם תנאי. זה מבטיח תאימות עם גירסת וורדפרס הקודמת כי הבלוק שלנו נטען רק כאשר גוטנברג נמצא. הבלוק שלנו אמור להיות זמין כעת בממשק גוטנברג.
כך זה נראה כאשר אנחנו מכניסים את הבלוק.
Gutenberg APIs
גוטנברג מציג שתי קבוצות של ממשקי API לרישום בלוק חדש. אם נסתכל על series.php
, אנו מוצאים את הקוד הבא רושם הבלוק החדש שלנו. זה גם טוען את גליון הסגנונות ואת JavaScript על החזית ואת העורך.
register_block_type ('עשרים ושתיים / סדרה', מערך ('editor_script' = '' סדרת בלוק-עורך ',' editor_style '=' 'בלוק-עורך', 'style' => 'series-block',));
כפי שאנו יכולים לראות לעיל, הבלוק שלנו נקרא עשרים ושמונה / סדרה
, שם הבלוק חייב להיות ייחודי וממוקם על מנת למנוע התנגשות עם בלוקים אחרים שהובאו על ידי תוספים אחרים.
יתר על כן, Gutenberg מספק קבוצה של ממשקי API חדשים של JavaScript כדי לקיים אינטראקציה עם “לחסום” ממשק בעורך. מאז API הוא די בשפע, נתמקד כמה פרטים שאני חושב שאתה צריך לדעת כדי לקבל פשוט גוטנברג בלוק מתפקד עדיין.
wp.blocks.registerBlockType
ראשית, אנחנו נסתכל לתוך wp.blocks.registerBlockType
. פונקציה זו משמשת לרשום חדש “לחסום” לעורך גוטנברג. זה דורש שני טיעונים. הארגומנט הראשון הוא שם הבלוק שאמור לעקוב אחר השם הרשום register_block_type
פונקציה בצד PHP. הטיעון השני הוא אובייקט המגדיר את מאפייני הבלוק כמו כותרת, קטגוריה, וכמה פונקציות כדי לעבד את ממשק בלוק.
var registerBlockType = wp.blocks.registerBlockType; (): "[/ html '], ערוך: פונקציה (props) , שמור: function (props) );
wp.element.createElement
פונקציה זו מאפשרת לך ליצור את האלמנט בתוך “לחסום” בעורך הדואר. ה wp.element.createElement
הפונקציה היא בעצם הפשטה של התגובה createElement ()
ולכן הוא מקבל אותה מערכת של טיעונים. הארגומנט הראשון לוקח את סוג האלמנט לדוגמה פסקה, a span
, או div
כפי שמוצג מטה:
wp.element.createElement ('div');
אנחנו יכולים כינוי הפונקציה למשתנה אז זה קצר יותר לכתוב. לדוגמה:
var el = wp.element.createElement; אל ('div');
אם אתה מעדיפים להשתמש בתחביר ES6 החדש, אתה יכול גם לעשות את זה ככה:
const createElement: el = wp.element; אל ('div');
אנחנו יכולים גם הוסף את תכונות האלמנט כמו ה מעמד
שם או id
על הפרמטר השני כדלקמן:
var el = wp.element.createElement; אל ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');
ה div
כי יצרנו לא היה הגיוני ללא התוכן. אנחנו יכולים הוסף את התוכן בארגומנט של הפרמטר השלישיYou
var el = wp.element.createElement; אל '(p', '' class ':' series-html5 ',' id ':' series-html-post-id-001 ',' מאמר זה הוא חלק מסדרת הדרכות HTML5 / CSS3 שלנו ' כדי לעזור לך להיות מעצב טוב יותר ו / או מפתח.לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה ');
wp.components
ה wp.components
מכילים אוסף של, כפי שהשם מרמז, מרכיבי גוטנברג. רכיבים אלה מבחינה טכנית הם רכיבים מותאמים אישית React הכוללים את לחצן, Popover, Spinner, Tooltip, וכן חבורה של אחרים. אנחנו יכולים לעשות שימוש חוזר במרכיבים אלו בבלוק שלנו. בדוגמה הבאה, אנו מוסיפים רכיב כפתור.
var Button = wp.components.Button; el (לחצן, 'class': 'download-button',, 'הורדה');
תכונות
המאפיינים הם הדרך לאחסן את הנתונים בבלוק שלנו, נתונים אלה יכולים להיות כמו התוכן, הצבעים, יישור, כתובת האתר, וכו 'אנחנו יכולים לקבל את המאפיינים מן הנכסים עברו על ערוך ()
, כדלקמן:
עריכה: פונקציה (פרופס) var content = props.attributes.seriesContent; חזרה אל ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', תוכן);
כדי לעדכן את התכונות, אנו משתמשים setAttributes ()
פונקציה. בדרך כלל נשנה את התוכן בפעולה מסוימת, כגון בעת לחיצה על לחצן, קלט מלא, אפשרות נבחרת וכו '. בדוגמה הבאה, אנו משתמשים בה כדי להוסיף fallback תוכן של הבלוק שלנו למקרה שמשהו בלתי צפוי קרה לנו סדרת
תכונה.
עריכה: פונקציה (props) if (typeof props.attributes.seriesContent === 'undefined' || props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! הנה תוכן החזרה.' ) תוכן var = props.attributes.seriesContent; [אל '(' div ', ' class ':' series-html5 ',' id ':' series-html-post-id-001 ', תוכן),];
שמירת הבלוק
ה לשמור()
פונקציה דומה ערוך ()
, למעט זה מגדיר את התוכן של הבלוק שלנו כדי לשמור על מסד הנתונים לכתוב. שמירת תוכן הבלוק היא פשוטה למדי, כפי שניתן לראות להלן:
שמור: פונקציה (props) אם (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; [אל '(' div ', ' class ':' series-html5 ',' id ':' series-html-post-id-001 ', תוכן),];
מה הלאה?
גוטנברג ישנה את המערכת האקולוגית של וורדפרס לטובה (או אולי אף גרוע יותר). זה מאפשר למפתחים לאמץ דרך חדשה של פיתוח וורדפרס plugins וערכות נושא. גוטנברג הוא רק התחלה. בקרוב “לחסום” פרדיגמה יורחב לתחומים אחרים של וורדפרס כגון APIs הגדרות ו יישומונים.
למד JavaScript עמוק; זוהי הדרך היחידה להיכנס גוטנברג ולהישאר רלוונטיים לעתיד בתעשיית וורדפרס. אם אתה כבר מכיר את יסודות JavaScript, את quirks, את הפונקציות, את הכלים, את הסחורה ואת רע, אני בטוח שאתה תקבל עד מהירות עם גוטנברג.
כאמור, גוטנברג חושף שפע של ממשקי API, מספיק כדי לעשות כמעט כל דבר לבלוק שלך. אתה יכול לבחור אם קוד הבלוק שלך עם JavaScript רגיל הישן, JavaScript עם תחביר ES6, תגובה, או אפילו Vue.
רעיונות והשראות
יצרתי בלוק גוטנברג מאוד (מאוד) פשוט שניתן למצוא במאגר של חשבון Github שלנו. יתר על כן, אני גם להרכיב מספר מאגרים מאיפה אתה יכול להניע השראה על בניית בלוק מורכב יותר.
- Gutenblocks - אוסף של בלוקים על ידי Mathieu וייט נכתב ב- JavaScript עם תחביר ES5
- Jetpack Gutenblocks פרויקט - אוסף של בלוקים ארוזות Jetpack
- רשימה של דוגמאות של יישום Gutenberg כולל עם Vue.js
הפניה נוספת
- מאגר רשמי של גוטנברג
- גוטנברג