v1.0.0

.gitattributes

@@ -0,0 +1,7 @@
+.editorconfig export-ignore
+.git export-ignore
+.gitattributes export-ignore
+.github export-ignore
+.gitignore export-ignore
+.gitmodules export-ignore
+includes/plugin-update-checker/examples  export-ignore

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "includes/plugin-update-checker"]
+	path = includes/plugin-update-checker
+	url = https://github.com/YahnisElsts/plugin-update-checker

README.md

@@ -1 +1,95 @@
-# acf-json-field
+# ACF JSON Field
+
+ACF JSON Field is a Wordpress plugin adding a new ACF field to edit, save and output JSON data.
+
+## Installation
+
+- Download the [latest version on GitHub](https://github.com/misaki-web/acf-json-field/releases/latest/download/acf-json-field.zip).
+
+- Extract the archive and copy the folder (`acf-json-field`) to the Wordpress plugins folder (`/wp-content/plugins/`).
+
+- Go to the Wordpress plugins manager on your website (`/wp-admin/plugins.php`) and enable the plugin **ACF JSON Field**. Note that you can enable auto-updates.
+
+## Usage
+
+Go to the ACF administration page (`/wp-admin/edit.php?post_type=acf-field-group`), add a new field group and choose the field **JSON**. Change the field settings as needed.
+
+![JSON Field in the list of ACF fields](/assets/screenshots/json-field.png)
+
+When editing a page containing a JSON field, an editor will allow the user to edit the JSON data:
+
+![JSON editor](assets/screenshots/editor.png)
+
+### Utilities and shortcode
+
+The plugin provides a utility method to retrieve and format JSON data from a specified ACF field, as well as a shortcode to display this data on the front end.
+
+The `get_json_field` method can be called as follows:
+
+```php
+use \AcfJsonField\JsonUtils;
+
+// Retrieve the JSON data as a PHP type (array, boolean, etc.) for the current post
+$json_data = JsonUtils::get_json_field('field_name_or_key');
+$json_data = JsonUtils::get_json_field('field_name_or_key', null);
+$json_data = JsonUtils::get_json_field('field_name_or_key', 'null');
+$json_data = JsonUtils::get_json_field('field_name_or_key', false);
+$json_data = JsonUtils::get_json_field('field_name_or_key', 'false');
+
+// For a specific post ID
+$json_data = JsonUtils::get_json_field('field_name_or_key', 125);
+$json_data = JsonUtils::get_json_field('field_name_or_key', '125');
+
+// For the current user
+$json_data = JsonUtils::get_json_field('field_name_or_key', 'user');
+
+// For a specific user
+$json_data = JsonUtils::get_json_field('field_name_or_key', 'user_24');
+
+// Retrieve the JSON data as an HTML formatted string
+$json_html = JsonUtils::get_json_field('field_name_or_key', $id, 'html');
+```
+
+Or as follows:
+
+```php
+$json_data = \AcfJsonField\JsonUtils::get_json_field('field_name_or_key');
+```
+
+To display the field value on the front end, the shortcode `acf_json_field` can be used. This shortcode internally calls the `get_json_field` method with the `html` format. By default, it'll look at the current post where the shortcode is added:
+
+	[acf_json_field field="field_name_or_key"]
+
+To get the field value from another post, specify the `id`:
+
+	[acf_json_field field="field_name_or_key" id="125"]
+
+If the JSON field is linked to the current user, set the `id` to `user`:
+
+	[acf_json_field field="field_name_or_key" id="user"]
+
+To get the field value from another user, specify the user `id`:
+
+	[acf_json_field field="field_name_or_key" id="user_24"]
+
+## License
+
+ACF JSON Field: A Wordpress plugin adding a new ACF field to edit, save and output JSON data  
+Copyright (C) 2024  Misaki F.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+### Third-party code
+
+- ACF JSON Field uses [Plugin Update Checker](https://github.com/YahnisElsts/plugin-update-checker) under the [MIT License](https://github.com/YahnisElsts/plugin-update-checker/blob/master/license.txt) in order to manage auto-updates in the Wordpress plugins manager.

acf-json-field.php

@@ -0,0 +1,76 @@
+<?php
+
+/**
+ * Plugin Name: ACF JSON Field
+ * Description: A custom ACF field type for manipulating JSON data
+ * Text Domain: acf-json-field
+ * Author: Misaki F.
+ * Version: 1.0.0
+ */
+
+namespace AcfJsonField;
+
+if (!defined('ABSPATH')) {
+	return;
+}
+
+################################################################################
+# @title Constants
+################################################################################
+
+define('ACF_JSON_FIELD_VERSION', '1.0.0');
+
+################################################################################
+# @title Inclusions
+################################################################################
+
+require_once(__DIR__ . '/includes/init.php');
+
+################################################################################
+# @title Assets
+################################################################################
+
+########################################
+## @subtitle Backend
+########################################
+
+add_action('acf/input/admin_enqueue_scripts', function () {
+	$url_dir = plugin_dir_url(__FILE__);
+
+	wp_enqueue_style('acf-json-field-admin-css', $url_dir . 'assets/css/ajf-admin.css', [], ACF_JSON_FIELD_VERSION);
+
+	wp_enqueue_script('acf-json-field-admin-js', $url_dir . 'assets/js/ajf-admin.js', ['jquery', 'acf-input'], ACF_JSON_FIELD_VERSION, true);
+});
+
+add_filter('script_loader_tag', function ($tag, $handle, $src) {
+	if ($handle === 'acf-json-field-admin-js') {
+		$tag = '<script type="module" src="' . esc_url($src) . '"></script>';
+	}
+
+	return $tag;
+}, 10, 3);
+
+########################################
+## @subtitle Frontend
+########################################
+
+add_action('wp_enqueue_scripts', function () {
+	$url_dir = plugin_dir_url(__FILE__);
+
+	wp_enqueue_style('acf-json-field-css', $url_dir . 'assets/css/ajf.css', [], ACF_JSON_FIELD_VERSION);
+});
+
+################################################################################
+# @title Shortcode
+################################################################################
+
+# Render the shortcode "acf_json_field".
+add_shortcode('acf_json_field', function ($atts = []) {
+	$default_atts = [
+		'field' => '',
+		'id' => null,
+	];
+	$atts = shortcode_atts($default_atts, $atts);
+
+	return JsonUtils::get_json_field($atts['field'], $atts['id'], 'html');
+});

assets/css/ajf-admin.css

@@ -0,0 +1,19 @@
+.acf-json-field-data {
+	display: none;
+}
+
+.acf-json-field-editor {
+	width: 100%;
+	height: 400px;
+	margin-top: 15px;
+	margin-bottom: 15px;
+	border: 1px solid #ccc;
+}
+
+.acf-json-field-editor .jse-tag {
+	color: #000 !important;
+}
+
+.acf-json-field-editor .jse-context-menu-button {
+	padding: 5px 10px !important;
+}

assets/css/ajf.css

@@ -0,0 +1,28 @@
+.acf-json-field-output {
+	padding: 10px;
+	border: 1px solid #cccccc;
+	border-radius: 4px;
+	background-color: #f7f7f7;
+	font-size: 0.9em;
+	font-family: monospace;
+}
+
+.acf-json-field-boolean {
+	color: #ff08ff;
+}
+
+.acf-json-field-key {
+	color: #2c54ad;
+}
+
+.acf-json-field-null {
+	color: #ff08ff;
+}
+
+.acf-json-field-number {
+	color: #388858;
+}
+
+.acf-json-field-string {
+	color: #a32f77;
+}

assets/js/ajf-admin.js

@@ -0,0 +1,65 @@
+import { JSONEditor, toTextContent } from './vanilla-jsoneditor-standalone.js';
+
+function ajf_decode_html_entities(str) {
+	const textarea = document.createElement('textarea');
+	textarea.innerHTML = str;
+
+	return textarea.value;
+}
+
+function ajf_str_to_json_data(str) {
+	const json_data = {
+		error: '',
+		json: {}
+	};
+
+	if (!str.length) {
+		json_data.success = true;
+	} else {
+		try {
+			json_data.json = JSON.parse(str);
+			json_data.success = true;
+		} catch (e) {
+			json_data.json = {};
+			json_data.error = e;
+		}
+	}
+
+	return json_data;
+}
+
+jQuery(document).ready(function ($) {
+	$('.acf-json-field-data').each(function () {
+		const $textarea = $(this);
+		const textarea_id = $textarea.attr('id');
+		const $editor = $('#' + textarea_id + '-editor');
+
+		if ($editor.length) {
+			const textarea_value = ajf_decode_html_entities($textarea.val().trim());
+			const json_data = ajf_str_to_json_data(textarea_value);
+			const content = {
+				text: undefined,
+				json: json_data.json
+			};
+
+			if (json_data.error) {
+				const error_msg = `ACF JSON Field: Invalid JSON format in \`textarea#${textarea_id}\`.`;
+				console.error(error_msg, json_data.error, 'Parsed value: ' + textarea_value);
+				wp.data.dispatch('core/notices').createNotice('error', error_msg, { isDismissible: true });
+			}
+
+			const json_editor = new JSONEditor({
+				target: $editor[0],
+				props: {
+					content,
+					mode: $editor.attr('data-editor-mode'),
+					askToFormat: false,
+					onChange: (updated_content) => {
+						const updated_content_with_text = toTextContent(updated_content);
+						$textarea.val(updated_content_with_text.text);
+					}
+				}
+			});
+		}
+	});
+});