Add a stable grid in editor and so many others

Added a gridsistem inside the editor.
Cleanup the codebase.
Added phpunit structure
Init the column resize sistem.
Added gulp SCSS compilation.

For #1 #2 #3

.gitignore

@@ -16,3 +16,6 @@ wp-content/plugins/hello.php
 /sitemap.xml
 /sitemap.xml.gz
 
+.sass-cache
+node_modules
+

.travis.yml

@@ -0,0 +1,29 @@
+language: php
+
+notifications:
+  email:
+    on_success: never
+    on_failure: change
+
+branches:
+  only:
+    - master
+
+php:
+  - 5.3
+  - 5.6
+
+env:
+  - WP_VERSION=latest WP_MULTISITE=0
+  - WP_VERSION=3.0.1 WP_MULTISITE=0
+  - WP_VERSION=3.4 WP_MULTISITE=0
+
+matrix:
+  include:
+    - php: 5.3
+      env: WP_VERSION=latest WP_MULTISITE=1
+
+before_script:
+  - bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
+
+script: phpunit

admin/class-gridable-admin.php

@@ -27,7 +27,7 @@ class Gridable_Admin {
 	 *
 	 * @since    1.0.0
 	 * @access   private
-	 * @var      string    $gridable    The ID of this plugin.
+	 * @var      string $gridable The ID of this plugin.
 	 */
 	private $gridable;
 
@@ -36,20 +36,21 @@ class Gridable_Admin {
 	 *
 	 * @since    1.0.0
 	 * @access   private
-	 * @var      string    $version    The current version of this plugin.
+	 * @var      string $version The current version of this plugin.
 	 */
 	private $version;
 
 	/**
 	 * Initialize the class and set its properties.
 	 *
 	 * @since    1.0.0
-	 * @param      string    $gridable       The name of this plugin.
-	 * @param      string    $version    The version of this plugin.
+	 *
+	 * @param      string $gridable The name of this plugin.
+	 * @param      string $version The version of this plugin.
 	 */
 	public function __construct( $gridable, $version ) {
 		$this->gridable = $gridable;
-		$this->version = $version;
+		$this->version  = $version;
 	}
 
 	function add_media_button( $editor_id ) {
@@ -64,8 +65,16 @@ function add_media_button( $editor_id ) {
 			__( 'Add Row', 'gridable' )
 		);
 
+		/**
+		 * Enqueue the editor script only when there is an editor on page.
+		 * We ditch `admin_enqueue_scripts` intentionally since the editor can appear on non-edit pages like theme options
+		 */
 		wp_enqueue_script( 'gridable-editor', plugin_dir_url( __FILE__ ) . 'js/admin-editor.js', array( 'jquery' ), $this->version, true );
 
+		global $editor_styles;
+		$editor_styles = array_merge( $editor_styles, array(
+			plugin_dir_url( __FILE__ ) . 'css/editor-style.css'
+		) );
 	}
 
 	function wp_print_grider_tinymce_templates() {
@@ -77,84 +86,47 @@ function wp_print_grider_tinymce_templates() {
 		$col_classes = array(
 			'grid__item'
 		); ?>
-		<script type="text/html" id="tmpl-wpig-grider-row">
-			<div class="{{data.classes}} <?php echo join( ' ', apply_filters( 'wpig_mce_sh_row_classes', $row_classes ) );?>" {{data.atts}} data-mce-resize="false" data-mce-placeholder="1">
+		<script type="text/html" id="tmpl-gridable-grider-row">
+			<div
+				class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_row_classes', $row_classes ) ); ?>"
+				{{data.atts}} data-gridable-row="1" data-mce-resize="false" data-mce-placeholder="1">
 				{{{data.content}}}
 			</div>
 		</script>
 
-		<script type="text/html" id="tmpl-wpig-grider-col">
-			<div class="{{data.classes}} <?php echo join( ' ', apply_filters( 'wpig_mce_sh_col_classes', $col_classes ) );?>" {{data.atts}} data-mce-resize="false" data-mce-placeholder="1">
+		<script type="text/html" id="tmpl-gridable-grider-col">
+			<div
+				class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_col_classes', $col_classes ) ); ?>"
+				{{data.atts}} data-mce-resize="false" data-mce-placeholder="1">
 				<p>{{{data.content}}}</p>
 			</div>
 		</script>
 	<?php }
 
-
 	function add_grider_tinymce_plugin( $plugin_array ) {
-
-		$plugin_array['wpig_grider'] =  plugin_dir_url( __FILE__ ) . 'js/gridable.js';
+		$plugin_array['interact'] = plugin_dir_url( __FILE__ ) . 'js/interact.js';
+		$plugin_array['gridable'] = plugin_dir_url( __FILE__ ) . 'js/gridable.js';
 
 		return $plugin_array;
 	}
 
 	function my_add_styles_admin() {
 		global $current_screen;
-		$type = $current_screen->post_type;
 
-		if ( is_admin()) { ?>
+		if ( is_admin() ) { ?>
 			<script type="text/javascript">
-				var gridable_sh_col_classes = JSON.parse( '<?php echo json_encode( apply_filters( 'wpig_sh_col_attr_size', array() ) ) ?>' );
+
+				var gridable_params = {
+					sh_col_classes: JSON.parse('<?php echo json_encode( apply_filters( 'gridable_sh_col_attr_size', array() ) ) ?>'),
+					l10n: JSON.parse('<?php echo json_encode( apply_filters( 'gridable_editor_l10n_labels', array(
+						'remove_row' => esc_html__( 'Remove Row', 'gridable' ),
+						'edit_row' => esc_html__( 'Edit Row', 'gridable' ),
+						'add_column' => esc_html__( 'Add Column', 'gridable' ),
+						'new_column_content' => esc_html__( 'The new column', 'gridable' ),
+					) ) ) ?>')
+				};
 			</script>
 			<?php
 		}
 	}
-
-//	/**
-//	 * Register the stylesheets for the admin area.
-//	 *
-//	 * @since    1.0.0
-//	 */
-//	public function enqueue_styles() {
-//
-//		/**
-//		 * This function is provided for demonstration purposes only.
-//		 *
-//		 * An instance of this class should be passed to the run() function
-//		 * defined in Gridable_Loader as all of the hooks are defined
-//		 * in that particular class.
-//		 *
-//		 * The Gridable_Loader will then create the relationship
-//		 * between the defined hooks and the functions defined in this
-//		 * class.
-//		 */
-//
-//		wp_enqueue_style( $this->gridable, plugin_dir_url( __FILE__ ) . 'css/gridable-admin.css', array(), $this->version, 'all' );
-//
-//	}
-//
-//	/**
-//	 * Register the JavaScript for the admin area.
-//	 *
-//	 * @since    1.0.0
-//	 */
-//	public function enqueue_scripts() {
-//
-//		/**
-//		 * This function is provided for demonstration purposes only.
-//		 *
-//		 * An instance of this class should be passed to the run() function
-//		 * defined in Gridable_Loader as all of the hooks are defined
-//		 * in that particular class.
-//		 *
-//		 * The Gridable_Loader will then create the relationship
-//		 * between the defined hooks and the functions defined in this
-//		 * class.
-//		 */
-//
-//		wp_enqueue_script( $this->gridable, plugin_dir_url( __FILE__ ) . 'js/gridable-admin.js', array( 'jquery' ), $this->version, false );
-//
-//	}
-//
-//
 }

admin/css/admin-style.css

@@ -1,4 +1 @@
-/**
- * All of the CSS for your admin-specific functionality should be
- * included in this file.
- */
+/** All of the CSS for your admin-specific functionality should be included in this file. */

admin/css/editor-style.css

@@ -0,0 +1,23 @@
+.row.gridable-mceItem { background: #ebebeb; border-top: 1px solid #333; border-bottom: 1px solid #333; }
+
+.col.gridable-mceItem { background: #e3e3e3; border-left: 1px solid #333; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
+
+.col.gridable-mceItem:last-child { border-right: 1px solid #333; }
+
+[data-gridable-row] { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; }
+
+[data-sh-col-attr-size] { -ms-flex: 0 0 100%; flex: 0 0 100%; }
+
+[data-sh-col-attr-size="2"] { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; }
+
+[data-sh-col-attr-size="4"] { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; }
+
+[data-sh-col-attr-size="6"] { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
+
+[data-sh-col-attr-size="8"] { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; }
+
+[data-sh-col-attr-size="10"] { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; }
+
+[data-sh-col-attr-size="12"] { -ms-flex-preferred-size: 100%; flex-basis: 100%; }
+
+[data-sh-col-attr-size] { box-sizing: border-box; background: #EEE; padding: 10px; }

admin/js/admin-editor.js

@@ -11,8 +11,17 @@
 
 		shortcode += '<p>[/row]</p>';
 
-		console.debug(shortcode);
-		wp.media.editor.insert(shortcode);
+		console.log(shortcode);
+		shortcode = wpAutoP( shortcode );
+		console.log(shortcode);
+		wp.media.editor.insert( shortcode );
 	});
 
+	var wpAutoP = function ( content ) {
+		if ( switchEditors && switchEditors.wpautop ) {
+			content = switchEditors.wpautop(content);
+		}
+		return content;
+	};
+
 })( jQuery );