إذا كنت تستخدم WordPress منذ بضع سنوات ، فأنت تتذكر عندما طرح الأشخاص في WordPress محرر^(WordPress) Gutenberg في WordPress ^(Gutenberg)5.0^{(WordPress 5.0)} في عام 2018.

كان هذا المحرر الافتراضي الجديد بمثابة إصلاح شامل لتحرير كل من المنشورات والصفحات على موقعك. لقد حول مربع النص الكبير الذي اعتاد مالكو مواقع الويب عليه إلى نظام أساسي مختلف تمامًا للتحرير قائم على الكتل.

كره بعض مالكي مواقع الويب ذلك كثيرًا لدرجة أنهم تجنبوا الترقية إلى WordPress 5.0 وظلوا مع المحرر الافتراضي الكلاسيكي لأطول فترة ممكنة. تبنى مالكو مواقع الويب الآخرون التغيير لبساطته وسهولة استخدامه.

إذا كنت تقوم بعملية الانتقال ولديك فضول بشأن ما يمكن توقعه ، فإن هذا البرنامج التعليمي الخاص بـ WordPress Gutenberg سيرشدك^{(WordPress Gutenberg)} عبر الميزات الرئيسية التي تحتاج إلى معرفتها وفهمها. يجب أن يجعل هذا انتقالك أسهل ما يمكن.

ماذا تتوقع في WordPress Gutenberg

الشيء الرئيسي الذي يجب معرفته عن محرر Gutenberg هو أنه يعتمد على الكتلة. هذا يعني أن أي شيء تريد إضافته تتم إدارته عبر الكتل. تتضمن الكتل في Gutenberg (على سبيل المثال لا الحصر):

• فقرة
• رأس
• صورة
• قائمة
• يقتبس
• شفرة
• مهيأ مسبقا
• سحب الاقتباس
• الطاولة

هناك أيضًا بعض الكتل المتقدمة الأخرى التي نادرًا ما يتم استخدامها. قد ترى كتلًا إضافية إذا قمت بتثبيت مكونات WordPress الإضافية الجديدة^{(new WordPress plugins)} على المحرر.

تعد إضافة الكتل أمرًا بسيطًا مثل تحديد الرمز + الموجود على اليمين أسفل أحدث كتلة قمت بإضافتها.

يؤدي تحديد أي من الكتل من النافذة المنبثقة إلى إضافة تلك الكتلة على أنها القسم التالي في صفحتك أو منشورك. 

قبل أن نصل إلى هذه الكتل ، لنبدأ من البداية وننشئ منشورًا جديدًا باستخدام Gutenberg في WordPress .

إنشاء المنشورات وإضافة القوالب

تظل إضافة منشور بدون تغيير عن الإصدار الأخير من WordPress . ما عليك سوى^(Just) تحديد المنشورات^(Posts) من شريط التنقل الأيسر ، وتحديد إضافة جديد^{(Add New)} تحتها. 

سيؤدي هذا إلى فتح نافذة محرر النشر. هذا هو المكان الذي يختلف فيه كل شيء. سترى محرر  Gutenberg WordPress الافتراضي.^{(Gutenberg WordPress)}

إضافة عناصر الحظر^{(Block Items)} في محرر جوتنبرج^{(Gutenberg Editor)}

يمكنك كتابة عنوان المنشور الخاص بك في حقل العنوان. ثم حدد رمز + على اليمين لإضافة الكتلة الأولى.

كتل الفقرة^{(Paragraph Blocks)}

أكثر الكتلة الأولى شيوعًا التي يضيفها الأشخاص بعد العنوان هي كتلة فقرة. للقيام بذلك ، حدد فقرة^(Paragraph) من النافذة المنبثقة. 

سيؤدي هذا إلى إدراج حقل كتلة حيث يمكنك البدء في كتابة الفقرة الأولى من المنشور الخاص بك. تنسيق كتلة الفقرة^(Paragraph) يتبع الخط الافتراضي^{(the default font)} لكتل ​​فقرات موقعك. 

فيما يلي بعض النصائح حول إضافة كتل فقرة في محرر Gutenberg .

