This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.



Showcase your app and UI right from WordPress.

  • Choose from a selection of beautiful and free iPhone X mockup photos
  • Simply add your screenshot, no need to open your image editor
  • Works with themes that support Gutenberg Blocks


This plugin works best with a Gutenberg compatible theme.

  1. View or create a post or page
  2. Add a new device mockup block
  3. Upload a screenshot to the block, ensuring that the correct image size is used
  4. Choose from one of the mockup images available in the block inspector



Plugin by Roman Bejnar and Trang Nguyen.


Mockup images in this plugin use the following licenses:
* Creative Commons CC0
* Unsplash License
Hover over each image using the block inspector to see credits and license information.


  • Choose from a selection of beautiful mockup device images.
  • After installing the plugin, add the mockup block to your post or page.
  • Select your screenshot while making sure it has the specified size and proportions.
  • A preview of your screenshot in the WordPress editor.
  • Select other mockup images using the block inspector.
  • Your post or page with a mockup image showcasing your design.


This plugin provides 1 block.

  • iPhone X


This plugin requires WordPress Gutenberg. Gutenberg is available as part of WordPress 5.0 and later.
Once you have Gutenberg installed,

  1. Upload plugin ZIP file to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress


Does this plugin work without WordPress Gutenberg?

No, it does not. You can, however, install Gutenberg as a separate plugin for WordPress installations lower than 5.0.
See the Gutenberg documentation on how to do so.


There are no reviews for this plugin.

Contributors & Developers

“Mockups” is open source software. The following people have contributed to this plugin.


Translate “Mockups” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • Update to correct version number


  • Update readme.txt and fix plugin version number.


  • Initial release.