BenBroide

cd /your/instllation/path/wp-content/plugins

// Create custom plugin
wp scaffold plugin wp-create-react-app-concept --activate --skip-tests
cd wp-create-react-app-concept

// We need only react-plugin.php for our demo - deleting all other files  
ls | grep -v wp-create-react-app-concept.php | xargs rm

// Create React App

BenBroide

const {withSelect, withDispatch, useSelect} = wp.data
const { TextControl} = wp.components

const RepeaterControlHoc = ({field}) => {
    const {meta_key, label, show_in_rest} = field

    let arrayValues = useSelect(
        select => select('core/editor').getEditedPostAttribute('meta')?.[meta_key]
    );

BenBroide

<?php
function sgf_meta_fields() {
	$fields_array = apply_filters( 'sgf_register_fields', [] );
	foreach ( $fields_array as $field ) {
		// Ensure post type exists and field name is valid
		if ( ! $field['post_type'] || ! post_type_exists( $field['post_type'] ) || ! $field['meta_key'] || ! is_string( $field['meta_key'] ) ) {
			return;
		}

		// Using Null Coalesce Operator to set defaults

BenBroide

<?php
function sgf_load_scripts() {
	$dir = __DIR__;

	$script_asset_path = "$dir/build/index.asset.php";
	if ( ! file_exists( $script_asset_path ) ) {
		throw new Error(
			'You need to run `npm start` or `npm run build` for the "create-block/simple-guten-fields" block first.'
		);
	}

BenBroide

import {registerPlugin} from '@wordpress/plugins';
import {PluginDocumentSettingPanel} from '@wordpress/edit-post';
import TextFieldHoc from './TextControlHoc'
import SelectControlHoc from './SelectControlHoc'
import ColorPickerHoc from './ColorPickerHoc'
import MediaUploadHoc from './MediaUploadHoc'
import RepeaterControlHoc from './RepeaterControlHoc'

const controlsIndex =
	{

BenBroide

import TextField from "./TextControl";
import ColorPickerComponent from "./ColorPicker";
import SelectControlComponent from "./SelectControl";
import MediaUpload from "./MediaUpload";
import RepeaterControl from "./RepeaterControl";

const controlsIndex =
	{
		text: TextField,
		color: ColorPickerComponent,

BenBroide

const {withSelect, select, withDispatch, useSelect} = wp.data
const {TextControl} = wp.components

const ControlField = withSelect(
	(select, props) => {
		const {  label, meta_key} = props.field;
		const {row_index,property_key} = props
		const value = select('core/editor').getEditedPostAttribute('meta')[meta_key];
		const key = meta_key + row_index + property_key;

BenBroide

import controlsIndex from "./controlsIndex";
const {select, withDispatch, useSelect} = wp.data




const InnerControlComponent = props => {
	const {key, field, row_index, property_key, repeater_record_label} = props
	let ControlField = controlsIndex['text']
	let repeaterValues = select('core/editor').getEditedPostAttribute('meta')?.[props.meta_key]

BenBroide

import {MediaUpload, MediaUploadCheck} from '@wordpress/block-editor';

const {Button} = wp.components
const {dispatch, useSelect} = wp.data

const ALLOWED_MEDIA_TYPES = ['image'];

const ImagePlaceholder = () => (
	<div style={{
		width: '100%',

BenBroide

<?php
add_filter( 'sgf_register_fields', 'sgf_post_fields' );

// Register operator fields
function sgf_post_fields( $fields_array ) {
//Simple text field
	$fields_array[] = [
		'meta_key' => 'publisher',
	];