Skip to content

Commit fe564b8

Browse files
oandregalandrewserong
oandregal
and
andrewserong
authored
Content only block experiment: blocks provide the form (#73479)
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
1 parent 667cb04 commit fe564b8

File tree

22 files changed

+99
-80
lines changed

22 files changed

+99
-80
lines changed

‎packages/block-editor/src/components/content-only-controls/index.js‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { store as blockEditorStore } from '../../store';
2424
import BlockIcon from '../block-icon';
2525
import useBlockDisplayTitle from '../block-title/use-block-display-title';
2626
import useBlockDisplayInformation from '../use-block-display-information';
27-
const { fieldsKey } = unlock( blocksPrivateApis );
27+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2828
import FieldsDropdownMenu from './fields-dropdown-menu';
2929

3030
// controls
@@ -197,14 +197,8 @@ function BlockFields( { clientId } ) {
197197

198198
const blockTypeFields = blockType?.[ fieldsKey ];
199199

200-
// Track visible fields
201-
const [ visibleFields, setVisibleFields ] = useState( () => {
202-
// Show fields that have shownByDefault: true by default
203-
return (
204-
blockTypeFields
205-
?.filter( ( field ) => field.shownByDefault )
206-
.map( ( field ) => field.id ) || []
207-
);
200+
const [ form, setForm ] = useState( () => {
201+
return blockType?.[ formKey ];
208202
} );
209203

210204
// Build DataForm fields with proper structure
@@ -315,22 +309,19 @@ function BlockFields( { clientId } ) {
315309
updateBlockAttributes,
316310
] );
317311

318-
// Build form config showing only visible fields
319-
const form = useMemo(
320-
() => ( {
321-
fields: dataFormFields
322-
.filter( ( field ) => visibleFields.includes( field.id ) )
323-
.map( ( field ) => field.id ),
324-
} ),
325-
[ dataFormFields, visibleFields ]
326-
);
327-
328312
const handleToggleField = ( fieldId ) => {
329-
setVisibleFields( ( prev ) => {
330-
if ( prev.includes( fieldId ) ) {
331-
return prev.filter( ( id ) => id !== fieldId );
313+
setForm( ( prev ) => {
314+
if ( prev.fields?.includes( fieldId ) ) {
315+
return {
316+
...prev,
317+
fields: prev.fields.filter( ( id ) => id !== fieldId ),
318+
};
332319
}
333-
return [ ...prev, fieldId ];
320+
321+
return {
322+
...prev,
323+
fields: [ ...( prev.fields || [] ), fieldId ],
324+
};
334325
} );
335326
};
336327

@@ -350,7 +341,7 @@ function BlockFields( { clientId } ) {
350341
</HStack>
351342
<FieldsDropdownMenu
352343
fields={ dataFormFields }
353-
visibleFields={ visibleFields }
344+
visibleFields={ form.fields }
354345
onToggleField={ handleToggleField }
355346
/>
356347
</HStack>

‎packages/block-library/src/audio/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import save from './save';
1616
import transforms from './transforms';
1717
import { unlock } from '../lock-unlock';
1818

19-
const { fieldsKey } = unlock( blocksPrivateApis );
19+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2020

2121
const { name } = metadata;
2222

@@ -42,7 +42,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
4242
id: 'audio',
4343
label: __( 'Audio' ),
4444
type: 'media',
45-
shownByDefault: true,
4645
mapping: {
4746
id: 'id',
4847
url: 'src',
@@ -56,9 +55,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
5655
id: 'caption',
5756
label: __( 'Caption' ),
5857
type: 'richtext',
59-
shownByDefault: false,
6058
},
6159
];
60+
settings[ formKey ] = {
61+
fields: [ 'audio' ],
62+
};
6263
}
6364

6465
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/button/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import metadata from './block.json';
1515
import save from './save';
1616
import { unlock } from '../lock-unlock';
1717

18-
const { fieldsKey } = unlock( blocksPrivateApis );
18+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
1919

2020
const { name } = metadata;
2121

@@ -44,20 +44,21 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
4444
id: 'text',
4545
label: __( 'Content' ),
4646
type: 'richtext',
47-
shownByDefault: true,
4847
},
4948
{
5049
id: 'link',
5150
label: __( 'Link' ),
5251
type: 'link',
53-
shownByDefault: false,
5452
mapping: {
5553
url: 'url',
5654
rel: 'rel',
5755
linkTarget: 'linkTarget',
5856
},
5957
},
6058
];
59+
settings[ formKey ] = {
60+
fields: [ 'text' ],
61+
};
6162
}
6263

6364
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/code/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import save from './save';
1515
import transforms from './transforms';
1616
import { unlock } from '../lock-unlock';
1717

18-
const { fieldsKey } = unlock( blocksPrivateApis );
18+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
1919

2020
const { name } = metadata;
2121

@@ -49,9 +49,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
4949
id: 'content',
5050
label: __( 'Code' ),
5151
type: 'richtext',
52-
shownByDefault: true,
5352
},
5453
];
54+
settings[ formKey ] = {
55+
fields: [ 'content' ],
56+
};
5557
}
5658

