Tag - Editor

16 Tips for Mastering the WordPress Content Editor


Majority of WordPress users spend most of their time using the content editor to write posts and create pages. WordPress comes with an intuitive Gutenberg block editor that is very easy to use.

However, as a power user, you can significantly increase your productivity by learning some of the lesser-known tricks. This would allow you to create highly engaging content in less time.

In this article, we will share our expert-tips for mastering the WordPress content editor. These tips will teach you how to use the WordPress content editor like a pro.

Expert tips on using the WordPress content editor

1. Learning The Basic Blocks

Blocks are the main building elements of the WordPress content editor, which is why it is sometimes referred to as the block editor.

Using blocks in WordPress content editor

Each element inside your content is made up of blocks. By default, WordPress comes with plenty of commonly used blocks such as paragraph, lists, images, galleries, and more.

You can use these blocks to create beautiful content layouts. This makes it important to explore different blocks and learn how you can use them in your content. We will mention some of the blocks later in this article as well.

2. Start Using Keyboard Shortcuts

Using keyboard shortcuts

It is inefficient to move the mouse just to make some text bold or add a link. The content editor comes with several useful keyboard shortcuts that helps you accomplish common formatting tasks without using the mouse.

Using keyboard shortcuts help you save time and make you a faster writer. Check out our guide on the most time-saving keyboard shortcuts in WordPress.

3. Single and Double Line Spacing

Many beginner level users find it difficult to figure out how to create paragraphs and line breaks in WordPress.

To add a new paragraph in the content editor, you simply need to press the Enter key. WordPress will add a new paragraph with double line spacing.

Adding double line spacing in WordPress

However if you only want a single line break, then you need to press Shift + Enter keys together.

Check out our guide on how to add single/double line spacing in WordPress.

4. Rearranging The Edit Screen

The content editor is basically a clean canvas with a top bar and a column on the right. This gives you a clean user interface to create your posts.

The editor displays a toolbar on top of the block that you are editing. You can move the toolbar by clicking on the three-dot menu in the top right corner of the screen.

Top toolbar

You can also show and hide the settings column by clicking on the gear icon at the top.

Hide settings column

WordPress also makes it easy to switch to the Spotlight mode which makes the block you are in more noticeable by dimming rest of the content.

Spotlight mode

Need more white space on the screen? Switch to the fullscreen mode which gives you a clean canvas with just the toolbar at the top.

fullscreen mode

5. Changing Font Size in WordPress Visual Editor

We understand that typography plays a very important role in web content. You may want to use different font sizes to grab your audience’s attention or highlight different sections in a lengthy article.

Change font size in WordPress content editor

Simply select the block where you want to change the font size, and you will see the font size option in the block settings on the right.

6. Add Headings into Your Articles

Headings play an important role in improving readability. This is why search engines like Google also consider headings to be important for SEO. Using your focus keywords (words that users will use to search) in headings helps search engines understand the importance of those keywords.

The content editor makes it easy to add headings to your articles. Simply select a heading block and then select a heading size and text alignment from the block settings.

Adding headings to your articles in WordPress content editor

You can also add a link to your heading, make it bold, or italicize it.

7. Adding Columns to Your Posts

WordPress content editor comes with a built-in column block, which allows you to add content into columns. This makes it easy to give your text a magazine like look.

Simply select and add a columns block to your editor. You can select the number of columns you want to add from the block settings.

Adding columns to your posts

Each column will automatically contain a paragraph block. You can easily add any other blocks that you want inside each column. For example, blockquotes, images, paragraphs, and more.

However, if you want to add an image next to some text, then you’d want to check the next tip.

8. Adding Image Next to Text

In older versions of WordPress, it was quite challenging to add an image right next to some text with proper alignment. This problem was fixed with the Media & Text block.

Media and text block in WordPress content editor

It allows you to add an image next to the text block. It automatically adjusts the width and spacing between the two blocks.

You can make the block full-width and use the formatting options for the text block.

9. Adding YouTube Videos in WordPress

You can upload videos to your WordPress site. However, WordPress is not made to be used as a streaming platform and most WordPress hosting companies cannot serve large files adequately.

To learn more about this, see our article about why you should never upload videos to your WordPress site.

Instead, we recommend uploading your videos to YouTube or other stream sites and then embed them into your WordPress posts and pages.

Adding YouTube block in WordPress content editor

You can use the YouTube block to simply paste the URL of the video you want to add, and WordPress will automatically embed it for you.

You can also paste the video URL inside a paragraph or any text block, and WordPress will automatically convert it into the YouTube block.

Auto embed YouTube videos in WordPress

10. Creating Tables in WordPress Posts

The post editor also comes with a block to easily add tables into your WordPress posts and pages.

