Added support for 12/18/24/36/45/60/90 columns in a row

.gitignore

@@ -2,14 +2,36 @@ node_modules
 vendor
 build/*
 !build/index.js
+!build/index-12.js
+!build/index-18.js
+!build/index-24.js
+!build/index-36.js
+!build/index-45.js
+!build/index-60.js
+!build/index-90.js
 !build/index.asset.php
 !build/index.css
+!build/index-12.css
+!build/index-18.css
+!build/index-24.css
+!build/index-36.css
+!build/index-45.css
+!build/index-60.css
+!build/index-90.css
 !build/style-index.css
+!build/style-index-12.css
+!build/style-index-18.css
+!build/style-index-24.css
+!build/style-index-36.css
+!build/style-index-45.css
+!build/style-index-60.css
+!build/style-index-90.css
 !build/settings.asset.php
 !build/settings.css
 composer.phar
 /release
 .DS_Store
+.idea
 /test-results/
 /artifacts/
 /blob-report/

build/style-index-12.css

@@ -0,0 +1 @@
+.wp-bootstrap-blocks-row.row.alignfull{margin-left:0;margin-right:0}

e2e-test-plugins/bootstrap-v4.php

@@ -8,4 +8,5 @@
  * @package wp-bootstrap-blocks-test-bootstrap-v4
  */
 
+define( 'WP_BOOTSTRAP_BLOCKS_GRID_COLUMNS', '12' );
 define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );

e2e-test-plugins/css-grid.php

@@ -8,5 +8,6 @@
  * @package wp-bootstrap-blocks-test-css-grid
  */
 
+define( 'WP_BOOTSTRAP_BLOCKS_GRID_COLUMNS', '12' );
 define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );
 define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true );

package.json

