Uix Shortcodes – Compatible with Gutenberg


Uix Shortcodes makes it easy and quick to add the shortcode you need to achieve the page layout or function you desire. It provides easy to use over 26+ shortcodes. The content elements are the heart of any page builder. These are the elements shortcodes that come with theme. You may customize the shortcode by changing/adding the parameters. “Content Shortcode”, “Column Shortcode”, “Web Elements Shortcode”, “Container Shortcode”, and so on. They could be used together. It is compatible with Gutenberg.

The Uix Shortcodes consists of several core features that are key to support multi-style switch. According to current progress, some styles can be summarized as follows: Elegant (default), Slant, Rich.

A variety of optional styles are available for Uix ShortCodes. Go to “Uix ShortCodes -> Settings -> General Settings”, you can choose the shortcodes style you want.

Included Modules

The currently available default elements:

  • container
  • parallax
  • image slider
  • timeline
  • columns
  • buttons
  • progress bar
  • google maps
  • special heading
  • pricing table
  • icons
  • features boxes
  • testimonials carousel
  • team
  • list of clients
  • responsive video
  • audio
  • accordion
  • dividing line
  • tabs
  • code with highlighter
  • share buttons
  • contact form(use commenting form template)
  • portfolio(support lightbox)
  • recent posts with custom template
  • author card


  • screenshot-21.jpg
  • screenshot-1.jpg
  • screenshot-2.jpg
  • screenshot-3.jpg
  • screenshot-4.jpg
  • screenshot-5.jpg
  • screenshot-6.jpg
  • screenshot-7.jpg
  • screenshot-8.jpg
  • screenshot-9.jpg
  • screenshot-10.jpg
  • screenshot-11.jpg
  • screenshot-12.jpg
  • screenshot-13.jpg
  • screenshot-14.jpg
  • screenshot-15.jpg
  • screenshot-16.jpg
  • screenshot-17.jpg
  • screenshot-18.jpg
  • screenshot-19.jpg
  • screenshot-20.jpg


  1. After activating your theme, you can see a prompt pointed out as absolutely critical. Go to “Appearance -> Install Plugins”.
    Or, upload the plugin to wordpress, Activate it. (Access the path (/wp-content/plugins/) And upload files there.)

  2. Go to your WordPress admin panel, edit or create a new post (or page). You’ll see our tiny little button in the toolbar, preceded by a separator.


FAQ 1: How to completely customize the Uix Shortcodes stylesheets?

You can go to “Uix Shortcodes” in the WordPress Administration Screens, then link to a specific tab like “Custom CSS”.

There is a second way, make a new Cascading Style Sheet (CSS) document which name to “uix-shortcodes-custom.css” and uix-shortcodes-custom-rtl.css to your templates directory ( “/wp-content/themes/{your-theme}/” or “/wp-content/themes/{your-theme}/assets/css/” ). You can connect to your site via an FTP client, make the changes and then upload the file back to the server. Once you have created an existing CSS file, Uix Shortcodes will use it as a default style sheet to your WordPress Theme. Of course, Uix Shortcodes’s function of “Custom CSS” is still valid.

Note: Making a new javascrpt (.js) document which name to “uix-shortcodes-custom.js” to your templates directory ( “/wp-content/themes/{your-theme}/” or “/wp-content/themes/{your-theme}/assets/js/” ). Once you have created an existing JS file, Uix Shortcodes will use it as a default script to your WordPress Theme.

FAQ 2: How To Insert Shortcode With Gutenberg?

We should now be able to see our block in the Add Block menu.


June 11, 2017
It's been several years since the shortcodes have appeared in WordPress. I particularly like this shortcode plugin because it is very beautiful and easy to use. Thanks guy.
Read all 6 reviews

Contributors & Developers

“Uix Shortcodes – Compatible with Gutenberg” is open source software. The following people have contributed to this plugin.



1.9.8 (July 5, 2021)

  • Fix: Fixed the display and escaping problem of the code block in the editor.
  • Tweak: Performance optimization of dynamic forms (use virtual tree to update dom) for Custom Meta Boxes.
  • Tweak: Optimized the escape compatibility issue of the editor control for Custom Meta Boxes.

1.9.7 (March 1, 2021)

  • Fix: Delete SyntaxHighlighter to improve the compatibility of plug-ins.

