Photo Block – A Powerful Image Block

Wopisanje

Photo Block adds a time-saving block to the Block Editor, allowing for advanced image customization with only a few clicks. Made for writers and layout builders, this block is extremely versatile with full caption support, responsive styling, and global styles.

❤️ Spin up a Free Demo ❤️

Core Features

  1. Responsive Controls: Customize image sizes, padding, margins, border, and style settings for different screen sizes—ensuring your photos look perfect on any device.
  2. Advanced Caption Control: A fully featured caption block is included, allowing you to position and overlay captions to match your photo style.
  3. Intuitive Cropping: Crop your image using built-in tools, setting the aspect ratio, rotation, and more.
  4. Flexible Image Sources: Upload directly from the block, use the WordPress media library, download from a URL, or provide a URL to an image.
  5. Global Styles: Global styles allow you to save your design settings and easily apply them to other photo blocks, which allows you to maintain a consistent look across your site. With global styles, you can add the block, upload the photo, and apply advanced customization in just 4 clicks.
  6. Query Loop Support: Seamlessly integrate Photo Block into a Query Loop block as a featured image for dynamic content.
  7. ScreenshotOne Support: Use the ScreenshotOne service to generate website screenshots right from Photo Block.

❤️ Spin up a Free Demo ❤️

Quick Links:

Development:

Development happens on GitHub. Check out the GitHub code repository for Photo Block.

To assist or help this plugin financially, please consider a GitHub sponsorship.

Libraries and Credits

  1. Filepond – React Image uploader.
  2. CSSgram – CSS Image Effects.
  3. Lucide – React Icon Library.
  4. React Image Crop – React Image Cropper.
  5. React Hook Form – React Forms.
  6. Fancybox – Lightbox Library.

Fota wobrazowki

  • Adding a photo with Photo Block is easy in the block editor.
  • Crop, replace, and adjust the accessibility options for your photo.
  • Select a global style, adjust the images’s title and alt attributes, sand select the image size.
  • Adjust the image’s background color, opacity, blur, and drop shadow.
  • Select form 26 different CSS styles using CSS Gram.
  • Adjust the padding, margin, and border of the photo.
  • Set sizing for the photo, and set the object fit (if desired).
  • Set the caption overlay’s positio, and enable an overlay on hover.
  • Set the overlay type to None, Solid, Gradient, or Image.
  • Set the caption’s typography, background color, and text color.
  • Set the caption’s padding, margin, and border.
  • Set the caption’s sizing using available block options.
  • Global Styles panel, which allows you to save and edit global styles.
  • Save or overwrite a global style using the Global Styles modal.

Bloki

Tutón tykač 2 blokaj skići.

  • Photo Block An easy-to-use and comprehensive image block.
  • Caption Block A caption for a photo block.

Instalacija

  1. Search for “Photo Block” on the Add Plugins screen in WordPress.
  2. Install and activate the plugin from your admin dashboard.
  3. Once activated, use the block in any page or post by adding „Photo Block“ from the block selector.

In-depth Documentation – Please check out our thorough documentation ❤️️

HSP

How does this block differs from the core image block?

Photo Block offers more advanced customization options like responsive layouts, a fully-featurd caption, caption overlays, and the ability to reuse styles across multiple blocks using global styles. It’s built for power users who want more control over their image presentation.

Does this work with data?

Photo Block works within the Query Loop block as a featured image.

As of release, it is compatible with:

  • Core Query Block
  • GenerateBlocks Query Loop
  • Kadence Query Loop

If you have a specific block suite query loop you’d like to see Photo Block integrated with, please let us know!

Does this work with the Classic Editor?

No, this plugin is specificalliy built for the block editor.

Does it work on mobile devices?

You can set different styles for different device breakpoints.

How can I get help?

Please leave a detailed note on our support page.

Are you planning on integrating with other services?

Yes, we are planning on integrating with other services in the future depending on this block’s popularity and usage.

Are you planning on adding any premium features?