• يمكن أن تكون فقرتك طويلة كما تريد. سيتم التفاف النص تلقائيًا في السطر التالي ، تمامًا كما هو الحال في المحرر الكلاسيكي.
• إذا قمت بالضغط على Enter ، يقوم محرر Gutenberg تلقائيًا بإنشاء كتلة فقرة جديدة ، لكنها تبدو فقط كفقرة ثانية مع فاصل فقرة.
• سيؤدي تمييز أي نص في الفقرة إلى إظهار نافذة تنسيق حيث يمكنك تغيير تنسيق ذلك النص ، أو تعديل الكتلة إلى قائمة أو نوع كتلة آخر.
• حدد النقاط الثلاث وحدد إزالة الكتلة^{(Remove block)} لحذف فقرة واستبدالها بشيء آخر.

كتل الصورة^{(Image Blocks)}

إذا حددت كتلة الصورة^(Image) ، فسترى مربع صورة^(Image) حيث يمكنك تحديد زر تحميل^(Upload) لتحميل صورة في منشورك من جهاز الكمبيوتر الخاص بك. حدد ارتباط مكتبة الوسائط^{(Media Library)} لاستخدام صورة من مكتبة الوسائط الموجودة لديك ، أو إدراج من عنوان URL^{(Insert from URL)} للارتباط بصورة من موقع آخر.

سيؤدي هذا إلى إدراج الصورة في المقالة حيث أضفت كتلة الصورة الجديدة. ^(Image)ستلاحظ أنه يمكنك كتابة التسمية التوضيحية للصورة مباشرةً أسفل الصورة نفسها.

يمكنك استخدام نفس خيارات التنسيق على نص التسمية التوضيحية كما يمكنك في نص الفقرة العادي.

قائمة الكتل^{(List Blocks)}

عند إضافة كتلة جديدة وتحديد قائمة^(List) ، سيتم إدراج كتلة القائمة في تلك المرحلة في المقالة.

سيظهر رمز نقطي واحد ، ولكن أثناء الكتابة والضغط على Enter ، ستظهر كل رصاصة جديدة حسب حاجتك إليها.

يتبع تنسيق القائمة أيضًا نمط الخط وحجمه كما هو محدد بواسطة السمة الخاصة بك^{(your theme)} ، لذلك لا تتفاجأ إذا كان الخط في قائمتك يبدو مختلفًا عن كتل الفقرات الخاصة بك.

يمكنك تمييز النص في كتلة القائمة وسترى خيارات التنسيق لهذا النص إذا كنت تريد تغييره. لا يمكنك تغيير نمط الخط هنا ، ولكن يمكنك وضع خط غامق أو مائل أو إضافة ارتباط تشعبي أو تغيير نوع الكتلة بالكامل.

كتل أخرى^{(Other Blocks)}

إذا كنت تريد رؤية جميع الكتل المتاحة ، فحدد + لإضافة كتلة ، ثم حدد تصفح الكل^{(Browse all)} لرؤية القائمة بأكملها.

هذه القائمة طويلة جدًا في الواقع. أي شيء تتذكره كان متاحًا في المحرر الكلاسيكي عبر نظام القائمة الخاص به سيتم تضمينه هنا. وتشمل هذه الكتل الأخرى شائعة الاستخدام مثل:

• الجداول
• الملفات والوسائط
• أشرطة فيديو
• علامة "المزيد"
• فواصل الصفحات والفواصل
• أدوات مثل الرموز الاجتماعية ، وسحابات العلامات ، والتقويم^(calendar) ، وعناصر واجهة مستخدم WordPress الإضافية
• قم بتضمين^(Embed) رمز للمواقع الاجتماعية ومواقع الوسائط مثل YouTube و Spotify والمزيد

ميزات جوتنبرج الأخرى

لا يتعين عليك الالتزام بالكتل التي أضفتها أينما أضفتها. يمكنك التمرير احتياطيًا في المنشور الخاص بك وتحديد رمز + بين أي من الكتل الموجودة. سيسمح لك هذا بإدراج كتل جديدة بين الكتل الموجودة.