1.9.6 (December 21, 2020)

  • Fix: Fixed a JavaScript bug for Uix Shortcodes Form in WP 5.6.

1.9.5 (December 8, 2020)

  • Tweak: Upgraded the uploading control.

1.9.4 (October 21, 2020)

  • Fix: Optimized the color transparency control, compatible with WP 5.5.0 and above.
  • Tweak: Expand and optimize Uix Custom Meta Boxes.

1.9.2 (October 19, 2020)

  • Fix: The portfolio module is compatible with other common themes and plugins.
  • Fix: Let it work under the “Divi Builder pages”, “Elementor” plugin.

1.9.0 (October 14, 2020)

  • New: Use Muuri plug-in to make filtering and masonry effects.
  • Tweak: Upgraded image slider and testimonials carousel modules.
  • Tweak: When the editor inserts a video, it will automatically be converted into a video tag.
  • New: According to the language of the theme, the editor automatically supports multiple languages.
  • Remove: Remove Flexslider plugin.
  • Remove: Remove shuffle.js and modernizr.js.

1.8.9 (October 13, 2020)

  • Tweak: Optimized the language support and media insertion of the editor for Uix Custom Meta Boxes.

1.8.8 (September 25, 2020)

  • Tweak: Compatible with WP 5.5.*.
  • Fix: Modified the style display of the module.

1.8.7 (December 31, 2019)

  • New: Added support for video formats.

1.8.6 (November 22, 2019)

  • New: Added zh_CN language support.
  • Fix: Let it work under the “Divi Builder pages”, “Elementor” plugin.
  • Tweak: Optimized some styles for form fields.

1.8.5 (November 19, 2019)

  • New: Add drag sorting for Uix Custom Metaboxes’ Image Gallery.

1.8.4 (November 11, 2019)

  • Fix: Fixed button trigger event for uploading image control.
  • Dev: New loop fields control for richer release types.
  • Tweak: Optimized scalability for components such as uploads.

1.8.3 (September 24, 2019)

  • Fix: Fixed a bug of imagesLoaded is not defined.

1.8.2 (September 18, 2019)

  • Tweak: Enhance the functionality of the uix custom metabox.
  • Tweak: MCEEditor upgrade in form component.
  • Tweak: Upgrade Fontawesome to 5.0+.

