ContentPicker label even when hidden will still display after items are selected

[michael-sumner]

Describe the bug

Example component:

<ContentPicker
	onPickChange={(pickedPost) => {
		setAttributes({ posts: pickedPost });
	}}
	mode="post"
	label={__('Select a post', 'mytheme')}
	placeholder={__('Select a post', 'mytheme')}
	contentTypes={contentTypes}
	content={posts}
	maxContentItems={1}
	hideLabelFromVision
	isOrderable={false}
	uniqueContentItems
/>

This will still output the label (although, as a generic div element with no CSS classname). To fix this, currently this is the workaround:

/* 10up/block-components styles */
:where(.editor-styles-wrapper) {

	/*
	 * Select the element outputted from the ContentPicker `label` prop,
	 * even if it does not have a CSS class for it.
	 * It will appear after all items are picked in the ContentPicker component.
	 */
	& .tenup-content-picker:has(div[class*="tenup-component-content-picker-"]) div:not(div[class]) {
		display: none;
	}
}

Steps to Reproduce

Please see Bug descriptions.

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[fabiankaegy]

@michael-sumner can you add a little more detail / a screenshot here? I'm not sure I am following 🤔

[michael-sumner]

@fabiankaegy The "label text" appears after the max number of items is selected. It seems to be that it displays even if the hideLabelFromVision is set to true.