10up/block-components

A collection of components built to be used in the block editor

10up Block Components

A collection of components built to be used in the block editor.

Overview

A collection of components built to be used in the block editor. These components do not include any build files and do not bundle the WordPress components. Therefore these need to be used in an environment where the Dependency Extraction Webpack Plugin is used and the import { component } from '@wordpress/package'; is supported. If your project is using 10up-toolkit, this is handled automatically.

Installation

1. Run npm install --save @10up/block-components within your WordPress theme or plugin.
2. Within your block editor code, import the relevant component(s) e.g. import { ContentPicker } from '@10up/block-components';
3. We highly recommend you use 10up-toolkit to build your block files as it handles dependency extraction for you.

APIs

• registerBlockExtension
• registerIcons

Components

• ClipboardButton
• ColorSettings
• ContentPicker
• ContentSearch
• CustomBlockAppender
• IconPicker
• Image
• Link
• InnerBlockSlider DEPRECATED
• IsAdmin
• MediaToolbar
• Optional
• Repeater
• RichTextCharacterLimit

Post related Components

These components read/write information from the global post object or a PostContext.

• PostAuthor
• PostCategoryList
• PostContext
• PostDate
• PostExcerpt
• PostFeaturedImage
• PostPrimaryCategory
• PostPrimaryTerm
• PostTermList
• PostTitle
• PostMeta

Hooks

• useFilteredList
• useHasSelectedInnerBlock
• useIcons
• useMedia
• useRequestData
• useBlockParentAttributes
• useScript
• useIsPluginActive
• usePopover

Post related hooks

These hooks read/write information from the global post object or a PostContext.

• useAllTerms
• useTaxonomy
• useIsSupportedTaxonomy
• usePost
• usePrimaryTerm
• useSelectedTermIds
• useSelectedTerms
• useSelectedTermsOfSavedPost
• usePostMetaValue

Stores

• iconStore

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct and CONTRIBUTING.md for details on the process for submitting pull requests to us.

Like what you see?

block-components's Issues

Add: `Optional` Component

One pattern that almost every block should use is showing placeholders of optional values when a block is selected but hiding them when the block is not selected.

Currently the only way to get that behavior is by checking that the value itself is empty and checking that the block is not selected:

const BlockEdit = (props) => {
    const { attributes, setAttributes, isSelected } = props;
    const { title } = attributes;

    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            { !! title && isSelected && (
                <RichText tagName="h2" value={ title } onChange={value => setAttributes({ title: value }) } />
            ) }
        </div>
    )
}

Instead of always having to do this how about we add a component called Optional that takes care of this logic for us. The component itself can use the useBlockEditorContext to get the selection state and we can pass it only the value to check:

const BlockEdit = (props) => {
    const { attributes, setAttributes } = props;
    const { title } = attributes;

    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <Optional value={ title }>
                <RichText tagName="h2" value={ title } onChange={value => setAttributes({ title: value }) } />
           </>
        </div>
    )
}

The main benefit here is legibility. It makes it more clear what you are trying to achieve and therefore makes it simpler to compose.

Image: UI for replacing/removing an image after an image has been selected is missing

Describe the bug

The demo GIF on the Image component readme shows a toolbar UI for adding, removing, and replacing images. However, it would appear this is missing in the current version of the component.

After adding an image, I expect to be able to remove or update the image.

In actuality, adding an image replaces the MediaPlaceholder with an <img> element that has no controls, and no additional controls are rendered in the block toolbar.

Steps to Reproduce

1. Add this component to a block
2. Upload/select an image for the block using the Image component
3. Attempt to change/remove the image after an image has been selected

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

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

Same items load with the same key and breaks sorting.

Describe the bug
The ContentPicker allows you to select the same post twice. But if you do that and reload, the items load with the same key and you get the following error in the console. "Warning: Encountered two children with the same key, item-32".

Steps to Reproduce

• Add a block using the Content Picker that has isOrderable set to true.
• Search for and select the same post twice.
• Save.
• Reload.
• You will see the error in the console. and you will not be able to click and drag to sort the items.

Expected behavior
User should not be able to select the same post twice.

Add: `DeepLink` Component

On several Projects now I've seen the need to allow editors to more easily create deep links into something. It may be a Tab item, an accordion or any other block. And under the hood this can simply be achieved by adding the supports.anchor flag to a block.

This still leaves a lot of manual work & advanced knowledge for editors who may not understand that the anchor allows you to directly link to something.

So the idea is to create a custom component that can be added by block authors to directly add the anchor field with an additional field to allow you to copy the full URL including the anchor. It shows inline validation etc.