Simply add the table block and then select the number of columns and rows you want to add. Don’t worry you would always be able to add more columns and rows later as needed.

Enter the rows and columns for your table

After that, you’ll see a plain table. You can add content to table cells and choose table colors / style from the block settings.

Table block preview

The WordPress table block is good for basic tables, but it lacks many features. For example, you cannot select the header row, make columns sortable, highlight rows, and more.

This is why we recommend using TablePress. It’s a free plugin that allows you to create beautiful tables and add them to your WordPress posts and pages.

To learn more, see our guide on how to easily add tables in WordPress posts.

11. Adding Buttons in WordPress Posts and Pages

Buttons play an important role when you want to add a call to action into your WordPress posts or pages.

The content editor comes with a basic button block that lets you quickly add a button into your content.

The default Button block in WordPress

The button comes with three styles: squared, rounded, and with a border. You can also select the background, text color and align the button to center, left, or right.

12. Add Cover Images in WordPress Posts

You may have seen cover images used in the middle of an article on popular publications like the New York Times. A cover image is simply an image placed in the middle of an article, sometimes with an overlaying text.

The purpose of the cover image is to make your content more engaging. It also provides your users with a break from reading the text and look at an image to capture their attention.

The content editor makes it easy to add cover images into your posts. Simply add a Cover Image block and then upload the image you want to use. Ideally, it should be a larger image file that looks good in the wide format.

Cover image block

For more details, see our article on cover image vs featured image and how to use them on your blog.

13. Change Paragraph Colors

Another neat trick that often goes unnoticed, is the ability to change the colors. Most folks want to keep their text consistent throughout the article.

However, occasionally using colors can help you redirect user attention and highlight important parts of an article.

The content editor shows you color options in the right column, you can choose any colors you want. Just make sure the background and text color combination you choose is easy to read.

Change background and text color in content editor

14. Add Widgets into Your Posts

Widgets are quite similar to the blocks. They allow you to add web elements to your WordPress site without adding code.

Typically widgets are commonly used in sidebars or footer area of a website. However, you can also add some widgets to the content area such as contact forms.

Simply look for the Widgets section under the add blocks button. From here, you can use the commonly used widgets in your posts and pages.

Adding widgets in WordPress posts and pages

15. Adding Custom HTML in WordPress Posts

The content editor in WordPress is a fully visual WYSIWYG editor. However you can still add HTML code if you need to.

The easiest way to do this is by adding the Custom HTML block to your post. After that, you can simply paste the HTML that you want to add.

Adding custom HTML in WordPress post

16. Get The Word Count and Other Stats for Your Posts

When working on a lengthy article, you may want to see the quick outline of the article, how many words it has, and how everything is placed.

The content editor toolbar has two buttons for that on the top. First, the info button which shows you the word count, paragraphs, blocks, and article outline based on headings you have used.

Article stats

Right next to it is the block navigation button. It shows you all the blocks you have used in your article, and you can click on a block to directly jump to it.

Jump to a block in your post

We hope this article helped you discover new tips for mastering the WordPress content editor. You may also want to see our guide on how to create an email newsletter and get more blog traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Use Distraction Free Full Screen Editor in WordPress


Crafting your blog posts is a creative process that requires attention to details and concentration. Many writers feel distracted by the on-screen elements of the WordPress writing interface like buttons, columns, toolbars, etc.

WordPress comes with a built-in distraction-free mode for writing. It hides unnecessary elements and gives you a fullscreen canvas to create content.

In this article, we will show you how to use the distraction-free fullscreen editor in WordPress. You will be able to switch between regular and distraction free mode without affecting your content.

Using a distraction-free fullscreen editor in WordPress

The first thing you need to do is log in to your WordPress dashboard and go to Posts » Add New to create a new post. You’ll see the post editor with the toolbar and settings columns.

WordPress Post Editor

As you can see in the screenshot above, a WordPress editor screen has the dashboard menu on the left, the document (post) settings on the right, and toolbar on the top.

While these options are important, you don’t need them all the time.

The distraction free editor allows you to hide them while writing and show them only when needed.

To enable the fullscreen mode, you need to click on the three dots icon on the top right corner of the screen. You will see the hidden options and tools including View modes, Editor options, plugin options, and more.

Simply click on the ‘Fullscreen Mode’ option.

Select Fullscreen Mode in WordPress Post Editor

It will hide the WordPress menu on the left and the top toolbar. Now your screen would look much cleaner.

WordPress Editor when Fullscreen Mode Enabled

The new WordPress editor is a block-based editor where you need to use a new block for every piece of content.

WordPress blocks

If you make a content-heavy post, then there will be several blocks visible on the screen at one time.

But what if you wanted to simplify it even further?

