Simple CSS - Version 1.0

Version Description

  • Show metabox only on public post types
  • Add live preview to Customizer
  • Code cleanup
  • Better sanitizing/validation
Download this release

Release Info

Developer edge22
Plugin Icon 128x128 Simple CSS
Version 1.0
Comparing to
See all releases

Code changes from version 0.4 to 1.0

Files changed (4) hide show
  1. customize/css-control.php +1 -1
  2. js/live-preview.js +11 -0
  3. readme.txt +14 -2
  4. simple-css.php +121 -102
customize/css-control.php CHANGED
@@ -7,7 +7,7 @@ class Simple_CSS_Editor extends WP_Customize_Control {
7
  <label>
8
  <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
9
  <div class="customize-control-content">
10
- <textarea spellcheck="false" class="widefat" cols="45" rows="15" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
11
  </div>
12
  </label>
13
  <?php }
7
  <label>
8
  <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
9
  <div class="customize-control-content">
10
+ <textarea style="height:calc( 100vh - 200px );" spellcheck="false" class="widefat" cols="45" rows="15" <?php $this->link(); ?>><?php echo wp_kses_post( $this->value() ); ?></textarea>
11
  </div>
12
  </label>
13
  <?php }
js/live-preview.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ ( function( $ ) {
2
+ wp.customize( 'simple_css[css]', function( value ) {
3
+ value.bind( function( newval ) {
4
+ if ( ! $( '#simple-css-output' ).length ) {
5
+ $( '<style id="simple-css-output"></style>' ).appendTo( 'head' );
6
+ }
7
+
8
+ $( '#simple-css-output' ).text( newval );
9
+ } );
10
+ } );
11
+ } )( jQuery );
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: edge22
3
  Donate link: https://generatepress.com/ongoing-development
4
  Tags: CSS, custom CSS, Simple CSS, Simple Custom CSS, CSS Customizer, CSS metabox, CSS specific page
5
  Requires at least: 4.0
6
- Tested up to: 4.6.1
7
- Stable tag: 0.4
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -63,6 +63,12 @@ In most cases, #1 will work fine and is way easier.
63
 
64
  == Changelog ==
65
 
 
 
 
 
 
 
66
  = 0.4 =
67
  * Use browser search instead of CodeMirror dialog search
68
  * Don't show GeneratePress metabox if it's already activated
@@ -84,6 +90,12 @@ In most cases, #1 will work fine and is way easier.
84
 
85
  == Upgrade Notice ==
86
 
 
 
 
 
 
 
87
  = 0.4 =
88
  * Use browser search instead of CodeMirror dialog search
89
  * Don't show GeneratePress metabox if it's already activated
3
  Donate link: https://generatepress.com/ongoing-development
4
  Tags: CSS, custom CSS, Simple CSS, Simple Custom CSS, CSS Customizer, CSS metabox, CSS specific page
5
  Requires at least: 4.0
6
+ Tested up to: 4.8.1
7
+ Stable tag: 1.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
63
 
64
  == Changelog ==
65
 
66
+ = 1.0 =
67
+ * Show metabox only on public post types
68
+ * Add live preview to Customizer
69
+ * Code cleanup
70
+ * Better sanitizing/validation
71
+
72
  = 0.4 =
73
  * Use browser search instead of CodeMirror dialog search
74
  * Don't show GeneratePress metabox if it's already activated
90
 
91
  == Upgrade Notice ==
92
 
93
+ = 1.0 =
94
+ * Show metabox only on public post types
95
+ * Add live preview to Customizer
96
+ * Code cleanup
97
+ * Better sanitizing/validation
98
+
99
  = 0.4 =
100
  * Use browser search instead of CodeMirror dialog search
101
  * Don't show GeneratePress metabox if it's already activated
simple-css.php CHANGED
@@ -3,9 +3,9 @@
3
  Plugin Name: Simple CSS
4
  Plugin URI: https://generatepress.com
5
  Description: Simply add CSS to your WordPress site using an awesome CSS editor or the live Customizer.
6
- Version: 0.4
7
  Author: Tom Usborne
