اگر چندین سال است که از وردپرس^(WordPress) استفاده می‌کنید، به یاد می‌آورید زمانی که افراد وردپرس^(WordPress) ویرایشگر گوتنبرگ^(Gutenberg) را در وردپرس 5.0^{(WordPress 5.0)} در سال 2018 عرضه کردند.

این ویرایشگر پیش‌فرض جدید یک اصلاح اساسی برای ویرایش پست‌ها و صفحات در سایت شما بود. این جعبه متن بزرگی را که صاحبان وب سایت به آن عادت کرده بودند به یک پلت فرم ویرایش مبتنی بر بلوک بسیار متفاوت تبدیل کرد.

برخی از صاحبان وب سایت به قدری از آن متنفر بودند که از ارتقاء به وردپرس 5.0^{(WordPress 5.0)} اجتناب کردند و تا زمانی که ممکن بود با ویرایشگر پیش فرض کلاسیک باقی ماندند. سایر صاحبان وب سایت به دلیل سادگی و سهولت استفاده از این تغییر استقبال کردند.

اگر در حال انتقال هستید و کنجکاو هستید که انتظار چه چیزی را داشته باشید، این آموزش گوتنبرگ وردپرس^{(WordPress Gutenberg)} شما را از طریق ویژگی های اصلی که باید بدانید و درک کنید، راهنمایی می کند. این باید انتقال شما را تا حد امکان آسان کند.

چه چیزی در وردپرس گوتنبرگ انتظار می رود^{(WordPress Gutenberg)}

نکته اصلی که باید در مورد ویرایشگر گوتنبرگ^(Gutenberg) بدانید این است که مبتنی بر بلوک است. این بدان معناست که هر چیزی که باید اضافه کنید از طریق بلوک ها مدیریت می شود. بلوک ها در گوتنبرگ^(Gutenberg) عبارتند از (اما محدود به موارد زیر نیست):

• پاراگراف
• سرتیتر
• تصویر
• فهرست کنید
• نقل قول
• کد
• پیش فرمت شده
• نقل قول
• جدول

چند بلوک پیشرفته دیگر نیز وجود دارد که به ندرت مورد استفاده قرار می گیرند. اگر افزونه های جدید وردپرس^{(new WordPress plugins)} را در ویرایشگر نصب کنید، ممکن است بلوک های اضافی را مشاهده کنید.

افزودن بلوک ها به سادگی انتخاب نماد + در سمت راست زیر آخرین بلوکی است که اضافه کرده اید.

انتخاب هر یک از بلوک ها از پنجره پاپ آپ، آن بلوک را به عنوان بخش بعدی در صفحه یا پست شما اضافه می کند. 

قبل از اینکه به این بلوک ها برسیم، بیایید از ابتدا شروع کنیم و یک پست جدید با استفاده از گوتنبرگ^(Gutenberg) در وردپرس^(WordPress) ایجاد کنیم .

ایجاد پست و اضافه کردن بلوک

افزودن یک پست نسبت به آخرین نسخه وردپرس^(WordPress) بدون تغییر باقی می ماند . فقط ^(Just)پست ها^(Posts) را از نوار ناوبری سمت چپ انتخاب کنید و در زیر آن  Add New را انتخاب کنید.^{(Add New)}

با این کار پنجره ویرایشگر پست باز می شود. اینجا نیز جایی است که همه چیز متفاوت است. ویرایشگر  پیش فرض گوتنبرگ وردپرس^{(Gutenberg WordPress)} را خواهید دید .

افزودن موارد بلوک^{(Block Items)} در ویرایشگر گوتنبرگ^{(Gutenberg Editor)}

می توانید عنوان پست خود را در قسمت عنوان تایپ کنید. سپس نماد + در سمت راست را انتخاب کنید تا اولین بلوک اضافه شود.

بلوک های پاراگراف^{(Paragraph Blocks)}

رایج ترین بلوکی که افراد بعد از عنوان اضافه می کنند، بلوک پاراگراف است. برای این کار از پنجره باز شده  گزینه Paragraph را انتخاب کنید.^(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) و ویجت‌های افزونه وردپرس
• ^(Embed)کد را برای سایت های اجتماعی، سایت های رسانه ای مانند YouTube و Spotify و غیره جاسازی کنید