This is where ‘Spotlight Mode’ comes in handy. Enabling Spotlight mode will highlight the current block you are working on and dim all other blocks.

Simply click on the three dots icon on the top right corner of the screen and then select the Spotlight Mode.

Enable Spotlight Mode in WordPress Editor

Now you can add / edit content on your block without any distractions around. For example, in the screenshot below you will only see the Paragraph block in full color while others are faded out.

Spotlight Mode Enabled in WordPress Editor

There are two toolbars you will still see on the screen. The one on the top allows you to add new blocks, undo changes, and show an outline of your article.

The second toolbar is the one that appears on top of each block. Most of the times, the block toolbar overlaps with the other block just above it. This can be confusing.

To clean this up, you can move the block toolbar to the top as well. Simply click on the 3 dots icon on the top right corner and then select the ‘Top Toolbar’ option.

Top Toolbar Option in WordPress Editor

Now your block tools for every block will in a single place, on the top.

Top Toolbar Enabled in WordPress Post Editor

You can also hide the Document/Block Settings box on the left. The box includes important metadata fields like categories, tags, featured image, etc. for your post and block style settings.

But if you don’t need it, then simply click on the Settings icon to hide the Document/Block Settings box.

WordPress Editor Settings Icon

You can show it again by clicking on the same icon.

Also, you can use the keyboard shortcut Ctrl +Shift + , (Command + Shift + , for Mac) to hide or show the Document/Block settings.

Using Distraction Free Editor in Classic WordPress Editor

If you have not upgraded your website to WordPress 5.0 or a later version, then your post editor looks and works differently. It’s called the Classic Editor.

To launch the full-screen mode in the Classic Editor, you need to click on the ‘Distraction-free writing mode’ button in your post menu bar.

Distraction-free Writing Mode in Classic WordPress Editor

WordPress will now gracefully convert the post edit screen into a clutter-free full-screen editor.

Distraction-free Writing Mode Enabled in Classic Editor

The full-screen editor has a minimalist layout. It has a menu bar on top of the screen with the text formatting options.

Just like the regular post edit screen, full-screen editor is also available in both visual and text editor.

The visual editor in full screen mode allows you to make text bold or italic, create lists, add links, and insert media using the buttons. Most WordPress keyboard shortcuts will work just like they did on the default edit screen.

Fullscreen Classic WordPress Editor in Visual Mode

Switching to text editor will hide all those buttons. You will only see buttons to add links or insert media.

Fullscreen Classic WordPress Editor in Text Mode

Full screen editor does not have a Publish button or any meta boxes to choose categories and tags. After writing your post, you can exit the full screen mode to select your post options.

You can click the same ‘Distraction-free writing mode’ icon to exit the full-screen mode. Alternatively, you can use the keyboard shortcut Shift+Alt+W to enable or disable the full-screen mode in WordPress Classic editor.

In our experience, the full-screen mode allows us to write faster. Several students have told us that they use this distraction free mode in WordPress when writing research papers.

We hope this article helped you to use distraction free full screen editor in WordPress. You may also want to see our guide on how to check grammar and spelling mistakes in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use Distraction Free Full Screen Editor in WordPress appeared first on WPBeginner.



Source link

How to Add and Align Images in WordPress Block Editor (Gutenberg)


Images bring life to your WordPress posts and pages by making them more engaging. However, many beginners struggle with aligning images just the way they like.

The new WordPress block editor (Gutenberg) solves this problem by making it easier to add and align images in WordPress.

In this article, we will show you how you can easily add and align images in the WordPress to create beautiful content layouts.

Adding and properly aligning images in WordPress

Image Alignment in WordPress Editor

Previously, WordPress used a text area with editing buttons as its default editor. One particular issue in the old editor was image alignment.

Even though there were options to align images left, right, or center, they didn’t always look good. Sometimes images didn’t align, were not the exact size, or just looked odd.

WordPress 5.0 introduced a new WordPress post editor called the Gutenberg block editor. It fixed several problems with the old editor including the image alignment issues.

Let’s take a look at how you can easily add and align images in the new editor to create beautiful layouts for your posts and pages.

Add and Align Images in WordPress

The new editor comes with the following blocks that you can use to add images into your WordPress posts and pages.

  • Image
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

Let’s start with a simple image block first.

Click on the ‘Add new block’ button or type /image in the post editor to insert an image block.

Adding a new image block in WordPress post editor

You will see three buttons inside the blank image block.

You can upload an image from your computer, select an already uploaded image from the media library, or insert an image by providing the image file URL.

Next, click on the ‘Upload’ button and then select the image you want to upload from your computer.

As soon as you select the image, WordPress will upload it to your media library and insert it into the image block.

Image options in WordPress post editor

