Merge branch 'release/1.1.5'

css/admin.css

@@ -1,4 +1,5 @@
 #siteorigin-custom-css {
+  color: #333;
   margin: 0 0 0 -20px;
 }
 #siteorigin-custom-css h2 {

css/admin.less

@@ -1,6 +1,7 @@
 @import "mixins";
 
 #siteorigin-custom-css {
+	color: #333;
 	margin: 0 0 0 -20px;
 
 	h2 {

css/inspector.css

@@ -1,4 +1,5 @@
 #socss-inspector-interface {
+  color: #333;
   display: none;
   position: fixed;
   bottom: 0;

css/inspector.less

@@ -1,4 +1,5 @@
 #socss-inspector-interface {
+	color: #333;
 	display: none;
 	position: fixed;
 	bottom: 0;

js/editor.js

@@ -290,12 +290,23 @@
          * Scale the size of the editor depending on whether it's expanded or not
          */
         scaleEditor: function () {
+            var windowHeight = $( window ).outerHeight();
             if (this.$el.hasClass('expanded')) {
                 // If we're in the expanded view, then resize the editor
-                this.codeMirror.setSize('100%', $(window).outerHeight() - this.$('.custom-css-toolbar').outerHeight());
+                this.$el.find( '.CodeMirror-scroll' ).css( 'max-height', '' );
+                this.codeMirror.setSize('100%', windowHeight - this.$('.custom-css-toolbar').outerHeight());
             }
             else {
-                this.codeMirror.setSize('100%', 'auto');
+                // Attempt to calculate approximate space available for editor when not expanded.
+                var $form = $( '#so-custom-css-form' );
+                var otherEltsHeight = $('#wpadminbar').outerHeight( true ) +
+                    $( '#siteorigin-custom-css' ).find( '> h2' ).outerHeight( true ) +
+                    $form.find( '> .custom-css-toolbar' ).outerHeight( true ) +
+                    $form.find( '> p.description' ).outerHeight( true ) +
+                    $form.find( '> p.submit' ).outerHeight( true ) +
+                    parseFloat( $( '#wpbody-content' ).css( 'padding-bottom' ) );
+                this.$el.find( '.CodeMirror-scroll' ).css( 'max-height', windowHeight - otherEltsHeight );
+                this.codeMirror.setSize( '100%', 'auto' );
             }
         },
 
@@ -1481,32 +1492,46 @@
             var $dec = $('<div class="dec-button socss-button"><span class="fa fa-minus"></span></div>').appendTo($diw);
             var $inc = $('<div class="inc-button socss-button"><span class="fa fa-plus"></span></div>').appendTo($diw);
 
-            // Increment is clicked
-            $inc.click( function(){
-                var value = thisView.parseUnits( $el.val() );
-                if( value.value === '' ) {
-                    return true;
+            var stepValue = function( direction ) {
+                var value = Number.parseInt( thisView.parseUnits( $el.val() ).value );
+
+                if( Number.isNaN( value ) ) {
+                    value = 0;
                 }
 
-                var newVal = Math.ceil( value.value * 1.05 );
+                var newVal = value + direction;
 
                 $fi.val( newVal );
                 updateValue();
                 $el.trigger('change').trigger('measurement_refresh');
-            } );
+            };
 
-            $dec.click( function(){
-                var value = thisView.parseUnits( $el.val() );
-                if( value.value === '' ) {
-                    return true;
-                }
+            var setupStepButton = function ( $button ) {
+                var direction = $button.is( '.dec-button' ) ? -1 : 1;
+                var intervalId;
+                var timeoutId;
+                $button.mousedown( function(){
+                    stepValue( direction );
+                    timeoutId = setTimeout( function () {
+                        intervalId = setInterval( function () {
+                            stepValue( direction );
+                        }, 50 );
+                    }, 500 );
+                } ).on( 'mouseup mouseout', function(){
+                    if ( timeoutId ) {
+                        clearTimeout( timeoutId );
+                        timeoutId = null;
+                    }
+                    if ( intervalId ) {
+                        clearInterval( intervalId );
+                        intervalId = null;
+                    }
+                } );
+            };
 
-                var newVal = Math.floor( value.value / 1.05 );
+            setupStepButton( $dec );
+            setupStepButton( $inc );
 
-                $fi.val( newVal );
-                updateValue();
-                $el.trigger('change').trigger('measurement_refresh');
-            } );
         }
 
     } );