سایر ویژگی های گوتنبرگ

لازم نیست بلوک هایی را که اضافه کرده اید در هر کجا که آنها را اضافه کرده اید بچسبانید. می‌توانید در پست خود به بالا رفته و نماد + را بین هر یک از بلوک‌های موجود انتخاب کنید. این به شما امکان می دهد بلوک های جدیدی را بین بلوک های موجود وارد کنید.

شما همچنین با قرار دادن بلوک های خود گیر نکرده اید. در ویرایشگر کلاسیک وردپرس^(WordPress) ، همیشه آسان نبود که چیزهایی مانند تصاویر را به بخش‌های دیگر پست خود منتقل کنید، بدون اینکه گاهی اوقات کدنویسی پس‌زمینه را بهم بزنید.

در گوتنبرگ^(Gutenberg) ، جابجایی عناصر مانند تصاویر به سادگی انتخاب بلوک و سپس انتخاب فلش های بالا یا پایین در نوار منوی بازشو برای حرکت بلوک به بالا یا پایین در پست است.

هر بار که فلش را انتخاب می کنید، یک موقعیت را در هر جهتی که انتخاب کرده اید مسدود می کند.

استفاده از ویرایشگر گلوتنبرگ^{(Glutenberg Editor)} در وردپرس^(WordPress)

منطقه پست تنها مکانی برای افزودن بلوک های جدید نیست. متوجه خواهید شد که یک منوی آیکون بسیار ساده در بالای ویرایشگر وجود دارد که می توانید از نماد + برای اضافه کردن بلوک نیز استفاده کنید.

سایر نمادهای این منو به شما امکان دسترسی سریع به سایر ویژگی های گوتنبرگ^(Gutenberg) را می دهد.

• نماد ویرایش^(Edit) قلم به شما امکان می دهد به حالت انتخاب بروید تا بلوک ها را راحت تر انتخاب کنید. برای بازگشت به حالت ویرایش ، روی یک بلوک ^(Edit)دوبار کلیک کنید .^{(Double-click)}
• نمادهای Undo^(Undo) یا Redo (فلش های منحنی چپ و راست) آخرین ویرایش شما را لغو یا دوباره انجام می دهند.
• نماد i (جزئیات) تعداد کاراکترها، کلمات، عناوین، پاراگراف ها و بلوک های پست شما را نشان می دهد.
• نماد Outline به شما امکان می دهد به سرعت به بلوک های پست خود بر اساس ترتیب آنها در طرح کلی پست خود پیمایش کنید.

برای بسیاری از افراد، ویرایشگر گوتنبرگ در ^(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 WоrdPress 5.0 back іn 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

• ۹ افزونه ضروری برای نصب جدید وردپرس

• نحوه انتقال از ویرایشگر کلاسیک وردپرس به گوتنبرگ

• چگونه برای مخفی کردن Quick Links در یک صفحه New tab در Edge با استفاده از Registry Editor

• چگونه WordPress site را از یک میزبان به دیگری حرکت دهیم

• نحوه نصب و راه اندازی WordPress در Microsoft Azure

• 7 نکته وردپرس برای یک وب سایت سازگار با موبایل

• Wix در مقابل وردپرس: کدام یک برای ایجاد وب سایت شما بهترین است؟

• چگونه برای پیکربندی Privacy در WordPress و چرا این مهم است

• چگونه بدافزار را از سایت وردپرس خود حذف کنیم

• کاربران تغییر مسیر از 404 صفحه در WordPress

• Squarespace در مقابل وردپرس: کدام پلتفرم سایت بهتر است؟

• Protect و Secure WordPress website از هکرها

• چگونه صفحات را در وب سایت وردپرس خود با رمز عبور محافظت کنیم

• چگونه یک صفحه را در وردپرس کپی کنیم

• نحوه اضافه کردن نوار کناری شناور در Wordpress

• چگونه URL ورود به وردپرس خود را برای امنیت بهتر تغییر دهیم

• نحوه افزایش سرعت سایت وردپرس در ۱۱ مرحله

• نحوه نصب تم در وردپرس

• 10 افزونه ضروری وردپرس برای یک وب سایت کسب و کار کوچک

• چگونه از سایت وردپرس خود بک آپ بگیرید