feat: local json

.gitattributes

@@ -15,3 +15,4 @@ composer.lock export-ignore
 package.json export-ignore
 pnpm-lock.yaml export-ignore
 webpack.config.js export-ignore
+tests export-ignore

.gitignore

@@ -3,3 +3,5 @@
 node_modules
 *.zip
 *.LICENSE.txt
+composer.lock
+.phpunit.cache

assets/css/list.css

@@ -7,15 +7,18 @@
 	width: 16px;
 	height: 16px;
 }
+
 .mbb-tooltip .dashicons {
 	font-size: 14px;
 	width: 16px;
 	height: 16px;
 	margin-top: 2px;
 }
+
 .tippy-tooltip {
 	text-align: left;
 }
+
 .column-shortcode input {
 	max-width: 100%;
 }
@@ -25,6 +28,7 @@
 	display: none;
 	padding: 50px 0;
 }
+
 .mbb-import-form p {
 	color: #555d66;
 	font-size: 18px;
@@ -33,10 +37,200 @@
 	padding: 0;
 	text-align: center;
 }
+
 .mbb-import-form form {
 	background: #fafafa;
 	border: 1px solid #e5e5e5;
 	padding: 30px;
 	margin: 30px auto;
 	max-width: 380px;
+}
+
+#mbb-diff-dialog {
+	width: 80%;
+	max-width: 800px;
+	border: 1px solid #ccd0d4;
+	border-radius: 4px;
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+	padding: 20px;
+	background: #fff;
+}
+
+#mbb-diff-dialog header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-bottom: 10px;
+	margin-bottom: 20px;
+}
+
+#mbb-diff-dialog header h2 {
+	margin: 0;
+	font-size: 1.5em;
+}
+
+#mbb-diff-dialog .mbb-diff-dialog-button-group {
+	width: 100%;
+	display: flex;
+	gap: 10px;
+	margin: 40px 0;
+}
+
+#mbb-diff-dialog .mbb-diff-dialog-button-group>div {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+#mbb-diff-dialog header button {
+	background: none;
+	border: none;
+	color: #0073aa;
+	cursor: pointer;
+}
+
+#mbb-diff-dialog header button:hover {
+	color: #005177;
+}
+
+.mbb-diff-dialog-content {
+	display: flex;
+	justify-content: space-between;
+	background: #fafafa;
+	border-radius: 10px;
+}
+
+.button-sync {
+	background: none;
+	color: #0073aa;
+	border: 1px solid #0073aa;
+	border-radius: 4px;
+	padding: 10px 20px;
+	cursor: pointer;
+	transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.button-sync:hover {
+	background: #0073aa;
+	color: #fff;
+}
+
+.button-sync:disabled {
+	background: none;
+	color: #0073aa;
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.sync-success-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	background: #D6F1DF;
+	color: #218358;
+	animation: fadeIn 0.5s ease-in-out;
+}
+
+.sync-error-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	background: #FFF7F8;
+	color: #CA244D;
+	animation: fadeIn 0.5s ease-in-out;
+}
+
+.no-changes-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	animation: fadeIn 0.5s ease-in-out;
+}
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+#mbb-diff-dialog {
+	max-height: 80vh;
+	overflow: hidden;
+}
+
+.mbb-diff-dialog-content {
+	max-height: 300px;
+	overflow: auto;
+}
+
+.mbb-diff-dialog-content>div {
+	width: 48%;
+}
+
+.mbb-diff-dialog-content h3 {
+	margin-top: 0;
+	font-size: 1.2em;
+}
+
+.mbb-diff-dialog-content pre {
+	background: #f6f7f7;
+	border: 1px solid #ccd0d4;
+	border-radius: 4px;
+	padding: 10px;
+	overflow-x: auto;
+	max-height: 300px;
+}
+
+#mbb-diff-dialog footer {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 10px;
+	margin-top: 20px;
+}
+
+#mbb-diff-dialog footer button {
+	margin-left: 10px;
+}
+
+#mbb-diff-dialog-close {
+	font-size: 2em;
+	text-decoration: none;
+}
+
+.mbb-label {
+	padding: 4px 8px;
+	border-radius: 5px;
+	display: inline-block;
+}
+
+.mbb-sub-path {
+	color: #999;
+}
+
+.mbb-label[data-status="synced"] {
+	background: #D6F1DF;
+	color: #218358;
+}
+
+.mbb-label[data-status="changes_detected"] {
+	background: #FFDFB5;
+	color: #CC4E00;
+}
+
+.mbb-label[data-status="error"] {
+	background: #FFF7F8;
+	color: #CA244D;
+}
+
+.mbb-label[data-status="not_imported"] {
+	background: #F0F0F0;
+	color: #646464;
 }