Screenshot:

More ideas to get this Feature to be less verbose are appreciated.

Component: Content Picker | Add support for terms in addition to posts

At the moment the ContentPicker component only works for Post types of the type post. The goal would be to open this up so the content picker can be used to pick term items aswell.

Content Picker - legacy context API being used by a dependency

Describe the bug
When using the content picker in a custom block, and with React Chrome dev tools turned on, I see the following in the JS console:

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: sortableList

Learn more about this warning here: https://fb.me/react-legacy-context
    in sortableList (at ContentPicker/index.js:126)
    in div (created by Styled(div))
    in Styled(div) (at ContentPicker/index.js:115)
    in div (at ContentPicker/index.js:104)
    in ContentPicker (at content-trio-edit.js:39)
    in div (created by PanelBody)
    in PanelBody (at content-trio-edit.js:17)
    in bubbles_virtually_fill_Fill (created by slot_fill_Fill)
    in slot_fill_Fill (created by InspectorControlsFill)
    in InspectorControlsFill (created by InspectorControls)
    in InspectorControls (at content-trio-edit.js:16)
    in ContentTrioEdit (created by Edit)
    in Edit (created by WithToolbarControls(Edit))
    in WithToolbarControls(Edit) (created by WithInspectorControl(WithToolbarControls(Edit)))
    in WithInspectorControl(WithToolbarControls(Edit)) (created by WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
    in WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))) (created by WithToolbarControls(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
    in WithToolbarControls(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
    in Unknown (created by WithDispatch(Component))
    in WithDispatch(Component)
    in Unknown (created by WithMultipleValidation(WithToolbarControls(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))))
    in WithMultipleValidation(WithToolbarControls(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))) (created by WithFilters(Edit))
    in WithFilters(Edit) (created by block_edit_BlockEdit)
    in block_edit_BlockEdit (created by block_BlockListBlock)
    in div (created by block_BlockListBlock)
    in BlockCrashBoundary (created by block_BlockListBlock)
    in block_BlockListBlock (created by (block_BlockListBlock))
    in (block_BlockListBlock) (created by ((block_BlockListBlock)))
    in ((block_BlockListBlock)) (created by WithFontSizeInlineStyles(((block_BlockListBlock))))
    in WithFontSizeInlineStyles(((block_BlockListBlock)))
    in Unknown (created by WithSelect(WithFontSizeInlineStyles(((block_BlockListBlock)))))
    in WithSelect(WithFontSizeInlineStyles(((block_BlockListBlock)))) (created by WithFilters(block_BlockListBlock))
    in WithFilters(block_BlockListBlock) (created by IfCondition(WithFilters(block_BlockListBlock)))
    in IfCondition(WithFilters(block_BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
    in WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))
    in Unknown (created by Pure(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))))
    in Pure(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))) (created by Items)
    in Items (created by BlockListItems)
    in BlockListItems (created by BlockList)
    in div (created by BlockList)
    in BlockList (created by VisualEditor)
    in div (created by WritingFlow)
    in WritingFlow (created by VisualEditor)
    in div (created by VisualEditor)
    in div (created by VisualEditor)
    in VisualEditor (created by Layout)
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in ForwardRef(InterfaceSkeleton) (created by Layout)
    in Layout (created by Editor)
    in ErrorBoundary (created by Editor)
    in BlockEditorProvider
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(BlockEditorProvider) (created by EditorProvider)
    in BlockContextProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EditorProvider
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(EditorProvider) (created by Editor)
    in DropZoneContextProvider (created by Editor)
    in slot_fill_provider_SlotFillProvider (created by SlotFillProvider)
    in SlotFillProvider (created by Editor)
    in StrictMode (created by Editor)
    in Editor

(content-trio is a custom block in my project.)

While I don't think using the legacy context is going to break anything soon, having these huge warnings in the console gets in the way when developing other features. We should trace which dependency this is coming from and update if possible.

Steps to Reproduce

1. Create a custom block using the custom picker
2. Use React dev tools for React
3. See error

Additional context

Add: `ClipboardButton` Component

In WordPress 5.9 the ClipboardButton from the @wordpress/components package has been deprecated in favor of the useCopyToClipboard hook. The hook is great and allows for much more flexibility. But I do think that it still makes sense to have a more easy to use component that creates a button to copy something.

Proposed API

import { ClipboardButton } from '@10up/block-components';

<ClipboardButton 
    text="Text that should be copied"
    disabled={ false }
    onSuccess={ () => {} }
    label={ ({ hasCopied }) => hasCopied ? 'Copied' : 'Copy' }