readme.txt

@@ -65,6 +65,13 @@ We offer free support on the [SiteOrigin support forums](https://siteorigin.com/
 
 == Changelog ==
 
+= 1.1.5 - 14 September 2017 =
+* Use `home_url` instead of `site_url` to determine where to open CSS preview.
+* Increment and decrement buttons work when value empty or zero. Also added repeating action while button held down.
+* Scroll editor instead of the whole page so 'Save' button is always visible.
+* Set color CSS on visual editor and inspector.
+* Saving generated CSS to stylesheet file in uploads directory.
+
 = 1.1.4 - 31 January 2017 =
 * Updated CodeMirror to 2.25.2.
 * Removed extra line padding.
@@ -128,4 +135,4 @@ We offer free support on the [SiteOrigin support forums](https://siteorigin.com/
 * Made it easier to follow links with inspector enabled.
 
 = 1.0 =
-* Initial release.
+* Initial release.

so-css.php

@@ -45,7 +45,7 @@ function __construct(){
 		// The request to hide the getting started video
 		add_action( 'wp_ajax_socss_hide_getting_started', array( $this, 'admin_action_hide_getting_started' ) );
 
-		if( isset($_GET['so_css_preview']) && !is_admin() ) {
+		if( isset( $_GET['so_css_preview'] ) && !is_admin() ) {
 
 			add_action( 'plugins_loaded', array($this, 'disable_ngg_resource_manager') );
 			add_filter( 'show_admin_bar', '__return_false' );
@@ -75,14 +75,29 @@ static function single(){
 	/**
 	 * Display the custom CSS in the header.
 	 */
-	function action_wp_head(){
-		$custom_css = get_option( 'siteorigin_custom_css[' . $this->theme . ']', '' );
-		if ( empty( $custom_css ) ) return;
-
-		// We just need to enqueue a dummy style
-		echo "<style id='" . sanitize_html_class($this->theme) . "-custom-css' class='siteorigin-custom-css' type='text/css'>\n";
-		echo self::sanitize_css( $custom_css ) . "\n";
-		echo "</style>\n";
+	function action_wp_head() {
+		$upload_dir = wp_upload_dir();
+		$upload_dir_path = $upload_dir['basedir'] . '/so-css/';
+
+		$css_file_name = 'so-css-' . $this->theme;
+		$css_file_path = $upload_dir_path . $css_file_name . '.css';
+
+		if ( empty( $_GET['so_css_preview'] ) && ! is_admin() && file_exists( $css_file_path ) ) {
+			wp_enqueue_style(
+				'so-css-' . $this->theme,
+				set_url_scheme( $upload_dir['baseurl'] . '/so-css/' . $css_file_name . '.css' ),
+				array(),
+				$this->get_latest_revision_timestamp()
+			);
+		} else {
+			$custom_css = get_option( 'siteorigin_custom_css[' . $this->theme . ']', '' );
+			// We just need to enqueue a dummy style
+			if ( ! empty( $custom_css ) ) {
+				echo "<style id='" . sanitize_html_class($this->theme) . "-custom-css' class='siteorigin-custom-css' type='text/css'>\n";
+				echo self::sanitize_css( $custom_css ) . "\n";
+				echo "</style>\n";
+			}
+		}
 	}
 
 	function set_plugin_textdomain(){
@@ -97,33 +112,55 @@ function action_admin_menu(){
 
 		if ( current_user_can('edit_theme_options') && isset( $_POST['siteorigin_custom_css_save'] ) ) {
 			check_admin_referer( 'custom_css', '_sononce' );
-			$theme = basename( get_template_directory() );
 
 			// Sanitize CSS input. Should keep most tags, apart from script and style tags.
 			$custom_css = self::sanitize_css( filter_input(INPUT_POST, 'custom_css' ) );
 
-			$current = get_option('siteorigin_custom_css[' . $theme . ']');
+			$current = get_option('siteorigin_custom_css[' . $this->theme . ']');
 			if( $current === false ) {
-				add_option( 'siteorigin_custom_css[' . $theme . ']', $custom_css , '', 'no' );
+				add_option( 'siteorigin_custom_css[' . $this->theme . ']', $custom_css , '', 'no' );
 			}
 			else {
-				update_option( 'siteorigin_custom_css[' . $theme . ']', $custom_css );
+				update_option( 'siteorigin_custom_css[' . $this->theme . ']', $custom_css );
 			}
 
 			// If this has changed, then add a revision.
 			if ( $current != $custom_css ) {
-				$revisions = get_option( 'siteorigin_custom_css_revisions[' . $theme . ']' );
+				$revisions = get_option( 'siteorigin_custom_css_revisions[' . $this->theme . ']' );
 				if ( empty( $revisions ) ) {
-					add_option( 'siteorigin_custom_css_revisions[' . $theme . ']', array(), '', 'no' );
+					add_option( 'siteorigin_custom_css_revisions[' . $this->theme . ']', array(), '', 'no' );
 					$revisions = array();
 				}
 				$revisions[ time() ] = $custom_css;
 
 				// Sort the revisions and cut off any old ones.
 				krsort($revisions);
 				$revisions = array_slice($revisions, 0, 15, true);
-
-				update_option( 'siteorigin_custom_css_revisions[' . $theme . ']', $revisions );
+
+				update_option( 'siteorigin_custom_css_revisions[' . $this->theme . ']', $revisions );
+
+				if( WP_Filesystem() ) {
+					global $wp_filesystem;
+					$upload_dir = wp_upload_dir();
+					$upload_dir_path = $upload_dir['basedir'] . '/so-css/';
+
+					if ( ! $wp_filesystem->is_dir( $upload_dir_path ) ) {
+						$wp_filesystem->mkdir( $upload_dir_path );
+					}
+
+					$css_file_name = 'so-css-' . $this->theme;
+					$css_file_path = $upload_dir_path . $css_file_name . '.css';
+
+					if ( file_exists( $css_file_path ) ) {
+						$wp_filesystem->delete( $css_file_path );
+					}
+
+					$wp_filesystem->put_contents(
+						$css_file_path,
+						$custom_css
+					);
+
+				}
 			}
 		}
 	}
@@ -137,9 +174,9 @@ function add_help_tab(){
 			'id' => 'custom-css',
 			'title' => __( 'Custom CSS', 'so-css' ),
 			'content' => '<p>'
-	             . sprintf( __( "SiteOrigin CSS adds any custom CSS you enter here into your site's header. ", 'so-css' ) )
-	             . __( "These changes will persist across updates so it's best to make all your changes here. ", 'so-css' )
-	             . '</p>'
+				. sprintf( __( "SiteOrigin CSS adds any custom CSS you enter here into your site's header. ", 'so-css' ) )
+				. __( "These changes will persist across updates so it's best to make all your changes here. ", 'so-css' )
+				. '</p>'
 		) );
 	}
 
@@ -186,7 +223,9 @@ function enqueue_admin_scripts( $page ){
 
 		wp_localize_script( 'siteorigin-custom-css', 'socssOptions', array(
 			'themeCSS' => SiteOrigin_CSS::single()->get_theme_css(),
-			'homeURL' => add_query_arg( 'so_css_preview', '1', site_url() ),
+			// Pretty confusing, but it seems we should be using `home_url` and NOT `site_url`
+			// as described here => https://wordpress.stackexchange.com/a/50605
+			'homeURL' => add_query_arg( 'so_css_preview', '1', home_url() ),
 			'snippets' => $this->get_snippets(),
 
 			'propertyControllers' => apply_filters( 'siteorigin_css_property_controllers', $this->get_property_controllers() ),
@@ -438,6 +477,14 @@ function disable_ngg_resource_manager() {
 		//The NextGen Gallery plugin does some weird interfering with the output buffer.
 		define('NGG_DISABLE_RESOURCE_MANAGER', true);
 	}
+
+	private function get_latest_revision_timestamp() {
+		$revisions = get_option( 'siteorigin_custom_css_revisions[' . $this->theme . ']' );
+		krsort( $revisions );
+		$revision_times = array_keys( $revisions );
+
+		return $revision_times[0];
+	}
 }
 
 // Initialize the single