1.8.1 (September 2, 2019)

  • Tweak: Replace theme names with BEM naming.
  • Tweak: Change the hook of shortcode init.
  • Tweak: Upload the Documentation of this plugin to github. (https://xizon.github.io/wp-documentations/uix-shortcodes/)
  • Fix: Fixed a bug for fontawesome compatibility in some modules.

1.8.0 (June 1, 2019)

  • New: Support for adding your Google Map API Key to avoid traffic overruns on maps.
  • New: Add a module control for the map API Key.

1.7.7 (February 23, 2019)

  • Fix: Solved a bug of Block validation from the Gutenberg editor.

1.7.6 (January 21, 2019)

  • Fix: Fixed a bug that when I enable the classic editor, I set the block in the setting, but it can’t be displayed.

1.7.5 (January 16, 2019)

  • Fix: Solved the block display problem of the new version of the Gutenberg editor.

1.7.4 (January 14, 2019)

  • Tweak: Optimized the experience of inserting block code into blocks.

1.7.3 (January 13, 2019)

  • Fix: if you create columns and add text with new lines it doesn’t show the line break.
  • Fix: Fixed some compatibility issues with Uix Shortcodes plugin under Gutenberg.
  • Fix: Fixed a problem with block initial save and multiple segment code data conflicts.

1.7.2 (December 24, 2018)

  • Fix: Fixed a bug that the plugin icon on the toolbar not showing.

1.7.1 (December 7, 2018)

  • Fix: Fixed display problem with admin screen.
  • Tweak: Compatible with the new core gutenberg editor for version 5.0.

1.7.0 (December 6, 2018)

  • Fix: Fixed a bug where block data could not be saved in real time.
  • Fix: Fixed shortcode of block dependencies.
  • Fix: Solved some problems under Gutenberg.
  • Tweak: Removed the parallax plugin and added a new parallax method.

1.6.8 (November 30, 2018)

  • Fix: Solved some problems under PHP7 and Gutenberg.

1.6.7 (November 22, 2018)

  • Fix: Solved the block display problem of the new version of the Gutenberg editor.

1.6.5 (November 17, 2018)

  • Fix: Fixed a bug where multiple blocks saved Uix Shortcodes.
  • Fix: Fixed some style conflicts in controls.
  • Tweak: Compatible with the new core gutenberg editor, ready for version 5.0.

1.6.4 (September 4, 2018)

  • Fix: Fixed some compatibility issues with Uix Shortcodes plugin under Gutenberg.

1.6.3 (July 13, 2018)

  • Fix: Fixed an issue when your theme uses more meta boxes.
  • New: Add meta boxes API. Provides a compatible solution for some personalized themes that require Uix Shortcodes.

1.6.2 (July 7, 2018)

  • Fix: Fixed issue where color picker does not display.
  • Tweak: Compatible with Gutenberg, we should now be able to see our block in the Add Block menu.

1.6.0 (May 3, 2018)

  • Fix: Fixed a bug with custom styles and child themes that if site uses a child theme when you create a custom css/js file in child theme folder, the plugin tries to connect style with path located in the parent theme folder.
  • Fix: Solved the problem that instagram widget call data is not displayed.
  • Tweak: Updated some third-party plugins to the latest version.

1.5.8 (October 17, 2017)

  • New: New API rebuilds. (Important!)
  • New: Upgraded core API for developer customization.
  • New: Support a particularly simple custom form and template API.
  • New: Add stylesheets of Recent Posts shortcode on your front-end pages.
  • Tweak: Optimize the interface user experience.
  • Tweak: Removed ajax method of all modules pop-window in admin panel, reduce High CPU Usage of WordPress.
  • Tweak: Each module manages the response speed by more than 10 times.
  • Tweak: Simplifies all module APIs.
  • Tweak: Reference jQuery Templates plugin to create pure HTML templates of front-end page.
  • Tweak: Optimized array loop efficiency.

1.5.7 (October 14, 2017)

  • Fixed some bugs for parallax and container shortcodes for mobile.
  • Optimized the Container/Parallax shortcode.
  • Optimized the Progress Bar shortcode for mobile.
  • Added some new placeholders(featured image, categories) for the posts shortcode output.

1.5.6 (September 17, 2017)

  • Added color picker plugin to TinyMCE Editor.
  • Optimized the directory and file structure, delete the unnecessary files and codes.
  • Improve the Uix Shortcods assistant(helper) experience in admin panel.

1.5.5 (September 16, 2017)

  • Supports Right-To-Left (RTL) direction and updated the core stylesheet file of front-end.
  • Supports Right-To-Left (RTL) direction in admin panel.

1.5.4 (September 2, 2017)

  • Added Online Documentation. (Removed the original embedded documentation, reducing the size of the plug-in )
  • Upgraded core API for theme developer customization.

1.5.3 (August 29, 2017)

  • Fixed a script conflict bug in the backend.
  • Fixed a bug for settings page can not be used normally.

1.5.2 (August 7, 2017)

  • Fixed a display bug for the editor form type.
  • Added the editor’s source code mode.

1.5.1 (July 9, 2017)

  • Fixed an issue of background with the activation of the pricing on mobile devices.

1.5.0 (June 27, 2017)

  • Optimize the embedding method of Google Maps.
  • Fix the display of posts that do not match the error. ( For blog module )

1.4.9 (June 11, 2017)

  • Added a new style “Rich” for shortcodes. Go to “Uix ShortCodes -> Settings -> General Settings”, you can choose the shortcodes style you want.
  • Optimized front-end styles.
  • Added color conversion function color_transform().

1.4.8 (May 23, 2017)

  • Added function of display only a particular category for the Recent Posts shortcode.
  • Added support of order type for the Recent Posts shortcode.
  • Fixed some bugs for core form.

1.4.7 (April 8, 2017)

  • Optimized admin panel of Custom CSS.

1.4.6 (April 3, 2017)

  • Fixed bug of displaying recent posts in a horizontal row.
  • Optimized core javascripts structure of front-end. Easy to call from ajax.
  • Added a javascript function of front-end: $.uix_sc_init();

1.4.5 (April 1, 2017)

  • Upgraded core form API. ( For developers, custom modules are much simpler! )
  • Optimized core custom functions.
  • Added function of template parameters.
  • Added function of form javascripts output when in ajax or default state.
  • Improve the stability of the plug-in.
  • Optimized core HTML tags for front-end.
  • Optimized core stylesheets for front-end.
  • Fixed some shortcode tags that did not show.
  • Fixed some minor bugs for live preview.
  • W3C markup validation.

1.4.2 (March 21, 2017)

  • Compatible with low version PHP (5.3+)
  • Fixed some minor errors in the low version of PHP.

1.4.1 (March 5, 2017)

  • Resolved compatibility errors that may occur with the editor.

1.4.0 (February 1, 2017)

  • Added editor form field type.
  • Added “Image Slider” shortcode (new).
  • Added “Timeline” shortcode (new).
  • Optimized the directory and file structure, delete the unnecessary files.
  • Change the default container boxed width to compatible with bootstrap 3.x. (You can customize core CSS and locate to .uix-sc-container.)

1.3.6 (January 16, 2017)

  • Optimized the live preview for the admin panel.
  • Optimized the front-end shortcode.

1.3.5 (January 2, 2017) ( Final Version, 2016 )

  • Optimized form selectors.
  • Supported Uix Shortcodes for the theme customizer screen.
  • Compatible with more plug-ins.
  • Fixed some minor bugs for version 1.3.0.

1.3.1 (December 25, 2016)

  • Optimized the pop-up window experience.
  • Optimized the shortcodes-slant.css.

1.3.0 (December 12, 2016)

  • Added the live preview shortcode.
  • Optimized shortcodes core script for front-end and admin panel.

1.2.6 (December 8, 2016)

  • Fixed some minor bugs for version 1.2.5.
  • Optimized the container shortcode.

= 1.2.5 (December 2, 2016)=

  • Optimized core stylesheets for front-end.
  • Optimized form for admin panel.
  • Optimized front-end shortcodes structure.
  • Optimized icon selector & improved the running speed greatly.
  • Beautified the form UI, enhance the user experience.
  • Added function of escaping for HTML blocks from core forms.
  • Added hyperlink support for client shortcode.
  • Added multi-column selector for client shortcode.
  • Removed colors selectors for features shortcode.
  • Supports custom Uix Shortcodes core stylesheet and script based on “/wp-content/themes/{your-theme}/assets/css/” and “/wp-content/themes/{your-theme}/assets/js/” directories for your theme.

1.2.0 (November 12, 2016)

  • Optimized shortcodes script for front-end.
  • Fixed a minor error in prograss bar.
  • Added function to delete selected icon.
  • Removed some unnecessary attributes for shortcode.

1.1.8 (November 2, 2016)

  • Optimized switcher from back-end.
  • WordPress 4.7 compatible.

1.1.7 (August 23, 2016)

  • Fixed some bugs.

1.1.6 (July 12, 2016)

  • Fix some bugs of custom CSS admin panel.
  • Older version themes are functionally compatible.
  • Fixed some bugs.

1.1.5 (June 2, 2016)

  • Used ajax form & improved the running speed greatly.
  • Optimized back-end structure.
  • Upgraded the back-end form UI.
  • Removed sweetalert plugin.
  • Improved event binding from the plugin main JavaScript file.
  • Improved the main CSS file.
  • Fixed some bugs.

1.1.2 (June 1, 2016)

  • Fixed some bugs.

1.1.1 (April 22, 2016)

  • Optimized the selector of buttons.
  • Enhanced editor and forms compatibility.

1.1.0 (April 4, 2016)

  • Optimized for tablet display.
  • Improved event binding from the plugin main JavaScript file.
  • Improved the main CSS file.
  • Use WordPress Color Picker API to replace tinyColorPicker
  • Fixed some bugs for parallax and container shortcodes

1.0.5 (March 25, 2016)

  • Multi-style support. Go to “Uix ShortCodes -> Settings -> General Settings”, you can choose the shortcodes style you want.
  • Core CSS optimization.
  • Optimized shortcodes script.

1.0.4 (March 3, 2016)

  • Added “Author Card” shortcode.
  • Core CSS optimization.

1.0.3 (February 25, 2016)

  • Fix custom CSS function in the WordPress administration screens.

1.0.2 (February 22, 2016)

  • Fix parse error for tinyColorPicker sometimes.
  • Other optimizations.

1.0.1 (January 15, 2016)

  • Optimized HTML format of textarea

1.0.0 (December 22, 2015)

  • First release.