Skip to content

Commit 628bac1

Browse files
fabiankaegyfabiankaegy
authored
Merge branch 'develop' into feature/unregister-block-extension
2 parents f75eae3 + 0901ff9 commit 628bac1

File tree

12 files changed

+116
-93
lines changed

12 files changed

+116
-93
lines changed

‎components/counter/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ const Counter: ForwardRefExoticComponent<
169169
return (
170170
<StyledComponentContext cacheKey="tenup-component-counter">
171171
<StyledCounter
172-
className={cx('tenup--block-components__character-count', {
172+
className={clsx('tenup--block-components__character-count', {
173173
'is-over-limit': count > limit,
174174
})}
175175
ref={ref}

‎components/icon-picker/icon-picker-toolbar-button.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ interface IconPickerToolbarButtonProps extends IconPickerProps {
1616
* Label for the button
1717
*/
1818
buttonLabel?: string;
19+
/**
20+
* Optionally specify the icon set to use
21+
* If not specified, all icon sets will be used
22+
*/
23+
iconSet?: string;
1924
}
2025

2126
export const IconPickerToolbarButton: React.FC<IconPickerToolbarButtonProps> = (props) => {

‎components/icon-picker/icon-picker.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,12 +200,17 @@ export type IconPickerProps = Omit<React.ComponentProps<typeof BaseControl>, 'ch
200200
* Change handler for when a new icon is selected
201201
*/
202202
onChange: (icon: { name: string; iconSet: string }) => void;
203+
/**
204+
* Optionally specify the icon set to use
205+
* If not specified, all icon sets will be used
206+
*/
207+
iconSet?: string;
203208
};
204209

205210
export const IconPicker: React.FC<IconPickerProps> = (props) => {
206-
const { value, onChange, label = '', ...rest } = props;
211+
const { value, onChange, iconSet, label = '', ...rest } = props;
207212

208-
const icons = useIcons();
213+
const icons = useIcons(iconSet ? iconSet : '');
209214

210215
const instanceId = useInstanceId(IconPicker);
211216
const id = `icon-picker-${instanceId}`;

‎components/icon-picker/inline-icon-picker.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ interface InlineIconPickerProps extends IconPickerProps {
1717
* @param props
1818
*/
1919
renderToggle: (props: { onToggle: () => void }) => React.JSX.Element;
20+
/**
21+
* Optionally specify the icon set to use
22+
* If not specified, all icon sets will be used
23+
*/
24+
iconSet?: string;
2025
}
2126

2227
export const IconPickerDropdown: React.FC<InlineIconPickerProps> = (props) => {

‎components/icon-picker/readme.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,9 @@ export function BlockEdit(props) {
4848

4949
_The recommended approach for adding an icon picker to your custom block is using the `InlineIconPicker` as it delivers the best user experience._
5050

51-
In order to add icons to become available to the icon picker you need to use the [`registerIcons`](../../api/register-icons/) function.
51+
In order to add icons to become available to the icon picker you need to use the
52+
[`registerIcons`](../../api/register-icons/) function.
53+
54+
You can optionally include the `iconSet` property to the `IconPicker`,
55+
`InlineIconPicker`, and `IconPickerToolbarButton` to limit the icons available
56+
in the picker if necessary.

‎cypress/e2e/IconPicker.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ context('IconPicker', () => {
99
it('allows the user to use the post picker to change an icon and displays it', () => {
1010
cy.createPost({title: 'Icon Picker Example'});
1111
cy.insertBlock('Icon Picker Example');
12-
cy.get('.component-icon-picker-inline-button').click();
13-
cy.get('.component-icon-picker-inline__content [placeholder="Search"]').type('tool');
12+
cy.get('.component-icon-picker-inline-button').first().click();
13+
cy.get('.component-icon-picker-inline__content [placeholder="Search"]').first().type('tool');
1414
cy.get('.component-icon-picker-inline__content .components-checkbox-control').first().click({force: true});
1515

1616
cy.savePost();

‎cypress/e2e/PostMeta.spec.js‎

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -45,81 +45,4 @@ context('Post Meta', () => {
4545
cy.get('.wp-block-example-post-meta .components-form-toggle__input').should('be.checked');
4646
cy.get('.wp-block-example-post-meta .components-form-toggle').should('have.class', 'is-checked');
4747
})
48-
49-
it('Saves the data into post meta', () => {
50-
// Author
51-
cy.get('.wp-block-example-post-meta .block-editor-block-variation-picker__variation').first().click();
52-
cy.get('.wp-block-example-post-meta .block-editor-rich-text__editable').focus().clear().type('This is a test');
53-
54-
// Reset
55-
cy.get('.block-editor-block-breadcrumb__button').contains('Book').click();
56-
57-
// Price
58-
cy.insertBlock('Post Meta');
59-
cy.get('.wp-block-example-post-meta .block-editor-block-variation-picker__variation').eq(2).click();
60-
cy.get('.wp-block-example-post-meta .components-input-control__input').focus().clear().type('10');
61-
62-
// Reset
63-
cy.get('.block-editor-block-breadcrumb__button').contains('Book').click();
64-
65-
// Is featured
66-
cy.insertBlock('Post Meta');
67-
cy.get('.wp-block-example-post-meta .block-editor-block-variation-picker__variation').eq(3).click();
68-
cy.get('.wp-block-example-post-meta .components-form-toggle__input').check();
69-
70-
// Reset
71-
cy.get('.block-editor-block-breadcrumb__button').contains('Book').click();
72-
73-
// Intercept the network request related to publishing the post
74-
cy.intercept({
75-
method: 'POST',
76-
url: '/index.php?rest_route=%2Fwp%2Fv2%2Fbooks%2F*',
77-
}).as('publishPost');
78-
79-
cy.savePost();
80-
81-
// Wait for the intercepted request to complete
82-
cy.wait('@publishPost');
83-
84-
cy.reload();
85-
86-
cy.get('.components-dropdown-menu__toggle[aria-label="Options"]').click();
87-
cy.get('.components-menu-item__button').contains('Preferences').click();
88-
cy.get('.components-toggle-control__label').contains('Custom fields').then(($label) => {
89-
const attrFor = $label.attr('for');
90-
91-
cy.get(`#${attrFor}`).then($input => {
92-
if (!$input.is(':checked')) {
93-
cy.get(`#${attrFor}`).check();
94-
cy.get('.edit-post-preferences-modal__custom-fields-confirmation-button').contains('Show & Reload Page').click();
95-
} else {
96-
cy.get('.components-button[aria-label="Close"]').click();
97-
}
98-
})
99-
100-
cy.get('button').contains('Toggle panel: Custom Fields').then($button => {
101-
if ($button.attr('aria-expanded') === 'false') {
102-
cy.get('button').contains('Toggle panel: Custom Fields').click();
103-
}
104-
})
105-
106-
cy.get('input[value="author"]').should('exist').then($input => {
107-
const id = $input.attr('id');
108-
109-
cy.get(`#${id.replace('key','value')}`).should('have.value', 'This is a test');
110-
})
111-
112-
cy.get('input[value="is_featured"]').should('exist').then($input => {
113-
const id = $input.attr('id');
114-
115-
cy.get(`#${id.replace('key','value')}`).should('have.value', '1');
116-
})
117-
118-
cy.get('input[value="price"]').should('exist').then($input => {
119-
const id = $input.attr('id');
120-
121-
cy.get(`#${id.replace('key','value')}`).should('have.value', '10');
122-
})
123-
})
124-
})
12548
})

‎cypress/support/commands.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ Cypress.Commands.add('savePost', () => {
8787
});
8888

8989
Cypress.Commands.add('insertBlock', (blockName) => {
90-
cy.get('button[aria-label="Toggle block inserter"]').first().then($button => {
90+
cy.get('button[aria-label="Block Inserter"]').first().then($button => {
9191
if ($button.attr('aria-pressed') !== 'true') {
9292
cy.wrap($button).click();
9393
}

‎example/src/blocks/icon-picker-example/block.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,15 @@
1515
"default": {
1616
"iconSet": "example/theme",
1717
"name": "cloud"
18+
},
19+
"limitedPaletteIcon": {
20+
"type": "object",
21+
"default": {
22+
"iconSet": "example/limited-palette",
23+
"name": "brush-5"
24+
}
1825
}
1926
}
2027
},
2128
"editorScript": "file:./index.ts"
22-
}
29+
}

‎example/src/blocks/icon-picker-example/edit.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,44 @@ import {
99
InlineIconPicker,
1010
} from '@10up/block-components';
1111

12+
const limitedPaletteIconSet = 'example/limited-palette';
13+
1214
export function BlockEdit(props) {
1315
const {
1416
attributes,
1517
setAttributes
1618
} = props;
1719

18-
const { icon } = attributes;
20+
const { icon, limitedPaletteIcon } = attributes;
1921
const blockProps = useBlockProps();
2022

2123
const handleIconSelection = (value: {
2224
name: string;
2325
iconSet: string;
2426
}) => setAttributes({icon: { name: value.name, iconSet: value.iconSet }});
2527

28+
const handleLPIconSelection = (value: {
29+
name: string;
30+
iconSet: string;
31+
}) => setAttributes({limitedPaletteIcon: { name: value.name, iconSet: value.iconSet }});
32+
2633
return (
2734
<>
2835
<BlockControls>
2936
<ToolbarGroup>
3037
<IconPickerToolbarButton value={icon} onChange={handleIconSelection} />
3138
</ToolbarGroup>
39+
<ToolbarGroup>
40+
<IconPickerToolbarButton value={limitedPaletteIcon} onChange={handleLPIconSelection} iconSet={limitedPaletteIconSet} label="Select Limited Palette Icon" />
41+
</ToolbarGroup>
3242
</BlockControls>
3343
<InspectorControls>
3444
<PanelBody title={__('Icon Settings')}>
3545
<IconPicker value={icon} onChange={handleIconSelection} />
3646
</PanelBody>
47+
<PanelBody title={__('Limited Palette Icon Settings')}>
48+
<IconPicker value={limitedPaletteIcon} onChange={handleLPIconSelection} iconSet={limitedPaletteIconSet} />
49+
</PanelBody>
3750
</InspectorControls>
3851
<div {...blockProps}>
3952
<style>
@@ -42,7 +55,10 @@ export function BlockEdit(props) {
4255
width: 60px;
4356
}`}
4457
</style>
58+
<p>Icon chosen from entire icon set:</p>
4559
<InlineIconPicker value={icon} onChange={handleIconSelection} className="icon-preview"/>
60+
<p>Icon chosen from limited icon set:</p>
61+
<InlineIconPicker value={limitedPaletteIcon} onChange={handleLPIconSelection} iconSet={limitedPaletteIconSet} className="icon-preview"/>
4662
<h2 style={{marginTop: '0'}}>Hello World!</h2>
4763
</div>
4864
</>

0 commit comments

Comments
 (0)