Now, you will notice a toolbar on top of your image and some image block settings in the right column. To align your image, you’ll be using the toolbar that appears on top of the image.

Image alignment buttons in WordPress post editor

The image block gives you the following image alignment options as buttons in the toolbar.

  • Align left
  • Align Center
  • Align Right
  • Wide Width
  • Full Width

If your image is smaller in width, then aligning it to the left or right will bring up text next to the image. Aligning it to the center will display the image on its own row with no text on either side.

Center align an image in WordPress

Choosing the wide width option will make your image wider than the text area, and the full-width option will push it to the right and left edges of the browser screen.

Making an image full-width in WordPress

How to Perfectly Align an Image Next to Text

A lot of times you may need to perfectly align an image next to some text. WordPress block editor makes this easy by adding the Media & Text block.

This block basically adds a two-column area. One column for images (media) and the second column for text content.

Media and text block in WordPress post editor

Simply upload your image and then add the text you want to display next to it.

Image and text block settings

After adding the image and text, you will notice more options for the block. You can make the whole block wider or full-width, you can also switch the image and text sides.

The image’s alignment will automatically adjust to the height of the text in the next column.

Image size adjusts to align vertically

How to Align Gallery Images in WordPress

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

The Gallery block comes with similar alignment options in the toolbar.

You can make the entire gallery block align to the left, center, or right. You can also make it wide or change it to a full-width row.

Align gallery images in WordPress post editor

The default gallery feature in WordPress is quite good. However, if you regularly add photo galleries to your WordPress posts and pages, then consider using a photo gallery plugin like Envira Gallery.

These plugins will give you more options to align images in your photo galleries, display them in the popup, and style them differently.

How to Add Two Images Side by Side in WordPress

The easiest way to display two images side by side in a WordPress post is by adding both images in a Gallery block.

Display two images side by side in WordPress posts and pages

Simply select a 2-column layout for the gallery block to display both images next to each other. You can also check the ‘crop thumbnail’ option to make sure that both images are of the same size.

More Ways to Add and Align Images in WordPress

Apart from the image, media and text, and the gallery block, you can also use the Cover block to add a cover image.

In modern web design, cover images are used to create highly engaging content layouts. These images are used for highlighting different sections of a page.

The cover image block comes with the same alignment options as an image block. You can add text over the image and choose an overlay color from the block settings. The best part is that you can check the ‘Fixed Background’ option which creates a parallax background effect.

Adding cover image in WordPress post

To learn more about using cover images, check out our article on the difference between featured images and cover image in WordPress.

So far we have talked about adding images directly to your posts and pages. What about images from third-party sites?

The block editor makes this easy as well. It comes with embed blocks for popular social sharing sites including Instagram, Flickr, Imgur, Photobucket, and more.

For example, if you want to add an Instagram photo, then simply add the Instagram block to the post editor and enter the URL of the post you wanted to share.

Adding Instagram images in WordPress posts and pages

WordPress will automatically fetch the Instagram post and embed it for you. After that, you will be able to use the alignment options in the toolbar.

Instagram embed in WordPress

Embed blocks also allow you to easily embed videos in WordPress. After that, you can use the same options in the toolbar to align videos in WordPress.

We hope this article helped you learn how to easily add and align images in the WordPress block editor. You may also want to see our guide on how to optimize images to speed up WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Update Your Old WordPress Posts with Gutenberg Block Editor


Wondering how to update your old blog posts with Gutenberg, the new WordPress block editor? If you haven’t upgraded to WordPress 5.0, then you’re not alone.

A lot of readers are concerned because Gutenberg is a completely new experience. The good news is that your old articles are safe even after upgrading to Gutenberg. In this article, we’ll show you how to update your old articles with Gutenberg, the new WordPress Block editor.

You may also want to know what will happen to your existing content after upgrading your blog to Gutenberg.

update-your-old-articles-with-gutenberg

What’s The Difference Between Classic Editor and Gutenberg Editor?

Before we get started, let’s first discuss the major differences between the old Classic Editor and the new Gutenberg Editor.

The Classic Editor was a text editor that looked very similar to Microsoft Word. It had a single editing field with formatting options at the top. Here’s what the Classic Editor looks like:

Old WordPress editor

On the other hand, the new Gutenberg editor is a fully block-based editor. You’ll add all the content in the form of blocks. Here’s how the Gutenberg Block Editor looks like:

New WordPress Block Editor also known as Gutenberg

Blocks are content elements which are separate from each other with their own set of formatting options. There’re individual blocks for every piece of content including:

  • Regular text or paragraph
  • Image
  • Button
  • Gallery
  • List
  • Table
  • Embeds, etc.

Plus, you can find more blocks and widgets provided by your plugins and theme.