/>

When a user clicks the ClipboardButton label is a callback function that passes whether the text has been copied as the first parameter. This can be used to set the label depending on the state of the button. When the text has been copied the state should stay in the copied state for 3 seconds and then get reset to the original state.

npm install --save @10up/block-components is failing

Describe the bug
When installing the dependency from the command line it fails with the following error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR! dev eslint@"^6.8.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">=7.5.0" from @babel/[email protected]
npm ERR! node_modules/@babel/eslint-parser
npm ERR! peer @babel/eslint-parser@"^7.12.13" from @10up/[email protected]
npm ERR! node_modules/@10up/eslint-config
npm ERR! dev @10up/eslint-config@"^2.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/nicola/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

Steps to Reproduce
from WSL or from windows, go into the folder of a plugin created with create-10up plugin and run npm install --save @10up/block-components

Expected behavior
package is installed

`Counter`: Spin off into individual component, a11y, and icon

Is your enhancement related to a problem? Please describe.

I'm using a customized version of the Counter component that is currently part of the rich text character limit.

Break out Counter

I'm only using the counter in this case, not the entire component. Since I had to add it to an existing control that we specifically don't want to be RichText, it may be useful to spin out the Counter so it can be used in other contexts.

a11y Updates

For accessibility purposes, there should probably be a couple of changes in particular:

• The warning icon could use some additional contrast since yellow on white tends to be hard to see. In my customized version, I'm using a yellow icon with a black fill.[1]
• We should look into using something like meter to semantically let the user know the value of characters remaining

Icon updates

In the customized version, we also have added a "good" icon that gives the user extra information that the current value is well within the specified range.[2]

Designs

1. 
2. 

Describe alternatives you've considered

No response

Code of Conduct

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

Add: `Repeater` field Component

Repeater fields are a common pattern we see when working with blocks. A component to make it easier to work with would be great.

Incorrectly named prop passed to ContentSearch from ContentPicker

Describe the bug

block-components/components/ContentPicker/index.js

Line 96 in dc71c1d

<ContentSearch excludeItem={excludeItems} onSelect={handleSelect} />

On the line above, ContentPicker is passing onSelect to ContentSearch. ContentSearch expects onSelectItem instead.

Steps to Reproduce

1. Include ContentPicker somewhere
2. Search for and select an item
3. See the default onSelectItem callback from the propTypes definition is called (Select! in the console)

Expected behavior

Screenshots

Add modal block

Is your enhancement related to a problem? Please describe.

Describe the solution you'd like

Designs

Describe alternatives you've considered

Additional context

ContentPicker: drag handle size can be inconsistent and is frequently too small

Describe the bug

When using the ContentPicker with sortable items, the drag handle is sometimes different sizes. Sometimes it's too small to grab with the cursor.

Expected behavior
The drag handle should be consistently sized and large enough to meet accessibility standards for interactive elements.

Screenshots
See above

Additional context

Screenshot is of the ContentPicker used in InspectorControls.

Link: Allow for aria-label to be passed through as a prop

Is your enhancement related to a problem? Please describe.

Oftentimes we want to provide a description giving context as to what a link is for in a block. Link text is quite generic, and while great for basic links, doesn't allow us to provide rich accessible descriptions.

I propose using Link text as the default aria-label and allowing for custom labels to be passed through as a prop.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

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

Add: Icon Picker Component

Is your enhancement related to a problem? Please describe.

A common problem we need to solve is projects needing a way to select icons within blocks. The way our theme scaffold does it in PHP is having a helper function that includes the SVG files by a given name.

Describe the solution you'd like

It would be cool to somehow also make this work in React where the Icon picker is self-aware of all the icons in the project and allows editors to pick an icon. The icon itself would be stored as a string which then could be used in a <Icon /> component to actually display that particular icon in react.

Designs

IconPickerControl in InspectorControls area

IconPickerToolbarButton in BlockControls area

IconPicker inside Content

Describe alternatives you've considered

Additional context

Content Picker: at narrow widths, too little of the post title is visible

Is your enhancement related to a problem? Please describe.

When using the content picker within narrow containers such as the block editor sidebar, it can be difficult to find the post you're looking for because the titles are cut off after the first couple of words. Screenshot:

Describe the solution you'd like

