Zukit updated to version 1.4.9

zukit/CHANGES.md

@@ -1,3 +1,32 @@
+#### 1.4.9 / 2022-01-20
+
+##### Core
+* refactoring `AdminMenu` methods (*docs update required*)
+* implemented `keep_file` and `get_file` static methods to keep file paths
+* added `File` field to plugin/theme meta
+
+##### Components
+* refactoring `zukit_Table` class and `ZukitTable` component to support CSS Grid layout
+* added `ZukitToggle` component with simple markdown support
+* use `ZukitToggle` instead of `ToggleControl`
+
+##### Debug
+* added simple `__log` method - for debugging without any classes
+* added support for `Color Modifiers` in `info` method
+* disable __Zukit__ scripts caching with static `zukit_debug` method
+* removed `package.json` import (and `ver` getter) in `Debug` module
+
+##### Other
+* updated NPM package dependencies
+* logo experiments
+* improved CSS
+
+#### 1.4.8 / 2022-01-11
+
+* refactoring how __Zukit__ color palette can be extended
+* added key `extended_colors` in section `blocks` for config
+* added `getColorGetter` that creates custom color getter for plugin/theme
+
 #### 1.4.7 / 2022-01-09
 
 * added `get_full_filepath` scripts helper

zukit/load.php

@@ -13,6 +13,8 @@ class Zukit {
 			'min_wp'	=> '5.3.0',
 		);
 
+		private static $files = array();
+
 		// The constructor should always be private to prevent direct
 	    // construction calls with the `new` operator.
 		private function __construct() {}
@@ -83,6 +85,7 @@ public static function get_file_metadata($file) {
 
 			$meta = get_file_data($file, $default_headers, $is_theme ? 'theme' : 'plugin');
 			$meta['Kind'] = $is_theme ? 'Theme' : 'Plugin';
+			$meta['File'] = $cache_id;
 			$meta['URI'] = $is_theme ? $meta['ThemeURI'] : $meta['PluginURI'];
 			$meta['GitHubURI'] = $meta['GitHubURI'] ? $meta['GitHubURI'] : ($is_theme ? $meta['GitHubThemeURI'] : $meta['GitHubPluginURI']);
 			set_transient($cache_id, $meta, self::$cache_time);
@@ -146,6 +149,21 @@ public static function is_compatible($file, $params = []) {
 			}
 			return true;
 		}
+
+		public static function keep_file($file) {
+			self::$files[self::keypath($file)] = $file;
+		}
+
+		public static function get_file($key = null) {
+			return is_null($key) ? self::$files : self::$files[$key] ?? self::$files[self::keypath($key)] ?? null;
+		}
+
+		public static function keypath($file, $replace = '', $without = ['themes', 'plugins']) {
+			$dirname = pathinfo($file)['extension'] ? dirname($file) : $file;
+			$file_id = str_replace(WP_CONTENT_DIR, $replace, $dirname);
+			if(!empty($without)) $file_id = str_replace($without, '', $file_id);
+			return trim($file_id, '/');
+		}
 	}
 }
 

zukit/package.json

@@ -1,7 +1,7 @@
 {
     "name": "zukit",
-    "version": "1.4.7",
-    "testedWP": "5.8.2",
+    "version": "1.4.9",
+    "testedWP": "5.8.3",
     "requiresPHP": ">=7.2.0",
     "repository": {
         "type": "git",
@@ -19,15 +19,14 @@
     "license": "MIT",
     "scripts": {},
     "devDependencies": {
-        "@wordpress/eslint-plugin": "^7.2.1",
-        "eslint": "^7.24.0",
-        "eslint-plugin-react": "^7.23.2",
-        "eslint-plugin-react-hooks": "^4.1.2",
-        "replace-in-file": "^6.1.0",
-        "typescript": "^4.0.3"
+        "@wordpress/eslint-plugin": "^9.3.0",
+        "eslint": "^8.2.0",
+        "eslint-plugin-react": "^7.26.1",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "replace-in-file": "^6.3.2",
+        "typescript": "^4.5.2"
     },
     "dependencies": {
         "classnames": "^2.2.6"
-    },
-    "optionalDependencies": {}
+    }
 }