gutenberg-blocks

In order to create or edit a post in the new Gutenberg editor, you’ll need to use blocks. Here’s how to update your old blog posts and pages with Gutenberg block editor.

Editing Your Older WordPress Articles with Gutenberg

If you’ve updated your WordPress blog to 5.0 or the later version, then you’ll have the new Gutenberg block editor as your default editor.

The good part about Gutenberg is that it doesn’t affect any of your old content, and you can easily edit them.

To edit an older article, simply edit it as you would normally do in WordPress.

On the post edit screen, you’ll see the entire content wrapped inside a single Classic block.

classic-block-guteberg-edit

The same post would look like the screenshot below in the old classic editor.

classic-wp-editor

As you can notice, the content is same however the way it’s organized looks slightly different.

Yes, that’s the only change you’ll see.

The new WordPress block editor will not make any changes to the content, and it would still look the same on your website.

Now, you have two options to edit your old blog posts and pages:

  1. Continue editing inside the Classic block
  2. Convert your old content to new Gutenberg blocks
  3. The first option is to continue editing your old article inside the Classic block.

    The Classic block offers you the same Classic editor interface with formatting options at the top. This should be fairly straight forward.

    The second option is converting your old content into new Gutenberg blocks.

    You can do this by clicking on the three-dot menu option on the top right corner of Classic block.

    From the menu dropdown, you need to select Convert to Blocks option.

    convert-to-blocks-wp-block-editor

    That’s it!

    Your old content will be automatically converted into appropriate blocks. The content inside the Classic block will be split into several different blocks.

    wp-block-editor-classic-block-converted

    Now, you can edit your old article using the new Gutenberg editor blocks. Each block is a separate entity with its own formatting options, styles, and design options.

    For example, in our screenshot above, there’s an image block and a paragraph block.

    If you want to make changes to how the image appears, then you can simply click the image to select the block, and the editing options will appear at the top.

    You will also see more options under the Block tab in the right column of the screen.

    image-block-edit-options

    You can realign the image, make it full width, add Alt text, change image dimensions, add a link, and more.

    Following the same process, you can edit all of the blocks and make your article look visually impressive.

    Once you’re done making all the necessary edits, you can simply click the Update button at the top right of the screen to save your changes.

    Note: Although Gutenberg works fine with most themes and plugins, some may still not have Gutenberg support. It’s better to test your theme and plugins for Gutenberg compatibility before switching to it.

    The new WordPress Gutenberg editor offers an easy and flexible way of creating content in WordPress. However if you are not ready to use it yet, then you can disable Gutenberg and keep using the classic editor.

    You can keep using the Classic editor until 2022 which should be enough time for getting familiar with the new WordPress block editor. We have a complete Gutenberg Block Editor tutorial for beginners that you should check out.

    We hope this article helped you learn how to update your old articles with Gutenberg Block Editor. You may also want to see our list of the must have WordPress plugins for professional websites.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Update Your Old WordPress Posts with Gutenberg Block Editor appeared first on WPBeginner.



    Source link

How to Create a Reusable Block in WordPress Block Editor (Gutenberg)


Do you often use the same content snippets in your WordPress posts? If you do, then you’ll love the Reusable Block feature in the new WordPress block editor. It allows you to save any content block and reuse them in other posts and pages on your website.

In this article, we will show you how to easily create a reusable block in WordPress Block editor also known as Gutenberg. We will also show you how to add reusable blocks in your WordPress posts and export them to use on your other WordPress websites.

Creating a reusable block in WordPress Gutenberg editor

What is a Reusable Block in WordPress Block Editor (Gutenberg)?

A reusable block in WordPress editor is a content block saved individually to be used later.

Many bloggers often add the same content snippets in multiple articles such as call-to-actions at the end of the blog post or links to follow the blog in social media.

Most people just save their content snippets as text files on their computers and then copy and paste them when needed.

The Gutenberg WordPress editor solves this problem by introducing reusable blocks.

Basically, you can now save content snippets in your WordPress editor and then reuse them anywhere almost instantly.

Following are just some of the scenarios when a reusable block can help you work more efficiently:

  • Asking users to follow you on social media at the end of each article.
  • Adding call-to-action buttons in your WordPress posts and pages.
  • Saving and reusing tables
  • Quickly adding feedback forms to your pages
  • Manually adding inline affiliate banners
  • and more…

That being said, let’s take a look at how to easily create a reusable block in WordPress block editor.

Creating a Reusable Block in WordPress Editor

All Gutenberg blocks are individual content elements in WordPress editor and they can be saved individually as a reusable block

First, you need to create a new post or edit an existing one. On the post edit screen, click on the add new block button and then choose a block type according to the content you are going to save.