I know the CSS can be overridden within my project to make more of the title show (it's currently hidden with CSS), but by default within the component I suggest we surface the title either as a browser-native title attribute (see below) or with a similar Gutenberg component.

Additionally, we might revisit the "post" badge shown to the right of the button, particularly when we are searching only one post type, in which scenario it adds no meaningful information.

Provide unminified source

Is your enhancement related to a problem? Please describe.

I think we should provide unminified sources for the package when is published. This would help to debug when developing.

Given that React always goes through some bundling pipeline, I think there's no harm in offering this but wanted to check other opinions first.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

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

Content Picker: Support showing an initial set of results on focus

Is your enhancement related to a problem? Please describe.
Many content picking scenarios are attempting to select from the latest relevant items. It isn't transparent to the user what to expect once they start typing and they may not even need to search at all.

Describe the solution you'd like
Surface an initial X set of results on focus, defaulting to reverse chronological of whatever content is included in search, but I imagine all of this would be configurable via props. IMO it should default to showing those results, with a prop to not show them.

Designs
n/a

Describe alternatives you've considered
Not an alternative but could consider only showing initial results on focus if nothing has been selected in that picker yet. I am not strongly opinionated on this point at the moment.

Additional context
This has been a direct request on other projects and I agree that it is better "starting point" UX. It is not equivalent to core linking, because in that situation there is no real predicting whether a user is trying to make an external or internal content link.

The PickedItem component does not show up nicely

Describe the bug

The contentPicker has some stylistic issues when used in inspector controls. It also has some html issues.

1. The class .block-editor-link-control__search-item-title is set to have white-space: nowrap; This causes the item to go offscreen and the "X" cannot be reached to remove the post from the list.
2. The items are being decoded on line 80 in PickedItem.js. if html is used in the title, that comes through decoded. Probably better to remove any html

** Fix **

In PickedItem.js on line 80, maybe we can remove the entities completely:

decodeEntities(suggestion.title)
// to
decodeEntities(suggestion.title).replace(/(<([^>]+)>)/gi, "")

The same would be done in SearchItem.js on line 38.

As for the CSS that would need to be scoped to the Inspector.

Screenshots

Add the ability to provide a fallback image to the `Image` component that gets used in the block `example`

Currently, since the Image component relies on the imageId there is no way to provide a fallback / example image. This leads to a not ideal experience when using block patterns / the block preview in general.

It would be great to provide a way to solve this issue.

Component: Content Picker | Add option to select multiple items

@tlovett1 id be really interested to see how you would like this to work.

I have two thoughts of how the component currently already solves for this.

1. The component doesn't keep track of what is selected, so you could use it to select multiple ones one after another and store then in array via the handleSelect callback.

2. I actually believe that it is a better pattern for many usecases in the editor to have a wrapper block with individual children that each have their own picker. The reasoning behind this is, that it is mich easier to handle reordering items and managing the array.

But I would love to better understand your usecase / need for this :)

Add ability to add inline styles to a block via the `registerBlockExtension` API

Currently the registerBlockExtension API only allows you to extend blocks by adding custom class names to them. There are cases however where we need inline styles for a custom color for example. It would be nice to extend the API to accept both classnames as well as inline styles.

ContentPicker component will not build when using @wordpress/scripts

Describe the bug

When trying to use the ContentPicker component in a project that only uses the @wordpress/scripts package, I get error below. Being able to use this component without the need for 10upscripts would help drive adoption.

