/
inner-blocks-allowed-blocks.spec.js
146 lines (128 loc) · 3.72 KB
/
inner-blocks-allowed-blocks.spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activatePlugin(
'gutenberg-test-innerblocks-allowed-blocks'
);
} );
test.afterAll( async ( { requestUtils } ) => {
await requestUtils.deactivatePlugin(
'gutenberg-test-innerblocks-allowed-blocks'
);
} );
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );
test( 'allows all blocks if the allowed blocks setting was not set', async ( {
editor,
page,
} ) => {
await editor.insertBlock( {
name: 'core/group',
attributes: {
layout: { type: 'constrained' },
},
innerBlocks: [
{
name: 'core/paragraph',
attributes: { placeholder: 'Add a description' },
},
],
} );
await editor.canvas
.getByRole( 'document', {
name: 'Empty block',
} )
.click();
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
.getByRole( 'button', { name: 'Toggle block inserter' } );
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
} );
await blockInserter.click();
await expect( blockLibrary ).toBeVisible();
expect(
await blockLibrary.getByRole( 'option' ).count()
).toBeGreaterThan( 10 );
} );
test( 'limits the blocks if the allowed blocks setting was set', async ( {
editor,
page,
} ) => {
await editor.insertBlock( {
name: 'core/group',
attributes: {
layout: { type: 'constrained' },
allowedBlocks: [
'core/paragraph',
'core/heading',
'core/image',
],
},
innerBlocks: [
{
name: 'core/paragraph',
attributes: { placeholder: 'Add a description' },
},
],
} );
// Select inner block.
await editor.canvas
.getByRole( 'document', {
name: 'Empty block',
} )
.click();
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
.getByRole( 'button', { name: 'Toggle block inserter' } );
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
} );
await blockInserter.click();
await expect( blockLibrary ).toBeVisible();
await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [
'Paragraph',
'Heading',
'Image',
] );
} );
// Note: This behavior isn't fully supported. See https://github.com/WordPress/gutenberg/issues/14515.
test( 'correctly applies dynamic allowed blocks restrictions', async ( {
editor,
page,
} ) => {
await editor.canvas.click( 'role=button[name="Add default block"i]' );
await page.keyboard.type( '/Allowed Blocks Dynamic' );
await page.keyboard.press( 'Enter' );
const blockAppender = editor.canvas.getByRole( 'button', {
name: 'Add block',
} );
await expect( blockAppender ).toBeVisible();
await blockAppender.click();
const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
await expect( blockListBox ).toBeVisible();
await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
'Image',
'List',
] );
// Insert list block.
await blockListBox.getByRole( 'option', { name: 'List' } ).click();
// Select the list wrapper and then parent block.
await page.keyboard.press( 'ArrowUp' );
await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
// Insert the image.
await blockAppender.click();
await blockListBox.getByRole( 'option', { name: 'Image' } ).click();
await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
await blockAppender.click();
// It should display a different allowed block list.
await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
'Gallery',
'Video',
] );
} );
} );