Add a new block to Gutenberg editor

In this example, we are going to save a few lines of text in a paragraph block.

After adding the block, you need to add the content that you want to reuse. You can use the styling and formatting options in the block toolbar and block settings.

Editing a block

Once you are done editing, click on the three-dot menu button in the toolbar and then select ‘Add to Reusable Blocks’ option.

Add to reusable blocks

You will be asked to enter a name for the reusable block. We recommend using a name that helps you quickly identify the block and what it does.

Add block name

Finally, click on the Save button to store your reusable block.

Your block will be saved in the WordPress database with all its settings.

Adding Reusable Block in Other Posts and Pages

Now that we have learned how to create a reusable block in WordPress, let’s see how to add reusable blocks in your WordPress posts and pages.

Once again create a new post or edit a post where you want to add the reusable block. On the post edit screen, click on the add new block button.

Your reusable block is located under the ‘Reusable’ tab. You can also find it by typing its name in the search box.

Adding reusable block

You can take your mouse over it to see a quick preview of the block. Go ahead and click on the block to insert it into your post.

Your reusable block will appear in the post editor.

Reusable block added into a post

You can also edit the reusable block by clicking on the edit button on the block.

However, please keep in mind that changing a reusable block will change it on all locations where you have used it.

If you just want to make a change that only appears on this particular post, then you need to convert it to a regular block first.

Click on the three-dot menu in the block toolbar and then select ‘Convert to Regular Block’ option.

Convert to regular block

This will convert your reusable block into a regular block, and you will be able to make changes to it without affecting the original reusable block.

Managing All Reusable Blocks in WordPress Editor

After using reusable blocks for a while, you may have some blocks that you don’t use anymore or some blocks that you want to rename.

Gutenberg Editor allows you to easily manage all your reusable blocks from one screen.

To manage your blocks, click on the add block button and then locate the Reusables tab. You’ll see a link to manage your reusable blocks page.

Manage reusable blocks link

Clicking on the link will bring you to block management page. From here, you can edit, delete, export, and import your blocks.

Manage reusable blocks

Exporting / Importing Reusable Blocks

Reusable blocks are not just reusable on the website they were created for. You can also use them on any other WordPress website.

You can export the blocks from the block management screen. Simply click on the export button below a block, and WordPress will send it to you as a JSON file.

Exporting a reusable block

You can now switch to another WordPress site’s admin area. Go to the block management screen and then click on the ‘Import from JSON’ button.

This will show a file upload box. Click on the choose file button to select the block you downloaded earlier and then click on the import button.

WordPress will now import your reusable block and save it in the database. You can go ahead and start using it on the new site.

We hope this article helped you learn how to create a reusable block in WordPress Gutenberg editor. You may also want to see our tips on growing your online business without spending a fortune.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Use the New WordPress Block Editor (Gutenberg Tutorial)


In WordPress 5.0, the classic content editor was replaced with a brand new block editor, known as Gutenberg. Since then, several of our readers have asked us to create a comprehensive tutorial on how to use the Gutenberg block editor in WordPress.

WordPress block editor is a totally new and different way of creating content in WordPress. In this tutorial, we will show you how to use the new WordPress block editor and master it to create visually stunning blog posts and pages.

Using the new WordPress block editor aka Gutenberg

What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?

Before we dive into the new editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Classic Editor.

Here is what the classic editor in WordPress looked like:

Old WordPress editor

If you upgrade to WordPress 5.0, then this is what the new block editor looks like:

New WordPress Block Editor also known as Gutenberg

As you can see, they are two completely different editors for creating content in WordPress.

The old classic editor was a text editor with formatting buttons very similar to Microsoft Word.

The new editor uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor).

Blocks are content elements that you add to the edit screen to create content layouts. Each item you add to your post or page is a block.

You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements and more can be added by WordPress plugins.

How is the new WordPress block editor better than the classic editor?

The new WordPress block editor offers a simple way to add different types of content to your posts and pages.

For example, previously if you wanted to add a table in your content, then you needed a separate table plugin.

With the new editor, you can simply add a table block, select your columns and rows, and start adding content.

Table block

You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.

Most importantly, the new WordPress block editor is easy to use and learn.

This gives an immense advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.

That being said, let’s take a look at how to use the new WordPress block editor like a pro to create great content.

Here is what we will cover in this Gutenberg tutorial:

  1. Using Gutenberg – The new WordPress block editor
  2. Creating a new blog post or page
  3. How to add a block in Gutenberg
  4. Working with blocks in the new editor
  5. Saving and reusing blocks in Gutenberg
  6. Publishing and post settings in Gutenberg
  7. Plugin settings in new editor
  8. Adding some common blocks in Gutenberg
  9. Exploring some new content blocks in Gutenberg
  10. Bonus tips on using Gutenberg like a pro
  11. Adding more blocks to Gutenberg Block Editor
  12. FAQs about Gutenberg