zukit/src/sass/components/_table.scss

@@ -9,23 +9,26 @@ $table-row-stripe-color: rgba($table-basic-color, 0.1);
 
 $table-basic-font-size: 14px;
 
-%row {
+%row_flex {
 	width: 100%;
 	display: flex;
 	flex-flow: row nowrap;
 }
 
 .#{$table-component-class} {
-	display: flex;
-	flex-flow: column nowrap;
 	font-size: $table-basic-font-size;
 	color: $table-basic-color;
 	margin: 0.5rem;
 	line-height: 1.5;
 	border: 1px solid $table-border-color;
-	flex: 1 1 auto;
 	transition: height $transition-time $transition-function;
 
+	&.css-flex {
+		display: flex;
+		flex-flow: column nowrap;
+		flex: 1 1 auto;
+	}
+
 	&.is-loading {
 		border: 1px dashed rgba($table-border-color, 0.3);
 		.body {
@@ -43,16 +46,17 @@ $table-basic-font-size: 14px;
 	}
 
 	.head {
-		@extend %row;
 		font-weight: 700;
 		background-color: $table-header-color;
 		white-space: normal;
-		justify-content: center;
 		border-bottom: 1px solid $table-header-border-color;
+		@include in('<.css-flex') {
+			@extend %row_flex;
+			justify-content: center;
+		}
 	}
 
 	.row {
-		@extend %row;
 		background-color: $table-row-color;
 		border-bottom: 1px solid $table-border-color;
 		&:nth-of-type(even) {  // :nth-of-type(odd)
@@ -61,21 +65,41 @@ $table-basic-font-size: 14px;
 		&:last-child {
 			border-bottom-width: 0;
 		}
+		@include in('<.css-flex') {
+			@extend %row_flex;
+		}
+	}
+
+	&.css-grid {
+		border-bottom-width: 0;
+		.head {
+			display: grid;
+			border-bottom-width: 2px;
+		}
+		.body {
+			display: grid;
+		}
+		.cell {
+			border-bottom: 1px solid $table-border-color;
+		}
 	}
 
 	.cell {
 		display: flex;
-		flex-flow: row nowrap;
-		flex-grow: 1;
-		flex-basis: 0;
-		align-self: center;
+		align-items: center;
 		padding: 0.5em;
 		word-break: break-word;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		min-width: 0px;
 		white-space: nowrap;
 
+		@include in('<.css-flex') {
+			flex-flow: row nowrap;
+			flex-grow: 1;
+			flex-basis: 0;
+		}
+
 		// align direct SVG icon
 		.block-editor-block-icon {
 			div {
@@ -94,34 +118,17 @@ $table-basic-font-size: 14px;
 		}
 
 		&.__zu_icon {
-			max-width: 60px;
+			@include in('<.css-flex') {
+				max-width: 60px;
+			}
 		}
 		&.__zu_strong {
 			font-weight: 700;
 		}
-		&.__zu_shrink, &.__zu_fixwidth {
-			flex-grow: 0;
-			flex-basis: auto;
-		}
-		&.__zu_fixwidth {
-			width: 10%;
-			// flex-grow: 0;
-			// flex-basis: auto;
-		}
-		&.__zu_markdown {
-			// margin: 0;
-			// font-size: $table-basic-font-size;
-			// font-style: normal;
-			// text-align: ;
-
-		}
 		&.__zu_link {
 			a {
 				text-decoration: none;
 			}
 		}
-		&.__zu_filler {
-			flex-grow: 3;
-		}
 	}
 }

zukit/src/sass/zukit.scss

@@ -110,17 +110,6 @@ $divider-component-class: zukit-divider;
 		}
 	}
 
-	.components-toggle-control {
-		.components-form-toggle {
-			opacity: 0.8;
-			&:not(.is-checked) {
-				.components-form-toggle__track {
-					border-color: rgba($wp-admin-blue-color, 0.8);
-				}
-			}
-		}
-	}
-
 	.__sidebyside {
 		width: 100%;
 		display: flex;
@@ -456,6 +445,27 @@ $divider-component-class: zukit-divider;
 
 		// Settings Common Rules ----------------------------------------------]
 
+		.zukit-toggle {
+			.components-form-toggle {
+				opacity: 0.8;
+				&:not(.is-checked) {
+					.components-form-toggle__track {
+						border-color: rgba($wp-admin-blue-color, 0.8);
+					}
+				}
+			}
+			.components-toggle-control__label {
+				.__code {
+					display: inline;
+					letter-spacing: normal;
+					margin: 0;
+					padding: 0 3px;
+					color: darken($wp-admin-blue-color, 10%);
+					background-color: rgba($wp-admin-blue-color, 0.05);
+				}
+			}
+		}
+
 		// flex blocks
 		.__flex {
 			display: flex;

zukit/src/scripts/components/divider.js

@@ -20,7 +20,10 @@ const ZukitDivider = ({
 
 	const sizeUnit = includes(unit, ['px', 'em', 'rem', '%']) ? unit : defaultUnit;
 	const sizeValue = toRange(size, 0, 100);
-	const style = sizeValue > 0 ? { marginBottom: `${bottomHalf ? sizeValue/2 : sizeValue}${sizeUnit}`, paddingTop: `${sizeValue}${sizeUnit}` } : null;
+	const style = sizeValue === 0 ? null : {
+		marginBottom: `${bottomHalf ? sizeValue/2 : sizeValue}${sizeUnit}`,
+		paddingTop: `${sizeValue}${sizeUnit}`
+	};
 
 	return (
 		<div

zukit/src/scripts/components/index.js

@@ -1,5 +1,6 @@
 // Components
 import ZukitDivider from './divider.js';
+import ZukitToggle from './toggle.js';
 import ZukitPanel from './panel.js';
 import ZukitSidebar from './sidebar.js';
 import ZukitSkeleton from './skeleton.js';
@@ -20,6 +21,7 @@ export {
     ZukitSidebar,
     ZukitPanel,
     ZukitDivider,
+    ZukitToggle,
     ZukitTable,
 
     ConditionalWrap,

zukit/src/scripts/components/sidebar.js

@@ -3,12 +3,13 @@
 const { get, map, isEmpty, isNil, omitBy, pickBy, some } = lodash;
 const { __ } = wp.i18n;
 const { useCallback } = wp.element;
-const { createSlotFill, PanelBody, PanelRow, Button, ExternalLink, ToggleControl, Spinner } = wp.components;
+const { createSlotFill, PanelBody, PanelRow, Button, ExternalLink, Spinner } = wp.components;
 
 // Internal dependencies
 
 import { mergeClasses, checkDependency, simpleMarkdown } from './../utils.js';
 import ZukitActionButton from './action-button.js';
+import ZukitToggle from './toggle.js';
 
 // Zukit Sidebar Component
 
@@ -127,7 +128,7 @@ const ZukitSidebar = ({
 			{ hasPanels &&
 				<PanelBody title={ __('Screen Options', 'zukit') } initialOpen={ false }>
 					{ map(panels, ({ label, value, help }, panelKey) =>
-						<ToggleControl
+						<ZukitToggle
 							key={ panelKey }
 							label={ label }
 							help={ help  }
@@ -140,7 +141,7 @@ const ZukitSidebar = ({
 			{ hasDebug &&
 				<PanelBody title={ getPanel({ type: 'title', id: debugSet }) } initialOpen={ false }>
 					{ map(debugOptions, ({ label, help }, key) =>
-						<ToggleControl
+						<ZukitToggle
 							key={ key }
 							label={ label }
 							help={ help  }