ERROR in ./node_modules/@10up/block-components/api/registerBlockExtention.js 65:11
Module parse failed: Unexpected token (65:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                       // return early from the block mofification
|                       if (name !== blockName) {
>                               return <BlockEdit {...props} />;
|                       }
| 
 @ ./node_modules/@10up/block-components/index.js 8:0-70 8:0-70
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/ContentPicker/index.js 119:2
Module parse failed: Unexpected token (119:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       return (
>               <div className={`${NAMESPACE}`}>
|                       {(!content.length || (content.length && content.length < maxContentItems)) && (
|                               <ContentSearch
 @ ./node_modules/@10up/block-components/index.js 1:0-59 1:0-59
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/ContentSearch/index.js 145:2
Module parse failed: Unexpected token (145:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       return (
>               <NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
|                       <TextControl
|                               label={label}
 @ ./node_modules/@10up/block-components/index.js 2:0-59 2:0-59
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/CustomBlockAppender/index.js 35:2
Module parse failed: Unexpected token (35:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }) => {
|       return (
>               <Inserter
|                       isAppender
|                       rootClientId={rootClientId}
 @ ./node_modules/@10up/block-components/index.js 7:0-82 7:0-82
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/IconPicker/icon-picker-toolbar-button.js 25:2
Module parse failed: Unexpected token (25:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export const IconPickerToolbarButton = (props) => {
|       return (
>               <Dropdown
|                       className="component-icom-picker-toolbar-button"
|                       contentClassName="component-icom-picker-toolbar-button__content"
 @ ./node_modules/@10up/block-components/components/IconPicker/index.js 3:0-71 3:0-71
 @ ./node_modules/@10up/block-components/index.js 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/IconPicker/icon-picker.js 96:2
Module parse failed: Unexpected token (96:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       return (
>               <BaseControl label={label} id={id} className="component-icon-picker" {...rest}>
|                       <SearchControl value={searchTerm} onChange={setSearchTerm} id={id} />
|                       {hasIcons ? (
 @ ./node_modules/@10up/block-components/components/IconPicker/index.js 2:0-43 2:0-43
 @ ./node_modules/@10up/block-components/index.js 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/IconPicker/icon.js 20:9
Module parse failed: Unexpected token (20:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       if (!icon) {
>               return <Spinner />;
|       }
| 
 @ ./node_modules/@10up/block-components/components/IconPicker/index.js 1:0-30 1:0-30
 @ ./node_modules/@10up/block-components/index.js 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/IconPicker/inline-icon-picker.js 25:2
Module parse failed: Unexpected token (25:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       const { value, ...rest } = props;
|       const IconButton = ({ onToggle }) => (
>               <Icon name={value.name} iconSet={value.iconSet} onClick={onToggle} {...rest} />
|       );
| 
 @ ./node_modules/@10up/block-components/components/IconPicker/index.js 4:0-56 4:0-56
 @ ./node_modules/@10up/block-components/index.js 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33 11:0-16:33
 @ ./src/index.js 2:0-55 4:33-46

ERROR in ./node_modules/@10up/block-components/components/InnerBlockSlider/index.js 92:2
Module parse failed: Unexpected token (92:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|       return (
>               <div className="inner-block-slider">
|                       <div className="slides-outer">
|                               <div className="slides" css={slidesCSS} ref={slides}>
 @ ./node_modules/@10up/block-components/index.js 3:0-65 3:0-65
 @ ./src/index.js 2:0-55 4:33-46

webpack 5.66.0 compiled with 9 errors in 205 ms

Steps to Reproduce

1. Create a new package.json
2. Run npm i -D @wordpress/scripts
3. Run npm install --save @10up/block-component
4. Create start and build scripts as per the docs
5. Create a file at src/index.js
6. Import the ContentPicker component using the example on the repo.
7. Run npm start or npm run build

Screenshots, screen recording, code snippet

No response

Environment information

• Device: Mac Mini M1
• OS: Big Sur 11.6
• Env: .zsh terminal

WordPress information

No response

Code of Conduct

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

Register block extension API does not respect custom class names that were added to a block

Describe the bug

When registering a block extension using the registerBlockExtention API the className of the block which can be set in the Advanced section of the Settings Sidebar gets overwritten.

Steps to Reproduce

1. Register block extension
2. go to block that uses the extension
3. add custom class name
4. see that it gets overwritten

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

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

`ContentPicker` new `prop` to control selected initial order

Is your enhancement related to a problem? Please describe.

When using the picker my desired list output requires that the new item is pushed to the bottom of the list. In a small list this is not a problem to manually resort, also it's not too hard to redo the actual selection with onPickChange, but it might be simpler if we do it this way.

Designs

No response

Describe alternatives you've considered

I've considered letting the user resort manually, but it seems to be too troublesome for large lists. another alternative, which I have in place, was to use onPickChange and redo the sort, considering it pushes to the top, but it feels like I'll be doing this every time I need this behavior change.

Code of Conduct

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

Link Component sometimes types backwards after WordPress 6.0 update

Describe the bug

In some instances the link component types backwards after you update your site to WordPress 6.0

Steps to Reproduce

1. Start the demo environment
2. Create a new post
3. insert the Link Example block
4. Start typing inside the link
5. See issue

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

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

Add: `TermPicker` Component

A common pattern that I'm coming across again and again is that we need to override the core UI for a term picker. By default core allows you to choose multiple categories / tags and that is the same for custom post types. However there are many cases where we need to be able to add a term which should be displayed in a radio control so you can only select one item.

This currently is rather cumbersome and not very straightforward. I'd love for us to come up with a nicer developer experience that leads to a better UX across all projects.

Link Component text area is hard to focus

When trying to click into the text area of the link component that only shows the placeholder text it is very difficult to actually focus the contenteditable area.

ContentPicker: Dropdown scrollbar overlaps items

Describe the bug
When scrollbars are visible, the content hides behind the vertical one due to inherited box model styles from Gutenberg;

Steps to Reproduce

1. Add ContentPicker component
2. Type to find a post
3. See error

Expected behavior

Screenshots

Environment information

• Device: Macbook
• OS: Macos
• Browser and version: Chrome
• WordPress version: 5.8.1

Add: `ColorSettings` Component

Core comes with either a PanelColorSettings or a ColorPalette component. There are many use cases though where we don't want to have the Color Settings in their own Inspector Panel but rather want the setting to live alongside other settings in a Panel.

The solution here would be a custom component called ColorSettings which can accept a label etc.

It can essentially be built using the BaseControl from @wordpress/components.

Add: `Link` Component

Is your enhancement related to a problem? Please describe.

A common pattern that we need to solve for in our blocks is the ability to have one or multiple CTA/Link areas inside of a Custom Block. These CTAs/Links may be optional but when an editor chooses to use the Link they need to provide both the Link Text and also the URL.

Describe the solution you'd like

Create a new Component called Link that allows developers to pass a text, url, onTextChange, onUrlSelect and other props that may be passed through to the underlying RichText component like a className etc.

const { linkText, linkUrl } = attributes;

<Link 
    text={linkText}
    onTextChange={ value => setAttributes( { linkText: value } ) }
    placeholder={ "Insert Link here..." }
    url={linkUrl}
    onLinkSelect={ value => setAttributes( { linkUrl: value } ) }
    className={`custom-class-name`}
/>

The Component should be aware of whether the current block is selected and not show when no text and no URL are provided and the block is not currently selected. When either of the values is shown but the other one isn't there should be an inline warning indication letting the user know that they are not done entering data into the component.

When a user interacts with the link in the editor the LinkControl component should open up and allow editors to choose what they want to link to.

Designs

/

Describe alternatives you've considered

/

Additional context

/

Add: `useWithScript` hook

Is your enhancement related to a problem? Please describe.

There has been a few conversations about using inline scripts or script tags in blocks in Slack. https://10up.slack.com/archives/C8Z3WMN1K/p1618246004141500

Describe the solution you'd like

Components for inline scripts and appending script tags.

https://gist.github.com/Shelob9/2dd838530ac973a03eba04ee417fdbd7

Link: After setting a link URL, there's currently no way to clear out the link URL value

Describe the bug

When working with the Link component, there is no way to unset the linkUrl using the component. I either expect a button that allows an editor to unset the URL value, or allow for an empty string to be passed to the URL input.

Steps to Reproduce

1. Go to a edit page and insert a block that uses the Link component
2. Set a URL on the Link component
3. Attempt to unset the URL on the Link component

Screenshots, screen recording, code snippet

Video of the issue in action:
https://user-images.githubusercontent.com/7225212/186250812-902fbd75-5795-4d65-9d37-95fe9f3af2da.mov

Environment information

No response

WordPress information

No response

Code of Conduct

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

Add CONTRIBUTING.md file

Is your enhancement related to a problem? Please describe.
There is currently no contributing file, explaining how to work with the repo. I personally had a few struggles at first. The problem is even more visible when a new contributor might not have heard of wp-env and how all that works out.

Describe the solution you'd like
Document how to work with the repository. Ideally, answer the following questions:

• How to clone and set up the repository locally, so that I can see my work inside WP?
• What is the /example folder?
• Should I commit my /example folder?
• What is the difference between a Block and a Component?

Many of these questions might have obvious answers for people that have worked with the editor before, but that doesn't mean that they are to every other potential contributor.

Much of the work can be copy-pasted from @fabiankaegy 's work on the Block Library

And while at it, we can also include the code of conduct file into the repository, also seen in the PR linked above.

Designs
N/A

Describe alternatives you've considered

Additional context

Extend content picker to include users

Describe the solution you'd like
Update the ContentPicker to support selecting users by passing user to the mode prop.

Implementation Details

• Update the ContentSearch component to use the wp/v2/users endpoint when mode is set to user - reference
• Update the PickedItem component call to getEntityRecord user - reference

Content Picker: show label even when max number of items is selected

Is your enhancement related to a problem? Please describe.

Currently the label for the ContentPicker is passed down to the search input component, and the search input component is hidden when the max number of items has been selected. This can create a confusing UI where there is a list of posts with no heading, so it's not obvious what the list of posts is for.

Describe the solution you'd like

The label passed into the content picker should always show. The label text can also be passed down to the input, but hidden.

Designs

Describe alternatives you've considered

Additional context

ContentPicker: start wrapper CSS class with a letter instead of a number

Is your enhancement related to a problem? Please describe.

block-components/components/ContentPicker/index.js

Line 104 in da265f3

<div className={`${NAMESPACE}`}>

When rendered, this produces

<div class="10up-content-picker">
    ....
</div>

While it is possible to select that CSS class, it is more difficult than if the class were tenup-content-picker

Describe the solution you'd like

The class should be tenup-content-picker.

Designs

Describe alternatives you've considered

Additional context

ContentPicker: Mode not passed to search

Describe the bug
Within the ContentPicker component, the mode prop isn't passed to the ContentSearch component, meaning it always defaults to posts.

See: https://github.com/10up/block-components/blob/trunk/components/ContentPicker/index.js#L106-L112

Steps to Reproduce

1. Add a ContentPicker block
2. Set mode to terms
3. Search
4. Posts are returned

Expected behavior
Terms should be returned

Feature: Add webpack code-splitting to package

It would be great to figure out a way to make the individual components in this package tree shakable. Right now the entire code is being imported when you import a single component and that has a major effect because you suddenly load all of the @wordrpess/ dependencies due to the dependency extraction plgin.

Content Picker: Paginate results or use Load More button; Avoid inifinte scroll.

Is your enhancement related to a problem? Please describe.
The content picker results modal should follow WordPress' existing patterns such as pagination or a load more button.

Describe the solution you'd like
Pagination would show 10 or a configurable number of results upon search then paginate accordingly. Or search results should follow the new Media Library design pattern that displays a Load More button for the visitor to initiate the next set of results. In both cases, infinite scroll should be avoided due to accessibility limitations summarized in this post

contentTypes not passed from ContentPicker to ContentSearch

PR incoming.

Describe the bug

block-components/components/ContentPicker/index.js

Lines 106 to 111 in edb2b3a

	<ContentSearch
	placeholder={placeholder}
	label={label}
	excludeItems={excludeItems}
	onSelectItem={handleSelect}
	/>

Because contentTypes is not passed down, the default content types (post and page) are always used.

Steps to Reproduce

1. Use a ContentPicker component with a custom post type set as the contentType
2. Try the search
3. See that only posts and pages are returned

Expected behavior

Content picker can be restricted to a CPT

Customize the `ContentSearch` item type label

Is your enhancement related to a problem? Please describe.

I'm using the ContentSearch component to allow selection of a single post (of any public post type).

When using it only with post types, the item type label can feel a bit misleading - from what I can see, the item type label is set to the "mode" property of the item, so in this case it will be post as the content type is a post.

However, as I'm using it only for post types, when searching for a page, or CPT, it feels a bit misleading being labelled as post (also the default post type).

It would be great to be able to pass through a custom property (of the item in the list) instead, in this case the actual post type.

Designs

Before:

After:

Describe alternatives you've considered

No response

Code of Conduct

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

`ContentPicker` can pick duplicate items before save

Describe the bug

When using the ContentPicker with more than 1 item, and before saving a post, you are able to select the same item twice. The editor shouldn't be able to select the same item twice before saving the content.

Steps to Reproduce

Create a test block with the ContentPicker with maxContentItems more than 1.

1. Create a new post / page with the test block
2. Select an item
3. Type again to get the same result
4. Select the same item

Screenshots, screen recording, code snippet

No response

Environment information

This has been recreated on multiple environments using multiple WP installs.

WordPress information

`

wp-core

version: 6.0.3
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 7
dotorg_communication: true

wp-paths-sizes

wordpress_path: /home/10up/Sites/10up-scaffold/app/public
wordpress_size: 364.15 MB (381839092 bytes)
uploads_path: /home/10up/Sites/10up-scaffold/app/public/wp-content/uploads
uploads_size: 27.72 MB (29070609 bytes)
themes_path: /home/10up/Sites/10up-scaffold/app/public/wp-content/themes
themes_size: 7.76 MB (8134987 bytes)
plugins_path: /home/10up/Sites/10up-scaffold/app/public/wp-content/plugins
plugins_size: 87.08 KB (89175 bytes)
database_size: 2.52 MB (2637824 bytes)
total_size: 402.23 MB (421771687 bytes)

wp-active-theme

name: 10up Theme (10up-theme)
version: 0.1.0
author: 10up
author_website: https://10up.com
parent_theme: none
theme_features: widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, editor-styles, html5, editor-style, menus
theme_path: /home/10up/Sites/10up-scaffold/app/public/wp-content/themes/10up-theme
auto_update: Disabled

wp-plugins-active (1)

WordPress Importer: version: 0.8, author: wordpressdotorg, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_GD
imagick_module_version: Not available
imagemagick_version: Not available
imagick_version: Not available
file_uploads: File uploads is turned off
post_max_size: 1000M
upload_max_filesize: 300M
max_effective_size: 300 MB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, BMP
ghostscript_version: 9.56.1

wp-server

server_architecture: Linux 5.19.15-201.fc36.x86_64 x86_64
httpd_software: nginx/1.16.0
php_version: 8.0.0 64bit
php_sapi: fpm-fcgi
max_input_variables: 4000
time_limit: 1200
memory_limit: 256M
max_input_time: 600
upload_max_filesize: 300M
php_post_max_size: 1000M
curl_version: 7.58.0 GnuTLS/3.5.18
suhosin: false
imagick_availability: false
pretty_permalinks: true
htaccess_extra_rules: false

wp-database

extension: mysqli
server_version: 8.0.16
client_version: mysqlnd 8.0.0
max_allowed_packet: 16777216
max_connections: 151

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/10up/Sites/10up-scaffold/app/public/wp-content
WP_PLUGIN_DIR: /home/10up/Sites/10up-scaffold/app/public/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
mu-plugins: writable

`

Code of Conduct

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

ContentPicker: Maximum update depth exceeded

Describe your question

Hi,

I try to use the Content Picker component to make a featured pages block. But I get an error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I've made a repository with my code: https://github.com/huubl/featured-pages-plugin

I tried the example block too. But it doesn't set the selectedPost attribute somehow.

Building blocks and React is new to me and I can't find what I'm doing wrong. Can you point me in the right direction?

Code of Conduct

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

Content Picker: deleted posts not handled

Describe the bug

With the ContentPicker, we need a way to let the top-level component know when one or more of the previously selected posts has been deleted.

Steps to Reproduce

1. Set up a Content Picker component with the picked posts being saved to post meta.
2. Set maxContentItems to 3
3. Select three posts with the Content Picker and save
4. Delete two of the posts
5. Reload.
6. The content picker only renders the non-deleted posts, but it still thinks there are three posts (length of the content prop is 3), so it doesn't render the search bar or provide a way to remove the deleted posts.

Expected behavior

ContentPicker should find out when its content can't be retrieved and update its content prop accordingly.

Screenshots

Environment information

• Device:
• OS:
• Browser and version:
• WordPress version:

• Plugins and version:
• Theme and version:

• Site Health Info:

Additional context

Unique items in content picker

Multiple same posts can be picked

Describe the bug

Steps to Reproduce

1. Go to editor
2. Click on add block which is being created using this
3. add the post
4. See error

Expected behavior

User should only select a post one time

Screenshots

Video showing this bug https://www.loom.com/share/e252fbad0c46402db978dd2940d8d916

Environment information

• Device:
• OS:
• Browser and version:
• WordPress version:

• Plugins and version:
• Theme and version:

• Site Health Info:

Additional context

Add linting/testing actions

Is your enhancement related to a problem? Please describe.

Currently there are no GitHub Actions set up to run linting and testing against pull requests. After #30 is merged, we could pretty easily copy from one of the other 10up projects to get this set up.

Describe the solution you'd like

PRs blocked from being merged if Jest tests fail or the new linting issues are introduced.

Designs

Describe alternatives you've considered

Additional context

ContentPicker: handleSelect function doesn't work with terms

Describe the bug
The handleSelect function within the ContentPicker component doesn't work with terms.

See: https://github.com/10up/block-components/blob/trunk/components/ContentPicker/index.js#L57-L68

This uses item.subtype but subtype isn't returned from the search for terms, it should be item.type for terms.

Steps to Reproduce

1. Add a ContentPicker Component
2. Set mode to terms
3. Choose an item
4. No selection shows since the type isn't set

Expected behavior
Selection should show correctly

Content Picker search can run less often

Is your enhancement related to a problem? Please describe.
The search runs every time input changes. While this is generally not a problem, it can be an issue on slow connections, and it is technically possible to type so fast that you reach the limit of the simultaneous requests the browser will allow.

Describe the solution you'd like

No need to debounce. Instead, we can just make sure only one fetch request is running at a time. After a fetch completes, we check whether the search term has changed; if it has, search again. This way we will still make a lot of requests that are never surfaced in the UI as the user types, but it will be fewer requests than what the component does now.

Designs

Describe alternatives you've considered

Debouncing, though as described above, I don't think it's necessary.

Additional context

I'll send a PR for this, unless someone else sees this and wants to try it.

Add focal point option to Image Component

Adding the FocalPointPicker to the image component via an optional setting would be a great enhancement we should add to the component :)