├── cmb2-field-visual-style-editor.php
├── css
    └── visual-style-editor.css
├── example.gif
├── js
    └── visual-style-editor.js
└── readme.md


/cmb2-field-visual-style-editor.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * @package      CMB2\Field_Visual_Style_Editor
  4 |  * @author       Tsunoa
  5 |  * @copyright    Copyright (c) Tsunoa
  6 |  *
  7 |  * Plugin Name: CMB2 Field Type: Visual Style Editor
  8 |  * Plugin URI: https://github.com/rubengc/cmb2-field-visual-style-editor
  9 |  * GitHub Plugin URI: https://github.com/rubengc/cmb2-field-visual-style-editor
 10 |  * Description: CMB2 field type to setup style from small set of controls.
 11 |  * Version: 1.0.0
 12 |  * Author: Tsunoa
 13 |  * Author URI: https://tsunoa.com/
 14 |  * License: GPLv2+
 15 |  */
 16 | 
 17 | 
 18 | // Exit if accessed directly
 19 | if( !defined( 'ABSPATH' ) ) exit;
 20 | 
 21 | if( !class_exists( 'CMB2_Field_Visual_Style_Editor' ) ) {
 22 |     /**
 23 |      * Class CMB2_Field_Position
 24 |      */
 25 |     class CMB2_Field_Visual_Style_Editor {
 26 | 
 27 |         /**
 28 |          * Current version number
 29 |          */
 30 |         const VERSION = '1.0.0';
 31 | 
 32 |         /**
 33 |          * Initialize the plugin by hooking into CMB2
 34 |          */
 35 |         public function __construct() {
 36 |             add_action( 'admin_enqueue_scripts', array( $this, 'setup_admin_scripts' ) );
 37 |             add_action( 'cmb2_render_visual_style_editor', array( $this, 'render' ), 10, 5 );
 38 |             add_action( 'cmb2_sanitize_visual_style_editor', array( $this, 'sanitize' ), 10, 4 );
 39 |         }
 40 | 
 41 |         /**
 42 |          * Render field
 43 |          */
 44 |         public function render( $field, $value, $object_id, $object_type, $field_type ) {
 45 |             $show_margin = ( ! $field->args( 'hide_margin' ) );
 46 |             $show_border = ( ! $field->args( 'hide_border' ) );
 47 |             $show_padding = ( ! $field->args( 'hide_padding' ) );
 48 |             $show_text_options = ( ! $field->args( 'hide_text_options' ) );
 49 |             $show_background_options = ( ! $field->args( 'hide_background_options' ) );
 50 |             $show_border_options = ( ! $field->args( 'hide_border_options' ) );
 51 | 
 52 |             ?>
 53 |             <div class="cmb2-visual-style-editor">
 54 | 
 55 |                 <?php if( $show_margin ) : ?>
 56 |                     <div class="cmb2-visual-style-editor-container cmb2-visual-style-editor-<?php echo $this->get_content_wrap_class( $value, 'margin' ); ?> cmb2-visual-style-editor-margin">
 57 |                         <label><?php _e( 'Margin', 'cmb2' ); ?></label>
 58 |                         <?php $this->content_wrap_fields( $field_type, $value, 'margin' ); ?>
 59 |                 <?php endif; ?>
 60 | 
 61 |                     <?php if( $show_border ) : ?>
 62 |                         <div class="cmb2-visual-style-editor-container cmb2-visual-style-editor-<?php echo $this->get_content_wrap_class( $value, 'border' ); ?> cmb2-visual-style-editor-border">
 63 |                             <label><?php _e( 'Border', 'cmb2' ); ?></label>
 64 |                             <?php $this->content_wrap_fields( $field_type, $value, 'border' ); ?>
 65 |                     <?php endif; ?>
 66 | 
 67 |                         <?php if( $show_padding ) : ?>
 68 |                             <div class="cmb2-visual-style-editor-container cmb2-visual-style-editor-<?php echo $this->get_content_wrap_class( $value, 'padding' ); ?> cmb2-visual-style-editor-padding">
 69 |                                 <label><?php _e( 'Padding', 'cmb2' ); ?></label>
 70 |                                 <?php $this->content_wrap_fields( $field_type, $value, 'padding' ); ?>
 71 |                         <?php endif; ?>
 72 | 
 73 |                             <div class="cmb2-visual-style-editor-placeholder">&lt;/&gt;</div><!-- /content -->
 74 | 
 75 |                         <?php if( $show_padding ) : ?>
 76 |                             </div><!-- /padding -->
 77 |                         <?php endif; ?>
 78 | 
 79 |                     <?php if( $show_border ) : ?>
 80 |                         </div><!-- /border -->
 81 |                     <?php endif; ?>
 82 | 
 83 |             <?php if( $show_margin ) : ?>
 84 |                 </div><!-- /margin -->
 85 |             <?php endif; ?>
 86 | 
 87 |                 <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-switch-all">
 88 |                     <button type="button" class="button button-secondary"><?php _e( 'Toggle all', 'cmb2' ); ?></button>
 89 |                 </div>
 90 |             </div>
 91 | 
 92 |             <div class="cmb2-visual-style-editor-extra-options">
 93 |                 <?php if( $show_text_options ) : ?>
 94 |                     <div class="cmb2-visual-style-editor-text-options">
 95 |                         <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-text-color">
 96 |                             <label for="<?php echo $field_type->_id(); ?>_text_color"><?php _e( 'Text color:', 'cmb2' ); ?></label>
 97 |                             <?php echo $field_type->input( array(
 98 |                                 'name'    => $field_type->_name() . '[text_color]',
 99 |                                 'desc'    => '',
100 |                                 'id'      => $field_type->_id() . '_text_color',
101 |                                 'class' => 'cmb2-content-wrap-input cmb2-visual-style-editor-color-picker',
102 |                                 'value' => ( ( isset( $value['text_color'] ) ) ? $value['text_color'] : '' ),
103 |                             ) ); ?>
104 |                         </div>
105 |                     </div>
106 |                 <?php endif; ?>
107 | 
108 |                 <?php if( $show_background_options ) : ?>
109 |                     <div class="cmb2-visual-style-editor-background-options">
110 |                         <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-background-color">
111 |                             <label for="<?php echo $field_type->_id(); ?>_background_color"><?php _e( 'Background color:', 'cmb2' ); ?></label>
112 |                             <?php echo $field_type->input( array(
113 |                                 'name'    => $field_type->_name() . '[background_color]',
114 |                                 'desc'    => '',
115 |                                 'id'      => $field_type->_id() . '_background_color',
116 |                                 'class' => 'cmb2-content-wrap-input cmb2-visual-style-editor-color-picker',
117 |                                 'value' => ( ( isset( $value['background_color'] ) ) ? $value['background_color'] : '' ),
118 |                             ) ); ?>
119 |                         </div>
120 |                     </div>
121 |                 <?php endif; ?>
122 | 
123 |                 <?php if( $show_border_options ) : ?>
124 |                     <div class="cmb2-visual-style-editor-border-options">
125 |                         <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-border-color">
126 |                             <label for="<?php echo $field_type->_id(); ?>_border_color"><?php _e( 'Border color:', 'cmb2' ); ?></label>
127 |                             <?php echo $field_type->input( array(
128 |                                 'name'    => $field_type->_name() . '[border_color]',
129 |                                 'desc'    => '',
130 |                                 'id'      => $field_type->_id() . '_border_color',
131 |                                 'class' => 'cmb2-content-wrap-input cmb2-visual-style-editor-color-picker',
132 |                                 'value' => ( ( isset( $value['border_color'] ) ) ? $value['border_color'] : '' ),
133 |                             ) ); ?>
134 |                         </div>
135 | 
136 |                         <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-border-style">
137 |                             <label for="<?php echo $field_type->_id(); ?>_border_style"><?php _e( 'Border style:', 'cmb2' ); ?></label>
138 |                             <?php
139 |                             $border_style_options = array(
140 |                                 '' => 'Theme defaults',
141 |                                 'solid' => 'Solid',
142 |                                 'dotted' => 'Dotted',
143 |                                 'dashed' => 'Dashed',
144 |                                 'none' => 'None',
145 |                                 'hidden' => 'Hidden',
146 |                                 'double' => 'Double',
147 |                                 'groove' => 'Groove',
148 |                                 'ridge' => 'Ridge',
149 |                                 'inset' => 'Inset',
150 |                                 'outset' => 'Outset',
151 |                                 'initial' => 'Initial',
152 |                                 'inherit' => 'Inherit',
153 |                             );
154 | 
155 |                             echo $field_type->select( array(
156 |                                 'name'    => $field_type->_name() . '[border_style]',
157 |                                 'desc'    => '',
158 |                                 'id'      => $field_type->_id() . '_border_style',
159 |                                 'class' => 'cmb2-content-wrap-select',
160 |                                 'options' => $this->build_options_string( $field_type, $border_style_options, ( ( isset( $value['border_style'] ) ) ? $value['border_style'] : '' ) ),
161 |                             ) );
162 |                             ?>
163 |                         </div>
164 | 
165 |                         <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-border-radius">
166 |                             <label for="<?php echo $field_type->_id(); ?>_border_radius"><?php _e( 'Border radius:', 'cmb2' ); ?></label>
167 |                             <?php echo $field_type->input( array(
168 |                                 'name'    => $field_type->_name() . '[border_radius]',
169 |                                 'desc'    => '',
170 |                                 'id'      => $field_type->_id() . '_border_radius',
171 |                                 'class' => 'cmb2-text-small cmb2-content-wrap-input',
172 |                                 'value' => ( ( isset( $value['border_radius'] ) ) ? $value['border_radius'] : '' ),
173 |                             ) ); ?>
174 |                         </div>
175 |                     </div>
176 |                 <?php endif; ?>
177 |             </div>
178 |             <?php
179 |             $field_type->_desc( true, true );
180 |         }
181 | 
182 |         private function content_wrap_fields( $field_type, $value, $group ) {
183 |             ?>
184 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-<?php echo $group; ?>-all cmb2-visual-style-editor-field-all">
185 |                 <?php echo $field_type->input( array(
186 |                     'name'    => $field_type->_name() . "[{$group}_all]",
187 |                     'desc'    => '',
188 |                     'id'      => $field_type->_id() . "_{$group}_all",
189 |                     'class' => 'cmb2-text-small cmb2-content-wrap-input',
190 |                     'placeholder' => '-',
191 |                     'value' => ( ( isset( $value[$group . '_all'] ) ) ? $value[$group . '_all'] : '' ),
192 |                 ) ); ?>
193 |             </div>
194 | 
195 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-<?php echo $group; ?>-top cmb2-visual-style-editor-field-top">
196 |                 <?php echo $field_type->input( array(
197 |                     'name'    => $field_type->_name() . "[{$group}_top]",
198 |                     'desc'    => '',
199 |                     'id'      => $field_type->_id() . "_{$group}_top",
200 |                     'class' => 'cmb2-text-small cmb2-content-wrap-input',
201 |                     'placeholder' => '-',
202 |                     'value' => ( ( isset( $value[$group . '_top'] ) ) ? $value[$group . '_top'] : '' ),
203 |                 ) ); ?>
204 |             </div>
205 | 
206 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-<?php echo $group; ?>-right cmb2-visual-style-editor-field-right">
207 |                 <?php echo $field_type->input( array(
208 |                     'name'    => $field_type->_name() . "[{$group}_right]",
209 |                     'desc'    => '',
210 |                     'id'      => $field_type->_id() . "_{$group}_right",
211 |                     'class' => 'cmb2-text-small cmb2-content-wrap-input',
212 |                     'placeholder' => '-',
213 |                     'value' => ( ( isset( $value[$group . '_right'] ) ) ? $value[$group . '_right'] : '' ),
214 |                 ) ); ?>
215 |             </div>
216 | 
217 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-<?php echo $group; ?>-bottom cmb2-visual-style-editor-field-bottom">
218 |                 <?php echo $field_type->input( array(
219 |                     'name'    => $field_type->_name() . "[{$group}_bottom]",
220 |                     'desc'    => '',
221 |                     'id'      => $field_type->_id() . "_{$group}_bottom",
222 |                     'class' => 'cmb2-text-small cmb2-content-wrap-input',
223 |                     'placeholder' => '-',
224 |                     'value' => ( ( isset( $value[$group . '_bottom'] ) ) ? $value[$group . '_bottom'] : '' ),
225 |                 ) ); ?>
226 |             </div>
227 | 
228 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-<?php echo $group; ?>-left cmb2-visual-style-editor-field-left">
229 |                 <?php echo $field_type->input( array(
230 |                     'name'    => $field_type->_name() . "[{$group}_left]",
231 |                     'desc'    => '',
232 |                     'id'      => $field_type->_id() . "_{$group}_left",
233 |                     'class' => 'cmb2-text-small cmb2-content-wrap-input',
234 |                     'placeholder' => '-',
235 |                     'value' => ( ( isset( $value[$group . '_left'] ) ) ? $value[$group . '_left'] : '' ),
236 |                 ) ); ?>
237 |             </div>
238 | 
239 |             <div class="cmb2-visual-style-editor-field cmb2-visual-style-editor-field-switch">
240 |                 <button type="button" class="button button-secondary"><i class="dashicons"></i></button>
241 |             </div>
242 |             <?php
243 |         }
244 | 
245 |         private function get_content_wrap_class( $value, $group ) {
246 |             $initial_content_wrap = 'multiple';
247 | 
248 |             /*if( ( isset( $value[$group . '_top'] ) && ! empty( $value[$group . '_top'] ) )
249 |                 || ( isset( $value[$group . '_right'] ) && ! empty( $value[$group . '_right'] ) )
250 |                 || ( isset( $value[$group . '_bottom'] ) && ! empty( $value[$group . '_bottom'] ) )
251 |                 || ( isset( $value[$group . '_left'] ) && ! empty( $value[$group . '_left'] ) ) ) {
252 |                 $initial_content_wrap = 'multiple';
253 |             }*/
254 | 
255 |             if( isset( $value[$group . '_all'] ) && ! empty( $value[$group . '_all'] ) ) {
256 |                 $initial_content_wrap = 'single';
257 |             }
258 | 
259 |             return $initial_content_wrap;
260 |         }
261 | 
262 |         private function build_options_string( $field_type, $options, $value ) {
263 |             $options_string = '';
264 | 
265 |             foreach( $options as $val => $label) {
266 |                 $options_string .= '<option value="' . $val . '" ' . selected( $value, $val, false ) . '>' . $label . '</option>';
267 |             }
268 | 
269 |             return $options_string;
270 |         }
271 | 
272 |         /**
273 |          * Optionally save the latitude/longitude values into two custom fields
274 |          */
275 |         public function sanitize( $override_value, $value, $object_id, $field_args ) {
276 |             $fid = $field_args['id'];
277 | 
278 |             if( $field_args['render_row_cb'][0]->data_to_save[$fid] ) {
279 |                 $value = $field_args['render_row_cb'][0]->data_to_save[$fid];
280 |             } else {
281 |                 $value = false;
282 |             }
283 | 
284 |             return $value;
285 |         }
286 | 
287 |         /**
288 |          * Enqueue scripts and styles
289 |          */
290 |         public function setup_admin_scripts() {
291 |             wp_register_script( 'cmb-visual-style-editor', plugins_url( 'js/visual-style-editor.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), self::VERSION, true );
292 | 
293 |             wp_enqueue_script( 'cmb-visual-style-editor' );
294 | 
295 |             wp_register_style( 'cmb-visual-style-editor', plugins_url( 'css/visual-style-editor.css', __FILE__ ), array(), self::VERSION );
296 | 
297 |             wp_enqueue_style( 'wp-color-picker' );
298 |             wp_enqueue_style( 'cmb-visual-style-editor' );
299 | 
300 |         }
301 | 
302 |     }
303 | 
304 |     $cmb2_field_visual_style_editor = new CMB2_Field_Visual_Style_Editor();
305 | }
306 | 


--------------------------------------------------------------------------------
/css/visual-style-editor.css:
--------------------------------------------------------------------------------
  1 | .cmb2-visual-style-editor {
  2 |     position: relative;
  3 |     display: inline-block;
  4 |     margin-right: 10px;
  5 | }
  6 | 
  7 | .cmb2-visual-style-editor .cmb2-visual-style-editor-field-switch-all {
  8 |     position: absolute;
  9 |     right: 4px;
 10 |     bottom: 5px;
 11 |     z-index: 1;
 12 | }
 13 | 
 14 | .cmb2-visual-style-editor .cmb2-visual-style-editor-field-switch {
 15 |     position: absolute;
 16 |     right: 6px;
 17 |     top: 5px;
 18 |     width: 30px;
 19 |     z-index: 1;
 20 | }
 21 | 
 22 | .cmb2-visual-style-editor .cmb2-visual-style-editor-field-switch .button {
 23 |     vertical-align: baseline !important;
 24 |     padding: 0px 5px 1px !important;
 25 | }
 26 | 
 27 | .cmb2-visual-style-editor .cmb2-visual-style-editor-field-switch .button .dashicons {
 28 |     line-height: 26px;
 29 | }
 30 | 
 31 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container {
 32 |     position: relative;
 33 |     background: rgba(0,0,0,0.1);
 34 |     border: 1px solid rgba(0,0,0,0.05);
 35 |     padding: 50px;
 36 | }
 37 | 
 38 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container > label {
 39 |     position: absolute;
 40 |     width: 100%;
 41 |     top: 0;
 42 |     left: 0;
 43 |     font-size: 11px;
 44 |     padding: 4px;
 45 | }
 46 | 
 47 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field {
 48 |     position: absolute;
 49 | }
 50 | 
 51 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-all {
 52 |     top: 10px;
 53 |     left: 50px;
 54 | }
 55 | 
 56 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-top {
 57 |     top: 10px;
 58 |     left: 50%;
 59 |     margin-left: -20px;
 60 | }
 61 | 
 62 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-right {
 63 |     right: 5px;
 64 |     top: 50%;
 65 |     margin-top: -12px;
 66 | }
 67 | 
 68 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-bottom {
 69 |     bottom: 10px;
 70 |     left: 50%;
 71 |     margin-left: -20px;
 72 | }
 73 | 
 74 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-left {
 75 |     left: 5px;
 76 |     top: 50%;
 77 |     margin-top: -12px;
 78 | }
 79 | 
 80 | .cmb2-visual-style-editor .cmb2-visual-style-editor-container .cmb2-visual-style-editor-field input {
 81 |     width: 40px;
 82 |     font-size: 11px;
 83 |     margin: 0;
 84 |     text-align: center;
 85 |     padding: 4px;
 86 | }
 87 | 
 88 | .cmb2-visual-style-editor .cmb2-visual-style-editor-placeholder {
 89 |     width: 180px;
 90 |     text-align: center;
 91 |     font-size: 25px;
 92 |     padding: 6px 0 10px;
 93 |     background: rgba(0,0,0,0.1);
 94 |     border: 1px solid rgba(0,0,0,0.05);
 95 | }
 96 | 
 97 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-single > .cmb2-visual-style-editor-field-switch .button i:before {
 98 |     content: "\f211";
 99 | }
100 | 
101 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-multiple > .cmb2-visual-style-editor-field-switch .button i:before {
102 |     content: "\f506";
103 | }
104 | 
105 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-multiple > .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-all {
106 |     display: none;
107 | }
108 | 
109 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-single > .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-top,
110 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-single > .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-right,
111 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-single > .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-bottom,
112 | .cmb2-visual-style-editor-container.cmb2-visual-style-editor-single > .cmb2-visual-style-editor-field.cmb2-visual-style-editor-field-left {
113 |     display: none;
114 | }
115 | 
116 | .cmb2-visual-style-editor-extra-options {
117 |     display: inline-block;
118 |     vertical-align: top;
119 | }
120 | 
121 | .cmb2-visual-style-editor-extra-options label {
122 |     display: block;
123 |     padding: 5px 0;
124 |     font-weight: 600;
125 |     line-height: 1.3;
126 | }
127 | 
128 | .cmb2-visual-style-editor-extra-options label:first-child {
129 |     padding-top: 0;
130 | }
131 | 
132 | .cmb2-visual-style-editor-extra-options .cmb2-visual-style-editor-field {
133 |     padding-bottom: 1em;
134 | }


--------------------------------------------------------------------------------
/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rubengc/cmb2-field-visual-style-editor/c52385c10bd4c8e54274996718fe98fe4b04f507/example.gif


--------------------------------------------------------------------------------
/js/visual-style-editor.js:
--------------------------------------------------------------------------------
 1 | (function($){
 2 |     $('body').on('click', '.cmb2-visual-style-editor-field-switch .button', function(e) {
 3 |         e.preventDefault();
 4 | 
 5 |         var container = $(this).closest('.cmb2-visual-style-editor-container');
 6 | 
 7 |         // Reset all values on change mode
 8 |         container.find('> .cmb2-visual-style-editor-field input').val('');
 9 | 
10 |         if( container.hasClass('cmb2-visual-style-editor-multiple') ) {
11 |             container.removeClass('cmb2-visual-style-editor-multiple').addClass('cmb2-visual-style-editor-single');
12 |         } else {
13 |             container.removeClass('cmb2-visual-style-editor-single').addClass('cmb2-visual-style-editor-multiple');
14 |         }
15 |     });
16 | 
17 |     $('body').on('click', '.cmb2-visual-style-editor-field-switch-all .button', function(e) {
18 |         $(this).closest('.cmb2-visual-style-editor').find('.cmb2-visual-style-editor-field-switch .button').trigger('click');
19 |     });
20 | 
21 |     $('.cmb2-visual-style-editor-field .cmb2-visual-style-editor-color-picker').wpColorPicker();
22 | })(jQuery);


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | CMB2 Field Type: Visual Style Editor
  2 | ==================
  3 | 
  4 | Custom field for [CMB2](https://github.com/CMB2/CMB2) setup style from small set of controls.
  5 | 
  6 | ![example](example.gif)
  7 | 
  8 | ## Examples
  9 | 
 10 | ```php
 11 | add_action( 'cmb2_admin_init', 'cmb2_visual_style_editor_metabox' );
 12 | function cmb2_position_metabox() {
 13 | 
 14 | 	$prefix = 'your_prefix_demo_';
 15 | 
 16 | 	$cmb_demo = new_cmb2_box( array(
 17 | 		'id'            => $prefix . 'metabox',
 18 | 		'title'         => __( 'Visual Style Editor Metabox', 'cmb2' ),
 19 | 		'object_types'  => array( 'page', 'post' ), // Post type
 20 | 	) );
 21 | 
 22 | 	$cmb_demo->add_field( array(
 23 | 		'name'          => __( 'Default field', 'cmb2' ),
 24 | 		'desc'          => __( 'Field description (optional)', 'cmb2' ),
 25 | 		'id'            => $prefix . 'visual_style_editor',
 26 | 		'type'          => 'visual_style_editor',
 27 | 	) );
 28 | 
 29 | 	$cmb_demo->add_field( array(
 30 |         'name'          => __( 'Default field', 'cmb2' ),
 31 |         'desc'          => __( 'Field description (optional)', 'cmb2' ),
 32 |         'id'            => $prefix . 'visual_style_editor',
 33 |         'type'          => 'visual_style_editor',
 34 |         //'hide_margin'   => true,
 35 |         'hide_border'   => true,
 36 |         //'hide_padding'   => true,
 37 |         //'hide_text_options'   => true,
 38 |         //'hide_text_options'   => true,
 39 |         //'hide_background_options'   => true,
 40 |         //'hide_border_options'   => true,
 41 |     ) );
 42 | 
 43 | }
 44 | ```
 45 | 
 46 | ## Parameters
 47 | 
 48 | - hide_margin (bool, default = false): Hide margin inputs square
 49 | - hide_border (bool, default = false): Hide border inputs square
 50 | - hide_padding (bool, default = false): Hide padding inputs square
 51 | - hide_text_options (bool, default = false): Hide text color option
 52 | - hide_background_options (bool, default = false): Hide background color option
 53 | - hide_border_options (bool, default = false): Hide border color, style and radius options
 54 | 
 55 | ## Retrieve the field value
 56 | 
 57 | ```php
 58 |     $value = get_post_meta( get_the_ID(), 'your_field_id', false );
 59 | 
 60 |     // Getting margin, border and padding
 61 |     $content_wrap_groups = array( 'margin', 'border', 'padding' );
 62 | 
 63 |     foreach( $content_wrap_groups as $content_wrap_group ) {
 64 |         if( isset( $value[$content_wrap_group . '_all'] ) && ! empty( $value[$content_wrap_group . '_all'] ) ) {
 65 |             echo $content_wrap_group . ': ' . $value[$content_wrap_group . '_all'] . ';<br>';
 66 |         } else {
 67 |             if( isset( $value[$content_wrap_group . '_top'] ) && ! empty( $value[$content_wrap_group . '_top'] ) ) {
 68 |                 echo $content_wrap_group . '-top: ' . $value[$content_wrap_group . '_top'] . ';<br>';
 69 |             }
 70 | 
 71 |             if( isset( $value[$content_wrap_group . '_right'] ) && ! empty( $value[$content_wrap_group . '_right'] ) ) {
 72 |                 echo $content_wrap_group . '-right: ' . $value[$content_wrap_group . '_right'] . ';<br>';
 73 |             }
 74 | 
 75 |             if( isset( $value[$content_wrap_group . '_bottom'] ) && ! empty( $value[$content_wrap_group . '_bottom'] ) ) {
 76 |                 echo $content_wrap_group . '-bottom: ' . $value[$content_wrap_group . '_bottom'] . ';<br>';
 77 |             }
 78 | 
 79 |             if( isset( $value[$content_wrap_group . '_left'] ) && ! empty( $value[$content_wrap_group . '_left'] ) ) {
 80 |                 echo $content_wrap_group . '-left: ' . $value[$content_wrap_group . '_left'] . ';<br>';
 81 |             }
 82 |         }
 83 |     }
 84 | 
 85 |     // Getting extra options
 86 | 
 87 |     // Text color
 88 |     if( isset( $value['text_color'] ) && ! empty( $value['text_color'] ) ) {
 89 |         echo 'color: ' . $value['text_color'] . ';<br>';
 90 |     }
 91 | 
 92 |     // Background color
 93 |     if( isset( $value['background_color'] ) && ! empty( $value['background_color'] ) ) {
 94 |         echo 'background-color: ' . $value['background_color'] . ';<br>';
 95 |     }
 96 | 
 97 |     // Border color
 98 |     if( isset( $value['border_color'] ) && ! empty( $value['border_color'] ) ) {
 99 |         echo 'border-color: ' . $value['border_color'] . ';<br>';
100 |     }
101 | 
102 |     // Border style
103 |     if( isset( $value['border_style'] ) && ! empty( $value['border_style'] ) ) {
104 |         echo 'border-style: ' . $value['border_style'] . ';<br>';
105 |     }
106 | 
107 |     // Border radius
108 |     if( isset( $value['border_radius'] ) && ! empty( $value['border_radius'] ) ) {
109 |         echo 'border-radius: ' . $value['border_radius'] . ';<br>';
110 |     }
111 | ```
112 | 
113 | ## Changelog
114 | 
115 | ### 1.0.0
116 | * Initial commit
117 | 


--------------------------------------------------------------------------------