5759
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/cover/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import transforms from './transforms';
1717
import variations from './variations';
1818
import { unlock } from '../lock-unlock';
1919

20-
const { fieldsKey } = unlock( blocksPrivateApis );
20+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2121

2222
const { name } = metadata;
2323

@@ -62,7 +62,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
6262
id: 'background',
6363
label: __( 'Background' ),
6464
type: 'media',
65-
shownByDefault: true,
6665
mapping: {
6766
type: 'backgroundType',
6867
id: 'id',
@@ -78,6 +77,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
7877
},
7978
},
8079
];
80+
settings[ formKey ] = {
81+
fields: [ 'content' ],
82+
};
8183
}
8284

8385
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/details/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import save from './save';
1515
import transforms from './transforms';
1616
import { unlock } from '../lock-unlock';
1717

18-
const { fieldsKey } = unlock( blocksPrivateApis );
18+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
1919

2020
const { name } = metadata;
2121
export { metadata, name };
@@ -71,9 +71,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
7171
id: 'summary',
7272
label: __( 'Summary' ),
7373
type: 'richtext',
74-
shownByDefault: true,
7574
},
7675
];
76+
settings[ formKey ] = {
77+
fields: [ 'summary' ],
78+
};
7779
}
7880

7981
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/file/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import save from './save';
1616
import transforms from './transforms';
1717
import { unlock } from '../lock-unlock';
1818

19-
const { fieldsKey } = unlock( blocksPrivateApis );
19+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2020

2121
const { name } = metadata;
2222

@@ -42,7 +42,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
4242
id: 'file',
4343
label: __( 'File' ),
4444
type: 'media',
45-
shownByDefault: true,
4645
mapping: {
4746
id: 'id',
4847
url: 'href',
@@ -56,15 +55,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
5655
id: 'fileName',
5756
label: __( 'Filename' ),
5857
type: 'richtext',
59-
shownByDefault: false,
6058
},
6159
{
6260
id: 'downloadButtonText',
6361
label: __( 'Button Text' ),
6462
type: 'richtext',
65-
shownByDefault: false,
6663
},
6764
];
65+
settings[ formKey ] = {
66+
fields: [ 'file' ],
67+
};
6868
}
6969

7070
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/heading/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import transforms from './transforms';
1717
import variations from './variations';
1818
import { unlock } from '../lock-unlock';
1919

20-
const { fieldsKey } = unlock( blocksPrivateApis );
20+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2121

2222
const { name } = metadata;
2323

@@ -79,9 +79,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
7979
id: 'content',
8080
label: __( 'Content' ),
8181
type: 'richtext',
82-
shownByDefault: true,
8382
},
8483
];
84+
settings[ formKey ] = {
85+
fields: [ 'content' ],
86+
};
8587
}
8688

8789
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/image/index.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import save from './save';
1616
import transforms from './transforms';
1717
import { unlock } from '../lock-unlock';
1818

19-
const { fieldsKey } = unlock( blocksPrivateApis );
19+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2020

2121
const { name } = metadata;
2222

@@ -72,7 +72,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
7272
id: 'image',
7373
label: __( 'Image' ),
7474
type: 'media',
75-
shownByDefault: true,
7675
mapping: {
7776
id: 'id',
7877
url: 'url',
@@ -88,7 +87,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
8887
id: 'link',
8988
label: __( 'Link' ),
9089
type: 'link',
91-
shownByDefault: false,
9290
mapping: {
9391
url: 'href',
9492
rel: 'rel',
@@ -100,15 +98,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
10098
id: 'caption',
10199
label: __( 'Caption' ),
102100
type: 'richtext',
103-
shownByDefault: false,
104101
},
105102
{
106103
id: 'alt',
107104
label: __( 'Alt text' ),
108105
type: 'text',
109-
shownByDefault: false,
110106
},
111107
];
108+
settings[ formKey ] = {
109+
fields: [ 'image' ],
110+
};
112111
}
113112

114113
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/list-item/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import save from './save';
1616
import transforms from './transforms';
1717
import { unlock } from '../lock-unlock';
1818

19-
const { fieldsKey } = unlock( blocksPrivateApis );
19+
const { fieldsKey, formKey } = unlock( blocksPrivateApis );
2020

2121
const { name } = metadata;
2222

@@ -42,9 +42,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
4242
id: 'content',
4343
label: __( 'Content' ),
4444
type: 'richtext',
45-
shownByDefault: true,
4645
},
4746
];
47+
settings[ formKey ] = {
48+
fields: [ 'content' ],
49+
};
4850
}
4951

5052
export const init = () => initBlock( { name, metadata, settings } );

0 commit comments

Comments
 (0)