Update NPM packages and migrate SCSS from import to use

pods-framework · Nov 17, 2024 · ffba468 · ffba468
1 parent f5884cd
commit ffba468
Show file tree

Hide file tree

Showing 26 changed files with 4,102 additions and 4,949 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/register": "^7.17.7",
     "@testing-library/react": "^16.0.0",
-    "@wordpress/api-fetch": "^7.0.1",
+    "@wordpress/api-fetch": "^7.12.0",
     "@wordpress/block-editor": "^13.0.5",
     "@wordpress/commands": "^1.0.3",
     "@wordpress/components": "^28.0.3",

diff --git a/ui/js/blocks/pods-blocks-api.min.asset.json b/ui/js/blocks/pods-blocks-api.min.asset.json
@@ -1 +1 @@
-{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"74e7329c36abb1a485a0"}
+{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"455167998375a626b9ff"}
diff --git a/ui/js/blocks/pods-blocks-api.min.js b/ui/js/blocks/pods-blocks-api.min.js
diff --git a/ui/js/dfv/pods-dfv.min.asset.json b/ui/js/dfv/pods-dfv.min.asset.json
@@ -1 +1 @@
-{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"f5278a8442b50f54216e"}
+{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"dd84d0041bdc63544d60"}
diff --git a/ui/js/dfv/pods-dfv.min.js b/ui/js/dfv/pods-dfv.min.js
diff --git a/ui/js/dfv/src/admin/edit-pod/edit-pod.scss b/ui/js/dfv/src/admin/edit-pod/edit-pod.scss
@@ -1,8 +1,8 @@
-@import './edit-pod-variables';
+@use 'edit-pod-variables';
 
 #misc-publishing-actions {
 	svg.dashicon {
-		color: $color--grey;
+		color: edit-pod-variables.$color--grey;
 		vertical-align: middle;
 		margin-right: 0.25em;
 	}
@@ -11,7 +11,7 @@
 #major-publishing-actions {
 	.editor-post-trash {
 		margin-left: 0;
-		color: $color--red;
+		color: edit-pod-variables.$color--red;
 	}
 }
 

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/active-tab-content.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/active-tab-content.scss
@@ -1,4 +1,4 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .pods-edit-pod-manage-field {
 	zoom: 1;

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-group.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-group.scss
@@ -1,8 +1,8 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .pods-field-group-wrapper {
 	margin-bottom: 10px;
-	border: 1px solid $color--light-grey;
+	border: 1px solid edit-pod-variables.$color--light-grey;
 	background-color: #fff;
 	transition: border 0.2s ease-in-out, opacity 0.5s ease-in-out;
 
@@ -11,11 +11,11 @@
 	}
 
 	> [role="button"]:focus-visible {
-		outline: 1px solid $color--wp-blue-light;
+		outline: 1px solid edit-pod-variables.$color--wp-blue-light;
 	}
 
 	.pods-field-group_handle:focus-visible span {
-		outline: 1px solid $color--wp-blue-light;
+		outline: 1px solid edit-pod-variables.$color--wp-blue-light;
 	}
 }
 
@@ -29,11 +29,11 @@
 }
 
 .pods-field-group-wrapper--errored  {
-	border-left: 5px $color--red solid;
+	border-left: 5px edit-pod-variables.$color--red solid;
 }
 
 .pods-field-group_name__error {
-	color: $color--red;
+	color: edit-pod-variables.$color--red;
 	display: inline-block;
 	padding-left: 0.5em;
 }