Ready? Let’s dive in.

Using Gutenberg – The New WordPress Block Editor

The block editor is designed to be intuitive and flexible. While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.

Let’s start with covering the basic things that you did in the classic editor, and how they are done in the block editor.

Creating a New Blog Post or Page Using The Block Editor

You will start creating a new blog post or page like you normally would. Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.

Adding a new post

This will launch the new block editor.

How to Add a Block in Gutenberg

The first block of every post or page is the title.

After that, you can use the mouse to move below the title or press the tab key on your keyboard to move down and start writing.

Adding a post title in Gutenberg

By default, the next block is a paragraph block. This allows users to start writing right away.

However, if you want to add something different, then you can click on the add new block button on the top left corner of the editor, below an existing block, or on the left side of a block.

Add new block button

Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.

You can click on tabs to browse block categories or type in the keyword to quickly search for a block.

Finding and adding blocks in Gutenberg

If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.

Working with Blocks in The New Editor

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.

For example, in this screenshot, we are working in a paragraph block which shows basic formatting buttons like: text alignment, bold, italic, insert-link, and strikethrough buttons.

Each block comes with its own toolbar

Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.

Block settings

You can move blocks up and down by simple drag and drop or by clicking the up and down buttons next to each block.

Moving a block up and down

Saving and Reusing Blocks in Gutenberg

One of the best things about blocks is that they can be saved and reused individually. This is particularly helpful for bloggers who frequently need to add specific content snippets to their articles.

Simply click on the menu button located at the right corner of each block’s toolbar. From the menu, select ‘Add to reusable blocks’ option.

Saving a block to reuse later

You will be asked to provide a name for this reusable block. Enter a name for your block and then click on the save button.

Giving a name to reusable block

The block editor will now save the block as a reusable block.

Now that you have saved a block, let’s see how to add the reusable block into other WordPress posts and pages on your site.

Simply edit the post or page where you want to add the reusable block. From the post edit screen, click on the add block button.

You will find your saved block under the ‘Reusable’ tab. You can also find it by typing its name in the search bar.

Insert a reusable block

You can take your mouse over it to see a quick preview of the block. Simply click on the block to insert it into your post or page.

All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link.

Manage your reusable blocks

This will bring you to the block manager page. From here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress website.

Import export reusable blocks in WordPress

Publishing and Managing Options in Gutenberg Block Editor

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more.

All these options are neatly placed in the right column on the editor screen.

Document settings in Gutenberg the new WordPress editor

Plugin Options in Gutenberg

WordPress plugins are able to take advantage of the block editor’s API to integrate their own settings within the edit screen.

Some popular plugins are already available as blocks. For example, WPForms, the best WordPress form builder plugin allows you to add forms into your content using a widget block.

WPForms block in new Gutenberg editor

Here is how Yoast SEO allows you to edit your SEO settings in the new editor:

Yoast SEO settings in new Gutenberg editor

WooCommerce also comes with widget blocks that you can easily add to any of your WordPress posts and pages.

WooCommerce products block

Adding Some Common Blocks in New Editor

Basically, the new editor can do everything the classic editor did. However, you will be doing things way quicker and elegantly than before.

1. Adding an image in new WordPress editor

There is a ready to use image block in the new WordPress editor. Simply add the block and then upload an image file or select from the media library.

Image block in new WordPress editor

You can also drag and drop images from your computer, and the editor will automatically create an image block for it.

Once you have added an image, you will be able to see the block settings where you can add metadata for the image like alt text, size, and add a link to the image.

Image block settings

2. Adding a link in new block Editor

The block editor comes with several blocks where you can add text. Most commonly used one is the paragraph block which comes with an insert link button in the toolbar.

All other commonly used text blocks also include a link button in the toolbar.

Link button in the list block

You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.

3. Adding an image gallery in Gutenberg

The gallery block works like the image block. You add it and then upload or select image files.

Adding image gallery in new WordPress editor

4. Adding shortcodes in WordPress posts using Gutenberg

All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.

Adding a shortcode block

Exploring Some New Content Blocks in Gutenberg

The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.

Following are some of the favorites that we believe users will find immensely helpful.

1. Adding an image next to some text in WordPress

Using the old editor, many of our users were unable to place an image next to the text. You can do this now with the Media & Text block.

Media and Text block

This simple block comes with two blocks placed side-by-side allowing you to easily add an image and add some text next to it.

2. Adding a button in WordPress posts and pages

Adding a button to your blog posts or pages was another annoyance in the classic editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.