8
- Author URI: http://edge22.com
9
  License: GNU General Public License v2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
  */
@@ -15,12 +15,11 @@ if ( ! defined( 'ABSPATH' ) ) exit;
15
 
16
  add_action( 'admin_menu', 'simple_css_admin_menu' );
17
  /**
18
- * Add the admin menu page
19
- * @since 0.1
 
20
  */
21
  function simple_css_admin_menu() {
22
-
23
- // Add menu item
24
  $setting = add_theme_page(
25
  __( 'Simple CSS', 'simple-css' ),
26
  __( 'Simple CSS', 'simple-css' ),
@@ -29,28 +28,21 @@ function simple_css_admin_menu() {
29
  'simple_css_editor'
30
  );
31
 
32
- if ( ! $setting )
33
  return;
 
34
 
35
- // Add scripts on the above page only
36
  add_action( 'load-' . $setting, 'simple_css_scripts' );
37
-
38
  }
39
 
40
  /**
41
- * Enqueue all necessary scripts and styles
42
- * @since 0.1
 
43
  */
44
- function simple_css_scripts()
45
- {
46
- // Load codemirror javascript
47
  wp_enqueue_script( 'simple-css-codemirror-js', plugin_dir_url( __FILE__ ) . 'js/codemirror.js', array( 'jquery' ), null );
48
  wp_enqueue_script( 'simple-css-js', plugin_dir_url( __FILE__ ) . 'js/css.js', array( 'jquery' ), null );
49
- //wp_enqueue_script( 'simple-css-search', plugin_dir_url( __FILE__ ) . 'js/search.js', array( 'jquery' ), null );
50
- //wp_enqueue_script( 'simple-css-search-cursor', plugin_dir_url( __FILE__ ) . 'js/searchcursor.js', array( 'jquery' ), null );
51
- //wp_enqueue_script( 'simple-css-dialog', plugin_dir_url( __FILE__ ) . 'js/dialog.js', array( 'jquery' ), null );
52
-
53
- // Load codemirror CSS
54
  wp_enqueue_style( 'simple-css-codemirror-css', plugin_dir_url( __FILE__ ) . 'css/codemirror.css', null, null );
55
  wp_enqueue_style( 'simple-css-ambiance-css', plugin_dir_url( __FILE__ ) . 'css/ambiance.css', null, null );
56
  wp_enqueue_style( 'simple-css', plugin_dir_url( __FILE__ ) . 'css/style.css', null, null );
@@ -58,11 +50,11 @@ function simple_css_scripts()
58
 
59
  add_action( 'admin_init', 'simple_css_register_setting' );
60
  /**
61
- * Register the settings for the admin page
62
- * @since 0.1
 
63
  */
64
- function simple_css_register_setting()
65
- {
66
  register_setting(
67
  'simple_css',
68
  'simple_css',
@@ -71,18 +63,19 @@ function simple_css_register_setting()
71
  }
72
 
73
  /**
74
- * Build the admin page
75
- * @since 0.1
 
76
  */
77
- function simple_css_editor()
78
- {
79
  $options = get_option( 'simple_css' );
80
- $css = isset( $options['css'] ) ? $options['css'] : '';
81
- $css = wp_kses( $css, array( '\'', '\"', '>', '+' ) );
82
  $theme = isset( $options['theme'] ) ? $options['theme'] : '';
83
- if ( '' == $theme )
 
84
  $theme = 1;
85
-
 
86
  if ( 1 == $theme ) {
87
  $theme_name = 'ambiance';
88
  } else {
@@ -104,14 +97,14 @@ function simple_css_editor()
104
  <div id="postbox-container-1" class="postbox-container simple-css-sidebar">
105
  <div>
106
  <?php submit_button( __( 'Save CSS', 'simple-css' ), 'primary large simple-css-save' ); ?>
107
-
108
  <div class="color-theme">
109
  <select class="change-theme" name="simple_css[theme]" id="simple_css[theme]">
110
  <option value="1" <?php selected( $theme, 1 ); ?>><?php _e( 'Dark','simple-css' );?></option>
111
  <option value="2" <?php selected( $theme, 2 ); ?>><?php _e( 'Light','simple-css' );?></option>
112
  </select>
113
  </div>
114
-
115
  <?php if ( ! defined( 'GENERATE_VERSION' ) ) : ?>
116
  <div class="postbox">
117
  <h3 class="hndle"><span><?php _e( 'GeneratePress', 'simple-css' ); ?></span></h3>
@@ -127,7 +120,7 @@ function simple_css_editor()
127
  <p><?php printf( __( 'Want to live preview your CSS changes? Check out the Simple CSS textarea in the %1$sCustomize%2$s area.', 'simple-css' ), '<a href="' . esc_url( admin_url( 'customize.php' ) ) . '">', '</a>' ); ?></p>
128
  </div>
129
  </div>
130
-
131
  <div class="postbox">
132
  <h3 class="hndle"><span><?php _e( 'Tips', 'simple-css' ); ?></span></h3>
133
  <div class="inside">
@@ -143,24 +136,23 @@ function simple_css_editor()
143
  }
144
 
145
  /**
146
- * Sanitize our saved values
147
- * @since 0.1
 
148
  */
149
- function simple_css_validate( $input )
150
- {
151
- $input['css'] = wp_kses( $input['css'], array( '\'', '\"', '>', '+' ) );
152
- $input['css'] = str_replace( '&gt;', '>', $input['css'] );
153
- $input['theme'] = wp_filter_nohtml_kses($input['theme']);
154
  return $input;
155
  }
156
 
157
  add_action( 'customize_register', 'simple_css_customize' );
158
  /**
159
- * Create the Customizer option
160
- * @since 0.1
 
161
  */
162
- function simple_css_customize( $wp_customize )
163
- {
164
  require_once( plugin_dir_path( __FILE__ ) . 'customize/css-control.php' );
165
 
166
  $wp_customize->add_section( 'simple_css_section',
@@ -174,110 +166,137 @@ function simple_css_customize( $wp_customize )
174
  array(
175
  'type' => 'option',
176
  'capability' => 'edit_theme_options',
177
- 'sanitize_callback' => 'wp_kses',
 
178
  )
179
  );
180
 
181
- $wp_customize->add_control( new Simple_CSS_Editor( $wp_customize, 'simple_css',
182
- array(
183
- 'section' => 'simple_css_section',
184
- 'settings' => 'simple_css[css]'
 
 
 
185
  )
186
- ) );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
187
  }
188
 
189
- add_action( 'wp_head','simple_css_generate' );
190
  /**
191
- * Generate the CSS in the wp_head hook
192
- * @since 0.1
 
193
  */
194
- function simple_css_generate()
195
- {
196
- // Get out options
197
  $options = get_option( 'simple_css' );
198
-
199
- // Get our CSS
200
  $output = $options['css'];
201
-
202
- // Get our metabox CSS
203
- if ( is_singular() )
204
- $output .= ( get_the_ID() ) ? get_post_meta( get_the_ID(), '_simple_css', true ) : '';
205
-
206
- // If we don't have any CSS, bail.
207
- if ( '' == $output )
208
  return;
209
-
210
- // Strip tabs and line breaks from our CSS
211
- $output = str_replace(array("\r", "\n"), '', $output);
212
- $output = preg_replace('/\s+/', ' ', $output);
213
-
214
  // Finally, print it
215
- echo '<style type="text/css">';
216
- echo $output;
217
- echo '</style><!-- Generated by Simple CSS - https://wordpress.org/plugins/simple-css/ -->';
218
  }
219
 
220
  add_action( 'add_meta_boxes', 'simple_css_metabox' );
221
- function simple_css_metabox()
222
- {
 
 
 
 
223
  // Set user role - make filterable
224
  $allowed = apply_filters( 'simple_css_metabox_capability', 'activate_plugins' );
225
 
226
  // If not an administrator, don't show the metabox
227
- if ( ! current_user_can( $allowed ) )
228
  return;
 
229
 
230
- $post_types = get_post_types();
 
231
  foreach ($post_types as $type) {
232
  add_meta_box
233
  (
234
- 'simple_css_metabox', // $id
235
- __( 'Simple CSS','simple-css' ), // $title
236
- 'simple_css_show_metabox', // $callback
237
- $type, // $page
238
- 'normal', // $context
239
- 'default' // $priority
240
  );
241
  }
242
  }
243
 
244
  /**
245
- * Outputs the content of the metabox
 
 
 
 
246
  */
247
- function simple_css_show_metabox( $post )
248
- {
249
  wp_nonce_field( basename( __FILE__ ), 'simple_css_nonce' );
250
  $options = get_post_meta( $post->ID );
251
- $css = isset( $options[ '_simple_css' ] ) ? $options[ '_simple_css' ] : false;
252
- if ( $css ) {
253
- $css = wp_kses( $css, array( '\'', '\"', '>', '+' ) );
254
- $css = $css[0];
255
- }
256
  ?>
257
  <p>
258
- <textarea style="width:100%;height:300px;" name="_simple_css" id="simple-css-textarea"><?php echo $css; ?></textarea>
259
  </p>
260
  <?php
261
  }
262
 
263
- add_action('save_post', 'simple_css_save_metabox');
264
- function simple_css_save_metabox($post_id)
265
- {
266
- // Checks save status
 
 
 
 
 
267
  $is_autosave = wp_is_post_autosave( $post_id );
268
  $is_revision = wp_is_post_revision( $post_id );
269
  $is_valid_nonce = ( isset( $_POST[ 'simple_css_nonce' ] ) && wp_verify_nonce( $_POST[ 'simple_css_nonce' ], basename( __FILE__ ) ) ) ? true : false;
270
 
271
- // Exits script depending on save status
272
  if ( $is_autosave || $is_revision || ! $is_valid_nonce ) {
273
  return;
274
  }
275
 
276
- // Checks for input and sanitizes/saves if needed
277
- // Checks for input and saves if needed
278
  if ( isset( $_POST[ '_simple_css' ] ) && $_POST[ '_simple_css' ] !== '' ) {
279
- $css = wp_kses( $_POST[ '_simple_css' ], array( '\'', '\"', '>', '+' ) );
280
- update_post_meta( $post_id, '_simple_css', $css );
281
  } else {
282
  delete_post_meta( $post_id, '_simple_css' );
283
  }
3
  Plugin Name: Simple CSS
4
  Plugin URI: https://generatepress.com
5
  Description: Simply add CSS to your WordPress site using an awesome CSS editor or the live Customizer.
6
+ Version: 1.0
7
  Author: Tom Usborne
8
+ Author URI: https://tomusborne.com
9
  License: GNU General Public License v2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
  */
15
 
16
  add_action( 'admin_menu', 'simple_css_admin_menu' );
17
  /**
18
+ * Add the admin menu page.
19
+ *
20
+ * @since 0.1
21
  */
22
  function simple_css_admin_menu() {
 
 
23
  $setting = add_theme_page(
24
  __( 'Simple CSS', 'simple-css' ),
25
  __( 'Simple CSS', 'simple-css' ),
28
  'simple_css_editor'
29
  );
30
 
31
+ if ( ! $setting ) {
32
  return;
33
+ }
34
 
 
35
  add_action( 'load-' . $setting, 'simple_css_scripts' );
 
36
  }
37
 
38
  /**
39
+ * Enqueue all necessary scripts and styles.
40
+ *
41
+ * @since 0.1
42
  */
43
+ function simple_css_scripts() {
 
 
44
  wp_enqueue_script( 'simple-css-codemirror-js', plugin_dir_url( __FILE__ ) . 'js/codemirror.js', array( 'jquery' ), null );
45
  wp_enqueue_script( 'simple-css-js', plugin_dir_url( __FILE__ ) . 'js/css.js', array( 'jquery' ), null );
 
 
 
 
 
46
  wp_enqueue_style( 'simple-css-codemirror-css', plugin_dir_url( __FILE__ ) . 'css/codemirror.css', null, null );
47
  wp_enqueue_style( 'simple-css-ambiance-css', plugin_dir_url( __FILE__ ) . 'css/ambiance.css', null, null );
48
  wp_enqueue_style( 'simple-css', plugin_dir_url( __FILE__ ) . 'css/style.css', null, null );
50
 
51
  add_action( 'admin_init', 'simple_css_register_setting' );
52
  /**
53
+ * Register the settings for the admin page.
54
+ *
55
+ * @since 0.1
56
  */
57
+ function simple_css_register_setting() {
 
58
  register_setting(
59
  'simple_css',
60
  'simple_css',
63
  }
64
 
65
  /**
66
+ * Build the admin page.
67
+ *
68
+ * @since 0.1
69
  */
70
+ function simple_css_editor() {
 
71
  $options = get_option( 'simple_css' );
72
+ $css = isset( $options['css'] ) ? strip_tags( $options['css'] ) : '';
 
73
  $theme = isset( $options['theme'] ) ? $options['theme'] : '';
74
+
75
+ if ( '' == $theme ) {
76
  $theme = 1;
77
+ }
78
+
79
  if ( 1 == $theme ) {
80
  $theme_name = 'ambiance';
81
  } else {
97
  <div id="postbox-container-1" class="postbox-container simple-css-sidebar">
98
  <div>
99
  <?php submit_button( __( 'Save CSS', 'simple-css' ), 'primary large simple-css-save' ); ?>
100
+
101
  <div class="color-theme">
102
  <select class="change-theme" name="simple_css[theme]" id="simple_css[theme]">
103
  <option value="1" <?php selected( $theme, 1 ); ?>><?php _e( 'Dark','simple-css' );?></option>
104
  <option value="2" <?php selected( $theme, 2 ); ?>><?php _e( 'Light','simple-css' );?></option>
105
  </select>
106
  </div>
107
+
108
  <?php if ( ! defined( 'GENERATE_VERSION' ) ) : ?>
109
  <div class="postbox">
110
  <h3 class="hndle"><span><?php _e( 'GeneratePress', 'simple-css' ); ?></span></h3>
120
  <p><?php printf( __( 'Want to live preview your CSS changes? Check out the Simple CSS textarea in the %1$sCustomize%2$s area.', 'simple-css' ), '<a href="' . esc_url( admin_url( 'customize.php' ) ) . '">', '</a>' ); ?></p>
121
  </div>
122
  </div>
123
+
124
  <div class="postbox">
125
  <h3 class="hndle"><span><?php _e( 'Tips', 'simple-css' ); ?></span></h3>
126
  <div class="inside">
136
  }
137
 
138
  /**
139
+ * Sanitize our saved values.
140
+ *
141
+ * @since 0.1
142
  */
143
+ function simple_css_validate( $input ) {
144
+ $input['css'] = strip_tags( $input['css'] );
145
+ $input['theme'] = sanitize_text_field( $input['theme'] );
 
 
146
  return $input;
147
  }
148
 
149
  add_action( 'customize_register', 'simple_css_customize' );
150
  /**
151
+ * Create the Customizer option.
152
+ *
153
+ * @since 0.1
154
  */
155
+ function simple_css_customize( $wp_customize ) {
 
156
  require_once( plugin_dir_path( __FILE__ ) . 'customize/css-control.php' );
157
 
158
  $wp_customize->add_section( 'simple_css_section',
166
  array(
167
  'type' => 'option',
168
  'capability' => 'edit_theme_options',
169
+ 'sanitize_callback' => 'simple_css_sanitize_css',
170
+ 'transport' => 'postMessage',
171
  )
172
  );
173
 
174
+ $wp_customize->add_control(
175
+ new Simple_CSS_Editor(
176
+ $wp_customize, 'simple_css',
177
+ array(
178
+ 'section' => 'simple_css_section',
179
+ 'settings' => 'simple_css[css]'
180
+ )
181
  )
182
+ );
183
+ }
184
+
185
+ add_action( 'customize_preview_init', 'simple_css_live_preview' );
186
+ /**
187
+ * Add our live preview.
188
+ *
189
+ * @since 1.0
190
+ */
191
+ function simple_css_live_preview() {
192
+ wp_enqueue_script( 'simple-css-live-preview', trailingslashit( plugin_dir_url( __FILE__ ) ) . 'js/live-preview.js', array( 'customize-preview' ), null, true );
193
+ }
194
+
195
+ /**
196
+ * Strip HTML from our CSS.
197
+ *
198
+ * @since 1.0
199
+ *
200
+ * @param $input Our initial CSS.
201
+ */
202
+ function simple_css_sanitize_css( $input ) {
203
+ return strip_tags( $input );
204
  }
205
 
206
+ add_action( 'wp_head', 'simple_css_generate' );
207
  /**
208
+ * Generate the CSS in the wp_head hook.
209
+ *
210
+ * @since 0.1
211
  */
212
+ function simple_css_generate() {
 
 
213
  $options = get_option( 'simple_css' );
 
 
214
  $output = $options['css'];
215
+
216
+ if ( is_singular() ) {
217
+ $output .= get_post_meta( get_the_ID(), '_simple_css', true );
218
+ }
219
+
220
+ if ( '' == $output ) {
 
221
  return;
222
+ }
223
+
224
+ $output = str_replace( array( "\r", "\n" ), '', $output );
225
+ $output = preg_replace( '/\s+/', ' ', $output );
226
+
227
  // Finally, print it
228
+ echo '<style type="text/css" id="simple-css-output">';
229
+ echo strip_tags( $output );
230
+ echo '</style>';
231
  }
232
 
233
  add_action( 'add_meta_boxes', 'simple_css_metabox' );
234
+ /**
235
+ * Add our Simple CSS meta box.
236
+ *
237
+ * @since 0.1
238
+ */
239
+ function simple_css_metabox() {
240
  // Set user role - make filterable
241
  $allowed = apply_filters( 'simple_css_metabox_capability', 'activate_plugins' );
242
 
243
  // If not an administrator, don't show the metabox
244
+ if ( ! current_user_can( $allowed ) ) {
245
  return;
246
+ }
247
 
248
+ $args = array( 'public' => true );
249
+ $post_types = get_post_types( $args );
250
  foreach ($post_types as $type) {
251
  add_meta_box
252
  (
253
+ 'simple_css_metabox',
254
+ __( 'Simple CSS','simple-css' ),
255
+ 'simple_css_show_metabox',
256
+ $type,
257
+ 'normal',
258
+ 'default'
259
  );
260
  }
261
  }
262
 
263
  /**
264
+ * Outputs the content of the metabox.
265
+ *
266
+ * @since 0.1
267
+ *
268
+ * @param $post Object
269
  */
270
+ function simple_css_show_metabox( $post ) {
 
271
  wp_nonce_field( basename( __FILE__ ), 'simple_css_nonce' );
272
  $options = get_post_meta( $post->ID );
273
+ $css = isset( $options[ '_simple_css' ] ) ? $options[ '_simple_css' ][0] : false;
 
 
 
 
274
  ?>
275
  <p>
276
+ <textarea style="width:100%;height:300px;" name="_simple_css" id="simple-css-textarea"><?php echo strip_tags( $css ); ?></textarea>
277
  </p>
278
  <?php
279
  }
280
 
281
+ add_action( 'save_post', 'simple_css_save_metabox' );
282
+ /**
283
+ * Save our meta box value.
284
+ *
285
+ * @since 0.1
286
+ *
287
+ * @param $post_id boolean
288
+ */
289
+ function simple_css_save_metabox( $post_id ) {
290
  $is_autosave = wp_is_post_autosave( $post_id );
291
  $is_revision = wp_is_post_revision( $post_id );
292
  $is_valid_nonce = ( isset( $_POST[ 'simple_css_nonce' ] ) && wp_verify_nonce( $_POST[ 'simple_css_nonce' ], basename( __FILE__ ) ) ) ? true : false;
293
 
 
294
  if ( $is_autosave || $is_revision || ! $is_valid_nonce ) {
295
  return;
296
  }
297
 
 
 
298
  if ( isset( $_POST[ '_simple_css' ] ) && $_POST[ '_simple_css' ] !== '' ) {
299
+ update_post_meta( $post_id, '_simple_css', strip_tags( $css ) );
 
300
  } else {
301
  delete_post_meta( $post_id, '_simple_css' );
302
  }