@@ -51,7 +51,7 @@
 }
 
 .pods-field-group_buttons {
-	color: $color--light-grey;
+	color: edit-pod-variables.$color--light-grey;
 	opacity: 0;
 
 	.pods-field-group-wrapper:hover & {
@@ -62,7 +62,7 @@
 .pods-field-group_button {
 	background: transparent;
 	border: none;
-	color: $color--wp-blue;
+	color: edit-pod-variables.$color--wp-blue;
 	cursor: pointer;
 	height: auto;
 	margin: 0.25em 0;
@@ -72,7 +72,7 @@
 
 	&:hover,
 	&:focus {
-		color: $color--wp-blue-light;
+		color: edit-pod-variables.$color--wp-blue-light;
 	}
 }
 
@@ -87,10 +87,10 @@
 }
 
 .pods-field-group_delete {
-    color: $color--red;
+    color: edit-pod-variables.$color--red;
 
     &:hover,
     &:hover:not(:disabled) {
-        color: $color--red-dark;
+        color: edit-pod-variables.$color--red-dark;
     }
 }
diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-groups.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-groups.scss
@@ -1,4 +1,4 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .opacity-ghost {
 	transition: all .8s ease;
@@ -44,7 +44,7 @@
 
 .pods-button-group_add-new {
 	text-align: center;
-	border: 2px dashed $color--light-grey;
+	border: 2px dashed edit-pod-variables.$color--light-grey;
 	background: none;
 	width: 100%;
 	padding: .7em 1em;
@@ -53,7 +53,7 @@
 
 .pods-button-group_add-new:focus,
 .pods-button-group_add-new:hover {
-	background-color: $color--light-grey;
+	background-color: edit-pod-variables.$color--light-grey;
 	cursor: pointer;
 }
 

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss
@@ -1,16 +1,16 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .pods-field_outer-wrapper {
 	background: white;
 
 	&:nth-child(odd) {
-		background-color: $color--zebra-grey;
+		background-color: edit-pod-variables.$color--zebra-grey;
 		transition: 200ms ease background-color;
 	}
 }
 
 .pods-field_wrapper--dragging {
-	background: $color--super-light-grey;
+	background: edit-pod-variables.$color--super-light-grey;
 
 	.pods-field_wrapper .pods-field_controls-container {
 		opacity: 0;
@@ -54,7 +54,7 @@
 }
 
 .pods-field_wrapper--errored {
-	border-left: 5px $color--red solid;
+	border-left: 5px edit-pod-variables.$color--red solid;
 }
 
 .pods-field_handle {
@@ -222,7 +222,7 @@
 }
 
 .pods-field_wrapper-items {
-	border: 1px solid $color--light-grey;
+	border: 1px solid edit-pod-variables.$color--light-grey;
 	margin: 1em 0;
 
 	@media screen and (max-width: 850px) {
@@ -232,19 +232,19 @@
 }
 
 .pods-field_wrapper:nth-child(even) {
-	background-color: $color--super-light-grey;
+	background-color: edit-pod-variables.$color--super-light-grey;
 }
 
 .pods-field_controls-container {
-	color: $color--light-grey;
+	color: edit-pod-variables.$color--light-grey;
 	margin-left: -0.5em;
 	padding-top: 0.25em;
 }
 
 .pods-field_button {
 	background: transparent;
 	border: none;
-	color: $color--wp-blue;
+	color: edit-pod-variables.$color--wp-blue;
 	cursor: pointer;
 	font-size: 0.95em;
 	height: auto;
@@ -253,15 +253,15 @@
 
 	&:hover,
 	&:focus {
-		color: $color--wp-blue-light;
+		color: edit-pod-variables.$color--wp-blue-light;
 	}
 }
 
 .pods-field_button.pods-field_delete {
-	color: $color--red;
+	color: edit-pod-variables.$color--red;
 
 	&:hover {
-		color: $color--red-dark;
+		color: edit-pod-variables.$color--red-dark;
 	}
 
 	&::after {

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss
@@ -1,4 +1,4 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .pods-field_controls-container {
 	opacity: 0;
@@ -20,7 +20,7 @@
 }
 
 .pods-field-list__empty--dropping {
-	background: $color--light-grey;
+	background: edit-pod-variables.$color--light-grey;
 }
 
 .pods-field-list__empty-message {

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss
@@ -1,4 +1,4 @@
-@import '../edit-pod-variables';
+@use '../edit-pod-variables';
 
 .components-modal__frame.pods-settings-modal {
 	height: 80vh;
@@ -45,7 +45,7 @@
     width: 100%;
 
 	@media screen and (min-width: 851px) {
-		border-top: 1px solid $color--super-light-grey;
+		border-top: 1px solid edit-pod-variables.$color--super-light-grey;
 		padding-top: 12px;
 		margin-left: -24px;
 		margin-right: -24px;
@@ -70,7 +70,7 @@
 	min-width: 200px;
 
 	@media screen and (min-width: 851px) {
-        border-right: 1px solid $color--super-light-grey;
+        border-right: 1px solid edit-pod-variables.$color--super-light-grey;
 		flex-flow: column nowrap;
         margin-bottom: 0;
         margin-right: 2em;
@@ -98,17 +98,17 @@
 	}
 
 	&:focus {
-		outline: 1px solid $color--wp-blue;
+		outline: 1px solid edit-pod-variables.$color--wp-blue;
 		outline-offset: -1px;
 	}
 
     &.pods-settings-modal__tab-item--active {
-        color: $color--wp-blue;
-        border-bottom: 5px solid $color--wp-blue;
+        color: edit-pod-variables.$color--wp-blue;
+        border-bottom: 5px solid edit-pod-variables.$color--wp-blue;
 
 		@media screen and (min-width: 851px) {
 			border-bottom: none;
-			border-right: 5px solid $color--wp-blue;
+			border-right: 5px solid edit-pod-variables.$color--wp-blue;
 		}
     }
 }
@@ -129,8 +129,8 @@
 }
 
 .pod-field-group_settings-error-message {
-	border: 1px solid $color--light-grey;
-	border-left: 4px solid $color--red;
+	border: 1px solid edit-pod-variables.$color--light-grey;
+	border-left: 4px solid edit-pod-variables.$color--red;
     margin: -12px 0 12px;
 	padding: 12px;
 	position: relative;
@@ -166,7 +166,7 @@
 	.pods-settings-modal__tabs {
 		@media screen and (min-width: 851px) {
 			border-right: 0;
-			border-left: 1px solid $color--super-light-grey;
+			border-left: 1px solid edit-pod-variables.$color--super-light-grey;
 			margin-right: 0;
 			margin-left: 2em;
 		}

diff --git a/ui/js/dfv/src/components/help-tooltip.scss b/ui/js/dfv/src/components/help-tooltip.scss
@@ -1,10 +1,10 @@
-@import '../admin/edit-pod/edit-pod-variables';
+@use '../admin/edit-pod/edit-pod-variables';
 
 .pods-help-tooltip__icon {
 	cursor: pointer;
 
 	&:focus {
-		outline: 1px solid $color--wp-blue;
+		outline: 1px solid edit-pod-variables.$color--wp-blue;
 		outline-offset: 1px;
 	}
 

diff --git a/ui/styles/src/base/_admin.scss b/ui/styles/src/base/_admin.scss
@@ -1,3 +1,5 @@
+@use "../helpers/asset-paths";
+
 .toplevel_page_pods #wpcontent {
 	background: #f1f1f1;
 }
@@ -26,7 +28,7 @@
 }
 
 .icon32#icon-pods {
-	background: url(#{$ImagesPath}/icon32.png) no-repeat;
+	background: url(#{asset-paths.$ImagesPath}/icon32.png) no-repeat;
 }
 
 .pods-admin .waiting {

diff --git a/ui/styles/src/base/_advanced.scss b/ui/styles/src/base/_advanced.scss
@@ -1,3 +1,5 @@
+@use "../helpers/asset-paths";
+
 .dialogWithDropShadow {
 	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -16,11 +18,11 @@
 }
 
 .pods-parts-icon-edit {
-	background: url(#{$ImagesPath}/page_white_edit.png) left center no-repeat;
+	background: url(#{asset-paths.$ImagesPath}/page_white_edit.png) left center no-repeat;
 }
 
 .pods-parts-icon-add {
-	background: url(#{$ImagesPath}/bullet_add.png) left center no-repeat;
+	background: url(#{asset-paths.$ImagesPath}/bullet_add.png) left center no-repeat;
 }
 
 #pods-parts-left {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"74e7329c36abb1a485a0"}
		{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"455167998375a626b9ff"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"f5278a8442b50f54216e"}
		{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"dd84d0041bdc63544d60"}