Gutenberg comes with a button block that allows you to quickly add a button to any post or page.

Adding a button block in Gutenberg

You can add a link for your button, change colors, and choose from three button styles.

3. Adding beautiful cover images in blog posts and landing pages

Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images to your posts and pages.

A cover image is a wider image often used as a cover for a new section in a page or the beginning of a story. They look beautiful and allow you to create engaging content layouts.

Simply add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create parallax effect when users scroll down the page.

The cover image block in Gutenberg editor

4. Creating tables inside articles

The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.

New Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.

Table block

You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.

5. Creating multi-column content

Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add Columns block, which basically adds two columns of paragraph blocks.

Multi-column content

This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.

Bonus Tips to Use Gutenberg like a Pro

Looking at the new block editor, you may be wondering whether you will be spending more time adding and adjusting blocks than creating actual content?

Well, the new editor is incredibly fast and even very basic usage for a few minutes will allow you to instantly add blocks without even thinking.

Pretty soon you will realize how much faster your workflow will become with this new approach.

For power users, here are some bonus tips to help you work even faster with the new WordPress editor.

1. Move the block toolbar to the top.

As you may have noticed in the screenshots that there is a toolbar that appears on top of every block. You can move this toolbar to the top of the editor.

Simply click on the three-dot button at the top right corner of the screen and then select the Top Toolbar option.

Move the block toolbar to the top of the editor

2. Use keyboard shortcuts

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.

Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.

For more shortcuts, click on the three-dot menu on the top-right corner of your screen and then select ‘Keyboard Shortcuts’.

Launch keyboard shortcuts

This will bring up a popup with the list of all the keyboard shortcuts that you can use. The list will have different shortcuts for Windows and Mac users.

3. Drag and drop media to automatically create media blocks

Gutenberg allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you.

You can drop a single image or video file, and it will create the block for you. You can also drop multiple image files to create a gallery block.

Drag and drop gallery block in new WordPress editor

4. Adding YouTube, Twitter, Facebook, Vimeo, and other embeds

Gutenberg introduces new embed blocks to the block editor. There is a block for all supported embed types including YouTube, Twitter, Facebook, and more.

Embed blocks

However, you can just copy and paste the embed URL at any point, and it will automatically create a block for you.

For example, if you added a YouTube video URL, it will automatically create a YouTube embed block and display the video.

YouTube embed

Adding More Blocks to Gutenberg Block Editor in WordPress

The new block editor in WordPress allows developers to create their own blocks. There are some awesome WordPress plugins offering block bundles for the new editor.

Here are a few of them:

1. Advanced Gutenberg

Advanced Gutenberg

Advanced Gutenberg comes with several blocks for popular content elements like WooCommerce product slider, testimonials, maps, counter, tabs, accordions, and more.

It also gives you advanced control on which users can access blocks based on their user roles. You can create user profiles and select which blocks they can add.

2. Stackable – Gutenberg Blocks

Stackable - Gutenberg Blocks

Stackable – Gutenberg Blocks is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.

3. Editor Blocks

Editor blocks for Gutenberg

Editor Blocks is another neat collection of Gutenberg blocks that you can use. It comes with useful blocks like author profile, hero image, pricing table, brands, features, and more.

FAQs about Gutenberg – The New Block Editor in WordPress

Since Gutenberg became the new WordPress editor, we have been getting a lot of questions. Here are the answers to some of the most frequently asked questions about Gutenberg.

1. What happens to my older posts and pages? Can I still edit them?

Your old posts and pages are completely safe and unaffected by the Gutenberg. You can still edit them, and Gutenberg will automatically open them in a block containing the classic editor.

Editing older articles in new WordPress editor

You can edit them inside the old editor, or you can convert older articles into blocks and use the new block editor.

2. Can I still keep using the old editor?

Yes, you can still keep using the old editor. Simply install and activate the Classic Editor plugin.

Upon activation, it will disable the block editor, and you will be able to continue using the classic editor.

Please note that Classic Editor will be supported until 2022.

3. What to do if the new editor doesn’t work with a plugin or theme I am using?

Project Gutenberg was under development for a long time. This gave plugin and theme authors plenty of time to test their code for compatibility.

However, there is still a chance that some plugins and themes may not work well with the new editor. In that case, you can install the classic editor plugin, request the developer to add Gutenberg support, or simply find an alternative plugin or theme.

4. How to learn more Gutenberg tips and tricks?

WPBeginner is the best place to learn about the new block editor in WordPress. We are the largest WordPress resource site on the internet.

We will be publishing new articles and updating our old resources to help you master the new block editor.

Meanwhile, if you have any questions, feel free to reach out to us by leaving a comment or by using the contact form on our website.

We hope this Gutenberg tutorial helped you learn how to use the new WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link