@@ -41,11 +41,11 @@
     "prettier": "npm:[email protected]"
   },
   "scripts": {
-    "start": "wp-scripts start src/index.js src/settings/settings.js",
+    "start": "wp-scripts start src/index-12.js src/index-18.js src/index-24.js src/index-36.js src/index-45.js src/index-60.js src/index-90.js src/settings/settings.js",
     "dev": "npm run start",
     "prebuild": "npm run check-engines",
-    "build": "wp-scripts build src/index.js src/settings/settings.js",
-    "build-theme-assets": "sass test-themes/bootstrap/bootstrap-with-cssgrid.scss test-themes/bootstrap/bootstrap-with-cssgrid.css",
+    "build": "wp-scripts build src/index-12.js src/index-18.js src/index-24.js src/index-36.js src/index-45.js src/index-60.js src/index-90.js src/settings/settings.js",
+    "build-theme-assets": "sass test-themes/bootstrap/bootstrap-with-cssgrid-12.scss test-themes/bootstrap/bootstrap-with-cssgrid-12.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-18.scss test-themes/bootstrap/bootstrap-with-cssgrid-18.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-24.scss test-themes/bootstrap/bootstrap-with-cssgrid-24.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-36.scss test-themes/bootstrap/bootstrap-with-cssgrid-36.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-45.scss test-themes/bootstrap/bootstrap-with-cssgrid-45.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-60.scss test-themes/bootstrap/bootstrap-with-cssgrid-60.css && sass test-themes/bootstrap/bootstrap-with-cssgrid-90.scss test-themes/bootstrap/bootstrap-with-cssgrid-90.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-12.scss test-themes/bootstrap/bootstrap-without-cssgrid-12.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-18.scss test-themes/bootstrap/bootstrap-without-cssgrid-18.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-24.scss test-themes/bootstrap/bootstrap-without-cssgrid-24.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-36.scss test-themes/bootstrap/bootstrap-without-cssgrid-36.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-45.scss test-themes/bootstrap/bootstrap-without-cssgrid-45.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-60.scss test-themes/bootstrap/bootstrap-without-cssgrid-60.css && sass test-themes/bootstrap/bootstrap-without-cssgrid-90.scss test-themes/bootstrap/bootstrap-without-cssgrid-90.css",
     "update-translations": "scripts/translations/extract-messages.sh && scripts/translations/update-translation-files.sh && scripts/translations/compile-translation-files.sh",
     "wp-env": "wp-env",
     "check-engines": "wp-scripts check-engines",

scripts/deploy-wp-plugin.sh

@@ -76,8 +76,29 @@ cp -R $SOURCEPATH/languages $RELEASEPATH/trunk/
 cp -R $SOURCEPATH/src $RELEASEPATH/trunk/
 mkdir -p $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/index.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-12.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-18.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-24.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-36.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-45.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-60.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-90.css $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/style-index.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-12.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-18.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-24.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-36.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-45.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-60.css $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/style-index-90.css $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/index.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-12.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-18.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-24.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-36.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-45.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-60.js $RELEASEPATH/trunk/build/
+cp $SOURCEPATH/build/index-90.js $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/index.asset.php $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/settings.css $RELEASEPATH/trunk/build/
 cp $SOURCEPATH/build/settings.asset.php $RELEASEPATH/trunk/build/

src/class-wp-bootstrap-blocks.php

@@ -161,7 +161,7 @@ public function enqueue_block_assets() {
 		// Styles.
 		wp_enqueue_style(
 			$this->token . '-styles', // Handle.
-			esc_url( $this->assets_url ) . 'style-index.css', // Block style CSS.
+			esc_url( $this->assets_url ) . 'style-index-12.css', // Block style CSS.
 			array(),
 			self::$version
 		);
@@ -172,9 +172,9 @@ public function enqueue_block_assets() {
 	 */
 	public function enqueue_block_editor_assets() {
 		// Scripts.
-		$index_path = $this->assets_dir . 'index.js';
-		$index_url = esc_url( $this->assets_url ) . 'index.js';
-		$index_asset_file = $this->assets_dir . 'index.asset.php';
+		$index_path = $this->assets_dir . 'index-' . Settings::get_grid_columns() . '.js';
+		$index_url = esc_url( $this->assets_url ) . 'index-' . Settings::get_grid_columns() . '.js';
+		$index_asset_file = $this->assets_dir . 'index-' . Settings::get_grid_columns() . '.asset.php';
 		$index_asset = file_exists( $index_asset_file )
 			? require_once $index_asset_file
 			: null;
@@ -194,6 +194,7 @@ public function enqueue_block_editor_assets() {
 			'wpBootstrapBlocks',
 			array(
 				'bootstrapVersion' => Settings::get_bootstrap_version(),
+				'gridColumns' => Settings::get_grid_columns(),
 				'isBootstrap5Active' => Settings::is_bootstrap_5_active(),
 				'isCssGridEnabled' => Settings::is_css_grid_enabled(),
 			)
@@ -202,7 +203,7 @@ public function enqueue_block_editor_assets() {
 		// Styles.
 		wp_enqueue_style(
 			$this->token . '-editor-styles', // Handle.
-			esc_url( $this->assets_url ) . 'index.css', // Block editor CSS.
+			esc_url( $this->assets_url ) . 'index-' . Settings::get_grid_columns() . '.css', // Block editor CSS.
 			array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
 			self::$version
 		);

src/column/class-column-block-type.php

@@ -107,6 +107,12 @@ class Column_Block_Type extends Block_Type {
 			'contentVerticalAlignment' => '',
 		);
 
+		public function __construct()
+		{
+			$this->default_attributes['sizeXs'] = Settings::get_grid_columns();
+			parent::__construct();
+		}
+
 		/**
 		 * Get name of block template.
 		 *

src/column/edit.js

@@ -17,7 +17,7 @@ import {
 	AlignmentToolbar,
 } from '@wordpress/block-editor';
 
-import { isBootstrap5Active, isCssGridEnabled } from '../helper';
+import {getGridColumns, isBootstrap5Active, isCssGridEnabled} from '../helper';
 import {
 	verticalAlignBottom,
 	verticalAlignCenter,
@@ -60,7 +60,7 @@ const ColumnSizeRangeControl = ( {
 				} );
 			} }
 			min={ 0 }
-			max={ 12 }
+			max={ getGridColumns() }
 			{ ...props }
 		/>
 	);

src/helper.js

@@ -2,6 +2,9 @@
 export const getBootstrapVersion = () => {
 	return wpBootstrapBlocks.bootstrapVersion;
 };
+export const getGridColumns = () => {
+	return wpBootstrapBlocks.gridColumns;
+};
 
 export const isBootstrap5Active = () => {
 	return wpBootstrapBlocks.isBootstrap5Active === '1';

src/index-12.js

@@ -0,0 +1,2 @@
+import './row/editor-12.scss';
+import './index';

src/index-18.js

@@ -0,0 +1,2 @@
+import './row/editor-18.scss';
+import './index';

src/index-24.js

@@ -0,0 +1,2 @@
+import './row/editor-24.scss';
+import './index';

src/index-36.js

@@ -0,0 +1,2 @@
+import './row/editor-36.scss';
+import './index';

src/index-45.js

@@ -0,0 +1,2 @@
+import './row/editor-45.scss';
+import './index';

src/index-60.js

@@ -0,0 +1,2 @@
+import './row/editor-60.scss';
+import './index';

src/index-90.js

@@ -0,0 +1,2 @@
+import './row/editor-90.scss';
+import './index';

src/row/block.js

@@ -10,7 +10,6 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import edit from './edit';
 import transforms from './transforms';
 import { columns } from '../icons';
-import './editor.scss';
 import './style.scss';
 
 registerBlockType( 'wp-bootstrap-blocks/row', {

src/row/edit.js

@@ -27,7 +27,7 @@ import {
 	verticalAlignTop,
 } from '../icons';
 
-import { isBootstrap5Active, isCssGridEnabled } from '../helper';
+import {getGridColumns, isBootstrap5Active, isCssGridEnabled} from '../helper';
 
 export const CUSTOM_TEMPLATE_NAME = 'custom';
 
@@ -62,13 +62,13 @@ let templates = [
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 6,
+					sizeMd: Math.floor(getGridColumns() / 2),
 				},
 			],
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 6,
+					sizeMd: Math.floor(getGridColumns() / 2),
 				},
 			],
 		],
@@ -95,13 +95,13 @@ let templates = [
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 4,
+					sizeMd: (getGridColumns() / 3),
 				},
 			],
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 8,
+					sizeMd: (getGridColumns() / 3) * 2,
 				},
 			],
 		],
@@ -128,13 +128,13 @@ let templates = [
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 8,
+					sizeMd: (getGridColumns() / 3) * 2,
 				},
 			],
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 4,
+					sizeMd: (getGridColumns() / 3),
 				},
 			],
 		],
@@ -160,19 +160,19 @@ let templates = [
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 4,
+					sizeMd: (getGridColumns() / 3),
 				},
 			],
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 4,
+					sizeMd: (getGridColumns() / 3),
 				},
 			],
 			[
 				'wp-bootstrap-blocks/column',
 				{
-					sizeMd: 4,
+					sizeMd: (getGridColumns() / 3),
 				},
 			],
 		],

src/row/editor-12.scss

@@ -0,0 +1,2 @@
+$grid-columns: 12;
+@import "editor";

src/row/editor-18.scss

@@ -0,0 +1,2 @@
+$grid-columns: 18;
+@import "editor";

src/row/editor-24.scss

@@ -0,0 +1,2 @@
+$grid-columns: 24;
+@import "editor";

src/row/editor-36.scss

@@ -0,0 +1,2 @@
+$grid-columns: 36;
+@import "editor";

src/row/editor-45.scss

@@ -0,0 +1,2 @@
+$grid-columns: 45;
+@import "editor";

src/row/editor-60.scss

@@ -0,0 +1,2 @@
+$grid-columns: 60;
+@import "editor";

src/row/editor-90.scss

@@ -0,0 +1,2 @@
+$grid-columns: 90;
+@import "editor";

src/row/editor.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @import "../assets/gutenberg";
 
-@mixin make-grid-columns($current-size-index: 1, $sizes: ("xxl", "xl", "lg", "md", "sm", "xs"), $grid-columns: 12) {
+@mixin make-grid-columns($current-size-index: 1, $sizes: ("xxl", "xl", "lg", "md", "sm", "xs")) {
 	@if $current-size-index <= length($sizes) {
 		$size: nth($sizes, $current-size-index);