How to add a Gallery in Gutenberg- WordPress

by Oct 25, 2021WordPress Tutorials - WP Tutorials, Gutenberg, WordPress 5.0

In this video you’ll learn how to add a gallery in Gutenberg. Adding a gallery is much easier than you might think.

.  

The Gallery block in the WordPress Gutenberg editor is an essential tool for displaying multiple images in a clean, organized grid. Here’s how to add a gallery in Gutenberg:

Step-by-Step Tutorial on How to add a Gallery in Gutenberg:

  1. Adding the Gallery Block:
    1. Create or edit a post/page in your WordPress dashboard.
    2. Click on the ‘+’ button, either in the content area or from the top left, to add a new block.
    3. Use the search bar to type “Gallery” or browse under the ‘Media’ section to find the ‘Gallery’ block.
    4. Click on it to insert it into your post or page.
How to add a gallery in gutenberg
  1. Adding Images to the Gallery:
    1. Once you’ve inserted the Gallery block, you’ll have two options: Upload or Media Library.
    2. Upload: Use this option to select images from your device.
    3. Media Library: Use this to pick images that have already been uploaded to your WordPress site.
Uploading pictures to the WordPress Gallery Block
  1. Select all the images you want to include in your gallery and click on the “Create a new gallery” button.
Choosing Multiple Images for the Gallery Block in WordPress
  1. Reordering and Editing Individual Images:
    1. After adding images, you can click and drag each one to rearrange their order.
    2. Clicking on an individual image will reveal options to either remove it or edit its caption.
    3. By clicking the pencil/edit icon on an image, you can edit additional information or replace the image.
Reordering Images
  1. Gallery Block Options & Settings:
    1. With the Gallery block selected, navigate to the block settings in the right sidebar.
    2. Under Block, you’ll find several options:
      • Columns: Adjust the number of columns in your gallery. Gutenberg will automatically adjust the number based on the total images and space.
      • Crop Images: Ensures all images are displayed in a uniform size by cropping them if needed.
      • Link To: Decide if clicking an image leads to its attachment page, media file, or does nothing.
Gallery Image Settings
  1. Styling & Advanced Settings:
    1. Under Styles in the block settings sidebar, you can choose between two presentation styles: Default or Tiled. The choice will depend on your theme and personal preference.
    2. If you have knowledge of CSS, under the Advanced tab, you can add a CSS class for more specialized styling.
Advanced items for the gallery block
  1. Transforming the Gallery Block:
    1. Sometimes, you might want to change the gallery into individual images or vice versa. To do this, click on the Gallery block, then click the transform icon (it looks like two arrows) in the block toolbar, and select the desired transformation.
Transforming the Gallery Block
  1. Saving & Previewing:
    1. Click on ‘Preview’ to view how your gallery looks on the front end.
    2. If everything looks as expected, click ‘Update’ or ‘Publish’ to save your changes.

By learning how to add a gallery block in Gutenberg and its various options, you can create engaging visual content for your WordPress site, enhancing the overall look and feel of your posts and pages.


Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Access Our WordPress Training Academy Videos

View our FREE WordPress 6.4 Course.  Learn about the exciting new features available in this release!