أنت أيضًا لست عالقًا في وضع الكتل الخاصة بك أيضًا. في محرر WordPress^(WordPress) الكلاسيكي ، لم يكن من السهل دائمًا نقل أشياء مثل الصور إلى أقسام أخرى من منشورك دون العبث أحيانًا بتشفير الخلفية.

في Gutenberg ، يكون نقل العناصر مثل الصور بسيطًا مثل تحديد الكتلة ثم تحديد السهمين لأعلى أو لأسفل في شريط القائمة المنبثقة لتحريك الكتلة لأعلى أو لأسفل في المنشور.

في كل مرة تحدد فيها السهم ، سوف ينزلق إلى موضع واحد في أي اتجاه حددته.

استخدام محرر جلوتينبيرج^{(Glutenberg Editor)} في ووردبريس^(WordPress)

منطقة النشر ليست المكان الوحيد لإضافة كتل جديدة. ستلاحظ وجود قائمة رمز بسيطة جدًا في الجزء العلوي من المحرر حيث يمكنك استخدام الرمز + لإضافة كتل أيضًا.

تمنحك الرموز الأخرى في هذه القائمة وصولاً سريعًا إلى ميزات Gutenberg الأخرى .

• تتيح لك أيقونة تحرير^(Edit) القلم التبديل إلى وضع التحديد لتحديد الكتل بسهولة أكبر. انقر نقرًا مزدوجًا فوق^{(Double-click)} كتلة للعودة إلى وضع التحرير^(Edit) .
• ستؤدي أيقونات التراجع^(Undo) أو الإعادة^(Redo) (الأسهم المنحنية اليمنى واليسرى) إلى التراجع عن التحرير الأخير أو إعادته.
• يوضح لك رمز i (التفاصيل) عدد الأحرف والكلمات والعناوين والفقرات والكتل في منشورك.⁽ⁱ⁾
• تتيح لك أيقونة Outline التنقل بسرعة إلى الكتل في منشورك بناءً على ترتيبها في مخطط المنشور.

بالنسبة للعديد من الأشخاص ، يستغرق محرر Gutenberg في ^(Gutenberg)WordPress بعضًا من التعود عليه. ولكن بعد تجربة مدى سهولة إنشاء وتحرير ومعالجة كتل من العناصر في مشاركاتك ، ستجد أن عملية إنشاء المنشورات والصفحات تتم بشكل أسرع وأكثر إنتاجية.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out thе Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 يجب أن يكون لديك إضافات لعمليات تثبيت WordPress الجديدة

• كيفية الانتقال من محرر WordPress الكلاسيكي إلى Gutenberg

• كيفية إخفاء Quick Links على صفحة New tab في Edge باستخدام Registry Editor

• كيفية نقل WordPress site من مجموعة واحدة إلى أخرى

• كيفية تثبيت و Setup WordPress على Microsoft Azure

• WordPress Jetpack: ما هو وهل يستحق التثبيت؟

• كيفية حماية الصفحات بكلمة مرور على موقع WordPress الخاص بك

• 8 حرة Premium WordPress مواضيع لتثبيت

• مراجعة الكتاب: قم ببناء موقع الويب الخاص بك: دليل فكاهي إلى HTML و CSS و Wordpress

• البرامج WordPress HTTP Error عند تحميل الصور

• 10 إضافات WordPress أساسية لموقع الأعمال الصغيرة

• كيفية تكرار صفحة في ووردبريس

• إنشاء Child Theme في WordPress

• كيفية تثبيت موقع اختبار WordPress على جهاز الكمبيوتر الخاص بك

• Must Have WordPress Yoast SEO Settings 2021

• كيفية تسريع موقع WordPress في 11 خطوة

• كيفية إنشاء قسيمة منبثقة خاصة بك في WordPress

• كيفية إزالة البرامج الضارة من موقع WordPress الخاص بك

• أفضل تنسيق لكتابة المدونة للحصول على نقاطك

• كيفية تغيير عنوان URL الخاص بتسجيل الدخول إلى WordPress لتحسين الأمان