Yes, we are planning on adding premium features in the future depending on this block’s popularity and usage. The goal at this time is to keep the plugin free, open-source, and address any bugs or feature requests that come up.

I have a feature request.

Please leave a detailed note on our support page.

Pohódnoćenja

3. meje 2025 1 reply
I’m using this on a couple of my websites now, and I’m going to show it to my WordPress students as an alternative to the regular image block. Thanks Ron!
2. meje 2025 1 reply
Ronald is an amazing developer as well as a great human. I love that he thought to create a photo block where the user (like me) could create a global style and save it. It’s not buried somewhere in global patterns, no. All I have to do is hit the + sign, type „photo block,“ and choose the icon. It’s perfect for team photos or anytime you just want photo + text but don’t want to mess around trying to „fix“ the default photo/text blockI also love the cropping feature. It saves me time from having to edit an existing photo in Canva and reupload it. I’m now changing all of the pages on my site to use this block and I can’t wait to add it to my client sites, too!
Čitajće 2 pohódnoćeni

Sobuskutkowarjo a wuwiwarjo

„Photo Block – A Powerful Image Block“ je softwara wotewrjeneho žórła. Slědowacy ludźo su k tutomu tykačej přinošowali.

Sobuskutkowarjo

Protokol změnow

1.2.5

  • Released 2025-05-18
  • New Feature: Set aspect ratio per responsive breakpoint.
  • New Feature: Image size and a Copy shortcut show next to the image URL field in the sidebar.
  • Bug fix: Background color, drop shadow color weren’t honoring opacity.
  • Bug fix: Selecting a color with a CSS variable will now properly reflect the color in the block editor.
  • Bug fix: Drop shadows weren’t working with feautred images.

1.2.0

  • Released 2025-05-09
  • New Feature: Custom links can now pop-up into lightboxes if they are of type jpg, jpeg, gif, png, webp, or avif.
  • New Feature: Added Debug mode, which will make the hidden Global Styles post type visiible for inspecting.
  • Bug fix: Global Styles would sometimes save the wrong block information, causing a fatal error.
  • Bug fix: Fixed Featured Image so that it can be set as a post permalink (this wasn’t saving before).

1.1.5

  • Released 2025-05-07
  • New feature: Ability to hide the caption text in overlays. This can be used to create advanced effects.
  • New feature: Overlay select boxes have been replaced with more compact ButtonGroup components.
  • New feature: Now works in GenerateBlocks 2.0 query loops.
  • New Feature: Added in transforms to the regular Image block.
  • Bug fix: Exclude per-device hide behavior from saving in Global Styles.
  • Bug fix: Fixed ScreenshotOne icon during the initial view.

1.1.1

  • Released 2025-05-07
  • There were a few critical errors when requesting a new ScreenshotOne image.

1.1.0

  • Released 2025-05-05
  • New feature: ScreenshotOne compatibility released. You can now take website screenshots from within Photo Block.
  • New feature: New admin panel to set block and ScreenshotOne defaults.
  • New feature: Disable the caption appender by default.
  • New feature: File size and URL is shown in the sidebar when available.
  • Bug fix: Opacity wasn’t rendering on the frontend.

1.0.14

  • Released 2025-01-07
  • Bug fix: Uploading in smaller columns didn’t show a preview.
  • Bug fix: Cropping was causing a larger view area when loading an image.
  • Bug fix: Block icon previews were not displaying properly on .org.

1.0.7

  • Released 2024-12-25
  • Hot fix: Fix applied in 1.0.5 for fixing copying made images in URL mode upon rendering.

1.0.5

  • Released 2024-12-25
  • Bug fix: Fixing issue with units not displaying on the frontend or in the block editor.
  • Bug fix: Fixing issue with global styles not applying to the iframe when viewing a block as tablet or mobile in the block editor.
  • Bug fix: Copying an image from site to site was not working, so a check was added in to make sure the image mode is set to URL if an image ID isn’t found.

1.0.1

  • Released 2024-11-03
  • Ensuring compatibility with WP 6.7.

1.0.0

  • Initial release.