Skip to content

Commit 63b04b6

Browse files
bacoordsbacoords
authored
Updates meta keys and fields to use a more consistent UUID (#70)
* passes uuid back to edit original key * fixes wrong slug attribute reference * remove __content suffix from content attribute binding * shows block attributes in fields UI * removes console output * treat content attribute singularly and don't suffix * show content option on all blocks * updates block fields to use __content attribute * still remove extra attribute for post_content * remove bindings on delete * removes delete from fields ui
1 parent 73d19bf commit 63b04b6

6 files changed

+165
-106
lines changed

‎includes/manager/_edit-field.js

+118-51
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,25 @@ import {
77
__experimentalGrid as Grid,
88
CardBody,
99
Card,
10+
__experimentalItemGroup as ItemGroup,
11+
__experimentalItem as Item,
12+
Flex,
13+
FlexBlock,
14+
FlexItem,
1015
} from '@wordpress/components';
1116
import { __ } from '@wordpress/i18n';
12-
import { useEntityProp } from '@wordpress/core-data';
1317
import { useState } from '@wordpress/element';
14-
import { trash, chevronUp, chevronDown } from '@wordpress/icons';
18+
import {
19+
trash,
20+
chevronUp,
21+
chevronDown,
22+
blockDefault,
23+
post,
24+
} from '@wordpress/icons';
1525
import { useEffect } from '@wordpress/element';
1626

27+
import SUPPORTED_BLOCK_ATTRIBUTES from './_supported-attributes';
28+
1729
/**
1830
* Display a form to edit a field.
1931
* @param {Object} props
@@ -51,6 +63,18 @@ const EditFieldForm = ( {
5163
marginBottom: '1rem',
5264
} }
5365
>
66+
{ formData.type.indexOf( 'core/' ) === -1 ? (
67+
<Button icon={ post } title={ formData.type }>
68+
{ __( 'Custom Field' ) }
69+
</Button>
70+
) : (
71+
<Button
72+
icon={ blockDefault }
73+
title={ formData.type }
74+
>
75+
{ __( 'Block Binding' ) }
76+
</Button>
77+
) }
5478
{ index > 0 && (
5579
<Button
5680
icon={ chevronUp }
@@ -69,17 +93,19 @@ const EditFieldForm = ( {
6993
} }
7094
/>
7195
) }
72-
<Button
73-
icon={ trash }
74-
title={ __( 'Delete Field' ) }
75-
onClick={ () => {
76-
confirm(
77-
__(
78-
'Are you sure you want to delete this field?'
79-
)
80-
) && onDelete( formData );
81-
} }
82-
/>
96+
{ formData.type.indexOf( 'core/' ) === -1 ?? (
97+
<Button
98+
icon={ trash }
99+
title={ __( 'Delete Field' ) }
100+
onClick={ () => {
101+
confirm(
102+
__(
103+
'Are you sure you want to delete this field?'
104+
)
105+
) && onDelete( formData );
106+
} }
107+
/>
108+
) }
83109
</ButtonGroup>
84110

85111
<Grid columns={ 3 }>
@@ -97,35 +123,6 @@ const EditFieldForm = ( {
97123
setFormData( { ...formData, slug: value } )
98124
}
99125
/>
100-
<SelectControl
101-
label={ __( 'Type' ) }
102-
value={ formData.type }
103-
disabled={ formData.type.indexOf( 'core/' ) === 0 }
104-
options={ [
105-
{ label: __( 'Text' ), value: 'text' },
106-
{ label: __( 'Textarea' ), value: 'textarea' },
107-
{ label: __( 'URL' ), value: 'url' },
108-
{ label: __( 'Image' ), value: 'image' },
109-
{ label: __( 'Number' ), value: 'number' },
110-
{
111-
label: __( 'Image Block' ),
112-
value: 'core/image',
113-
},
114-
{
115-
label: __( 'Button Block' ),
116-
value: 'core/button',
117-
},
118-
{
119-
label: __( 'Group Block' ),
120-
value: 'core/group',
121-
},
122-
] }
123-
onChange={ ( value ) =>
124-
setFormData( { ...formData, type: value } )
125-
}
126-
/>
127-
</Grid>
128-
<Grid columns={ 2 } alignment="bottom">
129126
<TextControl
130127
label={ __( 'Description (optional)' ) }
131128
value={ formData.description }
@@ -136,20 +133,90 @@ const EditFieldForm = ( {
136133
} )
137134
}
138135
/>
139-
140-
<ToggleControl
141-
label={ __( 'Show Field in Custom Fields Form' ) }
142-
checked={ formData.visible ?? false }
143-
disabled={ formData.type.indexOf( 'core/' ) === 0 }
144-
onChange={ ( value ) =>
145-
setFormData( { ...formData, visible: value } )
146-
}
147-
/>
148136
</Grid>
137+
{ formData.type.indexOf( 'core/' ) === -1 && (
138+
<Grid columns={ 2 } alignment="bottom">
139+
<SelectControl
140+
label={ __( 'Type' ) }
141+
value={ formData.type }
142+
disabled={
143+
formData.type.indexOf( 'core/' ) === 0
144+
}
145+
options={ [
146+
{ label: __( 'Text' ), value: 'text' },
147+
{
148+
label: __( 'Textarea' ),
149+
value: 'textarea',
150+
},
151+
{ label: __( 'URL' ), value: 'url' },
152+
{ label: __( 'Image' ), value: 'image' },
153+
{ label: __( 'Number' ), value: 'number' },
154+
] }
155+
onChange={ ( value ) =>
156+
setFormData( { ...formData, type: value } )
157+
}
158+
/>
159+
<ToggleControl
160+
label={ __(
161+
'Show Field in Custom Fields Form'
162+
) }
163+
checked={ formData.visible ?? false }
164+
onChange={ ( value ) =>
165+
setFormData( {
166+
...formData,
167+
visible: value,
168+
} )
169+
}
170+
/>
171+
</Grid>
172+
) }
173+
{ formData.type.indexOf( 'core/' ) === 0 ? (
174+
<BlockAttributes
175+
slug={ formData.slug }
176+
type={ formData.type }
177+
/>
178+
) : (
179+
<ItemGroup isBordered isSeparated>
180+
<Item>
181+
<Flex>
182+
<FlexBlock>{ formData.type }</FlexBlock>
183+
<FlexItem>
184+
<span>
185+
<code>{ formData.slug }</code>
186+
</span>
187+
</FlexItem>
188+
</Flex>
189+
</Item>
190+
</ItemGroup>
191+
) }
149192
</CardBody>
150193
</Card>
151194
</>
152195
);
153196
};
154197

198+
const BlockAttributes = ( { slug, type } ) => {
199+
const supportedAttributes = SUPPORTED_BLOCK_ATTRIBUTES[ type ];
200+
return (
201+
<ItemGroup isBordered isSeparated>
202+
{ supportedAttributes.map( ( attribute ) => (
203+
<Item key={ attribute }>
204+
<Flex>
205+
<FlexBlock>{ attribute }</FlexBlock>
206+
<FlexItem>
207+
<span>
208+
{ 'post_content' === slug ? (
209+
<code>{ slug }</code>
210+
) : (
211+
<code>{ `${ slug }__${ attribute }` }</code>
212+
) }
213+
</span>
214+
</FlexItem>
215+
</Flex>
216+
</Item>
217+
) ) }
218+
</ItemGroup>
219+
);
220+
};
221+
155222
export default EditFieldForm;

‎includes/manager/_manage-bindings.js

+2-12
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ const ManageBindings = ( {
2323
} ) => {
2424
const [ formData, setFormData ] = useState( defaultFormData );
2525
const [ isValid, setIsValid ] = useState( false );
26-
const [ originalSlug, setOriginalSlug ] = useState( defaultFormData.slug );
2726

2827
const [ meta, setMeta ] = useEntityProp(
2928
'postType',
@@ -37,19 +36,10 @@ const ManageBindings = ( {
3736
e.preventDefault();
3837
let newFields = fields;
3938

40-
if ( originalSlug !== formData.slug ) {
41-
// If the slug has been updated, remove the old slug.
42-
newFields = newFields.filter(
43-
( field ) => field.slug !== originalSlug
44-
);
45-
newFields.push( formData );
46-
setMeta( {
47-
fields: JSON.stringify( newFields ),
48-
} );
49-
} else if ( fields.find( ( field ) => field.slug === formData.slug ) ) {
39+
if ( fields.find( ( field ) => field.uuid === formData.uuid ) ) {
5040
// If the slug is the same and it exists, update the field.
5141
newFields = newFields.map( ( field ) => {
52-
if ( field.slug === formData.slug ) {
42+
if ( field.uuid === formData.uuid ) {
5343
field = formData;
5444
}
5545
return field;

‎includes/manager/_supported-attributes.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-block.php#L246-L251
2+
const SUPPORTED_BLOCK_ATTRIBUTES = {
3+
'core/group': [ 'content' ],
4+
'core/paragraph': [ 'content' ],
5+
'core/heading': [ 'content' ],
6+
'core/image': [ 'id', 'url', 'title', 'alt' ],
7+
'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
8+
};
9+
10+
export default SUPPORTED_BLOCK_ATTRIBUTES;

‎includes/manager/fields-ui.js

+11-15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { registerPlugin } from '@wordpress/plugins';
22
import { PluginDocumentSettingPanel } from '@wordpress/editor';
33
import {
44
Button,
5+
PanelRow,
56
Modal,
67
__experimentalVStack as VStack,
78
__experimentalItemGroup as ItemGroup,
@@ -41,7 +42,7 @@ const CreateContentModelPageSettings = function () {
4142
<>
4243
<PluginDocumentSettingPanel
4344
name="create-content-model-field-settings"
44-
title={ __( 'Custom Fields' ) }
45+
title={ __( 'Post Meta' ) }
4546
className="create-content-model-field-settings"
4647
>
4748
{ fields.length > 0 && (
@@ -77,16 +78,18 @@ const CreateContentModelPageSettings = function () {
7778
</ItemGroup>
7879
) }
7980

80-
<Button
81-
variant="secondary"
82-
onClick={ () => setFieldsOpen( true ) }
83-
>
84-
{ __( 'Manage Fields' ) }
85-
</Button>
81+
<PanelRow>
82+
<Button
83+
variant="secondary"
84+
onClick={ () => setFieldsOpen( true ) }
85+
>
86+
{ __( 'Manage Fields' ) }
87+
</Button>
88+
</PanelRow>
8689

8790
{ isFieldsOpen && (
8891
<Modal
89-
title={ __( 'Manage Fields' ) }
92+
title={ __( 'Post Meta' ) }
9093
size="large"
9194
onRequestClose={ () => setFieldsOpen( false ) }
9295
>
@@ -108,13 +111,6 @@ const FieldsList = () => {
108111
// Saving the fields as serialized JSON because I was tired of fighting the REST API.
109112
const fields = meta?.fields ? JSON.parse( meta.fields ) : [];
110113

111-
// Add a uuid to each field for React to track.
112-
fields.forEach( ( field ) => {
113-
if ( ! field.uuid ) {
114-
field.uuid = window.crypto.randomUUID();
115-
}
116-
} );
117-
118114
// Save the fields back to the meta.
119115
const setFields = ( newFields ) => {
120116
setMeta( { fields: JSON.stringify( newFields ) } );

0 commit comments

Comments
 (0)