assets/js/list.js

@@ -1,4 +1,4 @@
-jQuery( function ( $ ) {
+jQuery( $ => {
 	// Add "Export" option to the Bulk Actions dropdowns.
 	$( '<option value="mbb-export">' )
 		.text( MBB.export )
@@ -10,16 +10,94 @@ jQuery( function ( $ ) {
 		.text( MBB.import )
 		.insertAfter( '.page-title-action' );
 
-	$toggle.on( 'click', function( e ) {
+	$toggle.on( 'click', e => {
 		e.preventDefault();
 		$form.toggle();
 	} );
 
 	// Enable submit button when selecting a file.
-	var $input = $form.find( 'input[type="file"]' ),
+	const $input = $form.find( 'input[type="file"]' ),
 		$submit = $form.find( 'input[type="submit"]' );
 
-	$input.on( 'change', function() {
+	$input.on( 'change', () => {
 		$submit.prop( 'disabled', ! $input.val() );
 	} );
+
+	// Dialog for diff
+	document.getElementById( 'mbb-diff-dialog-close' ).addEventListener( 'click', () => {
+		document.getElementById( 'mbb-diff-dialog' ).close();
+	} );
+	document.getElementById( 'mbb-diff-dialog-close-btn' ).addEventListener( 'click', () => {
+		document.getElementById( 'mbb-diff-dialog' ).close();
+	} );
+
+	// Escape key to close dialog
+	document.addEventListener( 'keydown', ( e ) => {
+		if ( e.key === 'Escape' ) {
+			document.getElementById( 'mbb-diff-dialog' ).close();
+		}
+	} );
+
+	// Click outside to close dialog
+	document.getElementById( 'mbb-diff-dialog' ).addEventListener( 'click', ( e ) => {
+		if ( e.target === document.getElementById( 'mbb-diff-dialog' ) ) {
+			document.getElementById( 'mbb-diff-dialog' ).close();
+		}
+	} );
+
+	// AJAX action to run sync
+	document.querySelectorAll( '.button-sync' ).forEach( buttonSync => {
+		buttonSync.addEventListener( 'click', async (e) => {
+			e.preventDefault();
+			const previousText = buttonSync.textContent;
+
+			// Set the button to loading state
+			buttonSync.classList.add( 'loading' );
+			buttonSync.disabled = true;
+			buttonSync.textContent = MBB.syncing;
+
+			const data = await wp.apiFetch( { 
+				path: '/mbb/set-json-data',
+				method: 'PUT',
+				data: {
+					id: buttonSync.dataset.id,
+					use: buttonSync.dataset.use,
+				}
+			} );
+
+			if ( data.success ) {
+				const templateSyncSuccess = document.querySelector('#sync-success').content.cloneNode(true);
+
+				// Update the diff section
+				document.querySelector('.mbb-diff-dialog-content').innerHTML = templateSyncSuccess.querySelector('div').innerHTML;
+
+				// Update status of current row sync to synced
+				const label = document.querySelector(`.mbb-label[data-for-id="${buttonSync.dataset.id}"]`);
+				label.textContent = MBB.synced;
+				label.dataset.status = 'synced';
+			} else {
+				const templateSyncError = document.querySelector('#sync-error').content.cloneNode(true);
+
+				// Update the diff section
+				document.querySelector('.mbb-diff-dialog-content').innerHTML = templateSyncError.querySelector('div').innerHTML;
+				// Update status of current row sync to error
+				const label = document.querySelector(`.mbb-label[data-for-id="${buttonSync.dataset.id}"]`);
+				label.textContent = MBB.error;
+				label.dataset.status = 'error';
+			}
+
+			// Run the sync
+
+			// Reset the button
+			buttonSync.classList.remove( 'loading' );
+			buttonSync.disabled = false;
+			buttonSync.textContent = previousText;
+
+			// Refresh in 1 seconds
+			setTimeout(() => {
+				location.reload();
+			}, 1000);
+		} );
+	} );
+
 } );

bootstrap.php

@@ -45,6 +45,7 @@
 	new About();
 	new Import();
 	new Export();
+	new LocalJson();
 	new Edit( 'meta-box', __( 'Field Group ID', 'meta-box-builder' ) );
 	new AdminColumns();
 }

composer.json

@@ -31,6 +31,9 @@
 		"meta-box/mbb-parser": "dev-master",
 		"elightup/twig": "dev-master"
 	},
+	"require-dev": {
+		"phpunit/phpunit": "^11.3"
+	},
 	"scripts": {
 		"post-update-cmd": [
 			"echo Deleting .git dirs...",
@@ -90,4 +93,4 @@
 			]
 		}
 	}
-}
+}