From 267f76166e22601af997ac1773ba6bb8bdf3af6b Mon Sep 17 00:00:00 2001 From: Leonardo Lopes de Albuquerque Date: Fri, 31 Mar 2023 15:59:12 -0300 Subject: [PATCH 1/2] added custom fields on section settings --- .../checkout/form-step/custom-fields.tsx | 60 +++++++++++++++++++ .../checkout/form-step/form-step-block.tsx | 8 ++- 2 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 assets/js/blocks/checkout/form-step/custom-fields.tsx diff --git a/assets/js/blocks/checkout/form-step/custom-fields.tsx b/assets/js/blocks/checkout/form-step/custom-fields.tsx new file mode 100644 index 00000000000..7538a37940c --- /dev/null +++ b/assets/js/blocks/checkout/form-step/custom-fields.tsx @@ -0,0 +1,60 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { InspectorControls } from '@wordpress/block-editor'; +import { Button, PanelBody, TextControl } from '@wordpress/components'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +export interface FormStepBlockProps { + attributes: { title: string; description: string; showStepNumber: boolean }; + setAttributes: ( attributes: Record< string, unknown > ) => void; + className?: string; + children?: React.ReactNode; + lock?: { move: boolean; remove: boolean }; +} + +/** + * Custom Fields list for use in the editor. + */ +export const CustomFields = (): JSX.Element => { + const [ fields, setFields ] = useState( [] ); + + const addField = () => { + setFields( [ ...fields, { name: 'test-field' } ] ); + }; + + return ( + + + { fields.map( ( field, index ) => ( + void 0 } + /> + ) ) } + +

+ { __( 'Test.', 'woo-gutenberg-products-block' ) } +

+ + + ); +}; diff --git a/assets/js/blocks/checkout/form-step/form-step-block.tsx b/assets/js/blocks/checkout/form-step/form-step-block.tsx index d20d806df96..e3139d60a47 100644 --- a/assets/js/blocks/checkout/form-step/form-step-block.tsx +++ b/assets/js/blocks/checkout/form-step/form-step-block.tsx @@ -14,6 +14,7 @@ import { PanelBody, ToggleControl } from '@wordpress/components'; * Internal dependencies */ import FormStepHeading from './form-step-heading'; +import { CustomFields } from './custom-fields'; export interface FormStepBlockProps { attributes: { title: string; description: string; showStepNumber: boolean }; setAttributes: ( attributes: Record< string, unknown > ) => void; @@ -53,11 +54,11 @@ export const FormStepBlock = ( { 'woo-gutenberg-products-block' ) } checked={ showStepNumber } - onChange={ () => + onChange={ () => { setAttributes( { showStepNumber: ! showStepNumber, - } ) - } + } ); + } } /> @@ -69,6 +70,7 @@ export const FormStepBlock = ( { style={ { backgroundColor: 'transparent' } } /> +

Date: Tue, 4 Apr 2023 15:51:11 -0300 Subject: [PATCH 2/2] the fields can be stored and loaded now --- .../checkout/form-step/custom-fields.tsx | 14 +++- woocommerce-gutenberg-products-block.php | 82 +++++++++++++++++++ 2 files changed, 92 insertions(+), 4 deletions(-) diff --git a/assets/js/blocks/checkout/form-step/custom-fields.tsx b/assets/js/blocks/checkout/form-step/custom-fields.tsx index 7538a37940c..eaac1285874 100644 --- a/assets/js/blocks/checkout/form-step/custom-fields.tsx +++ b/assets/js/blocks/checkout/form-step/custom-fields.tsx @@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; import { Button, PanelBody, TextControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; +import { useEffect } from 'react'; +const { dispatch } = wp.data; /** * Internal dependencies @@ -21,12 +23,19 @@ export interface FormStepBlockProps { * Custom Fields list for use in the editor. */ export const CustomFields = (): JSX.Element => { - const [ fields, setFields ] = useState( [] ); + const post = wp.data.select( 'core/editor' ).getCurrentPost(); + const [ fields, setFields ] = useState( post.checkout_custom_fields ); const addField = () => { setFields( [ ...fields, { name: 'test-field' } ] ); }; + useEffect( () => { + dispatch( 'core/editor' ).editPost( { + checkout_custom_fields: fields, + } ); + }, [ fields ] ); + return ( <InspectorControls> <PanelBody @@ -51,9 +60,6 @@ export const CustomFields = (): JSX.Element => { > { __( 'Add Custom Field', 'woo-gutenberg-products-block' ) } </Button> - <p className="wc-block-checkout__controls-text"> - { __( 'Test.', 'woo-gutenberg-products-block' ) } - </p> </PanelBody> </InspectorControls> ); diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php index 1dcbb065f16..0e34436b518 100644 --- a/woocommerce-gutenberg-products-block.php +++ b/woocommerce-gutenberg-products-block.php @@ -318,3 +318,85 @@ function woocommerce_blocks_interactivity_setup() { } } add_action( 'plugins_loaded', 'woocommerce_blocks_interactivity_setup' ); + + +add_action( 'rest_api_init', 'add_checkout_custom_fields' ); + +/** + * Adds custom checkout fields to the checkout page rest api. + */ +function add_checkout_custom_fields() { + // Field name to register. + $field = 'checkout_custom_fields'; + register_rest_field( + 'page', + $field, + array( + 'get_callback' => function ( $object ) use ( $field ) { + // Get field as single value from post meta. + return get_option( $field, [] ); + }, + 'update_callback' => function ( $value, $object ) use ( $field ) { + // Update the field/meta value. + update_option( $field, $value ); + }, + 'schema' => array( + 'type' => 'object', + 'properties' => array( + 'billing' => array( + 'type' => 'array', + 'elements' => array( + 'type' => 'object', + 'properties' => array( + 'id' => 'integer', + 'label' => 'string', + 'required' => 'boolean', + 'type' => 'string', + 'size' => 'string', //half|full + // 'priority' => 'integer', + ), + ), + ), + 'shipping' => array( + 'type' => 'array', + 'elements' => array( + 'type' => 'object', + 'properties' => array( + 'id' => 'integer', + 'label' => 'string', + 'required' => 'boolean', + 'type' => 'string', + 'size' => 'string', //half|full + // 'priority' => 'integer', + ), + ), + ), + 'additional' => array( + 'type' => 'array', + 'elements' => array( + 'type' => 'object', + 'properties' => array( + 'id' => 'integer', + 'label' => 'string', + 'required' => 'boolean', + 'type' => 'string', + 'size' => 'string', //half|full + // 'priority' => 'integer', + ), + ), + ), + ), + // 'arg_options' => array( + // 'sanitize_callback' => function ( $value ) { + // // Make the value safe for storage. + // return sanitize_text_field( $value ); + // }, + // 'validate_callback' => function ( $value ) { + // // Valid if it contains exactly 10 English letters. + // return (bool) preg_match( '/\A[a-z]{10}\Z/', $value ); + // }, + // ), + ), + ) + ); +} \ No newline at end of file