Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar: Add slot above tabs for items applying to block as a whole #45437

Closed
wants to merge 4 commits into from
Closed

Sidebar: Add slot above tabs for items applying to block as a whole #45437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
510b3e6
Add new block information slot
aaronrobertshaw Nov 1, 2022
b322536
Move query blocks new post link to new slot
aaronrobertshaw Nov 1, 2022
541f769
Rename slot and inspector controls group
aaronrobertshaw Nov 2, 2022
81e582a
Render new post link directly instead of via filter
aaronrobertshaw Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ const BlockInspectorSingleBlock = ( {
} }
/>
<BlockVariationTransforms blockClientId={ clientId } />
<InspectorControls.Slot __experimentalGroup="info" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that would make more sense directly below BlockCard component or we could even consider adding this inside BlockCard. I think I had seen some use cases for enhancing the BlockCard before, for example adding html(links) like here. The way I had seen others doing it was by modifying the block's description with filters and we used to allow that, even if it should be just a string.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If all we want is to render some extra text or links, moving the slot above the block variations makes sense to me.

I was under the impression that we didn't want to update the BlockCard for the moment, and this new slot would be for "adding something relevant to the block as a whole". That "something" sounded like it could possibly be more than a simple link.

With that flexibility, we get the potential for the slot to be abused though.

{ showTabs && (
<InspectorControlsTabs
hasBlockStyles={ hasBlockStyles }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/inspector-controls/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
const InspectorControlsInfo = createSlotFill( 'InspectorControlsInfo' );
const InspectorControlsDimensions = createSlotFill(
'InspectorControlsDimensions'
);
Expand All @@ -21,6 +22,7 @@ const groups = {
border: InspectorControlsBorder,
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
info: InspectorControlsInfo,
list: InspectorControlsListView,
typography: InspectorControlsTypography,
};
Expand Down
26 changes: 26 additions & 0 deletions packages/block-library/src/query/edit/inspector-controls/create-new-post-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { addQueryArgs } from '@wordpress/url';

const CreateNewPostLink = ( {
attributes: { query: { postType } = {} } = {},
} ) => {
if ( ! postType ) return null;
const newPostUrl = addQueryArgs( 'post-new.php', {
post_type: postType,
} );
return (
<div className="wp-block-query__create-new-link">
{ createInterpolateElement(
__( '<a>Create a new post</a> for this feed.' ),
// eslint-disable-next-line jsx-a11y/anchor-has-content
{ a: <a href={ newPostUrl } /> }
) }
</div>
);
};

export default CreateNewPostLink;
11 changes: 6 additions & 5 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import AuthorControl from './author-control';
import ParentControl from './parent-control';
import { TaxonomyControls } from './taxonomy-controls';
import StickyControl from './sticky-control';
import CreateNewPostLink from './create-new-post-link';
import {
usePostTypes,
useIsPostTypeHierarchical,
Expand All @@ -32,11 +33,8 @@ import {
useTaxonomies,
} from '../../utils';

export default function QueryInspectorControls( {
attributes,
setQuery,
setDisplayLayout,
} ) {
export default function QueryInspectorControls( props ) {
const { attributes, setQuery, setDisplayLayout } = props;
const { query, displayLayout } = attributes;
const {
order,
Expand Down Expand Up @@ -112,6 +110,9 @@ export default function QueryInspectorControls( {
showStickyControl;
return (
<>
<InspectorControls __experimentalGroup="info">
<CreateNewPostLink { ...props } />
</InspectorControls>
{ showSettingsPanel && (
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
Expand Down
53 changes: 0 additions & 53 deletions packages/block-library/src/query/hooks.js
View file
Open in desktop

This file was deleted.

8 changes: 1 addition & 7 deletions packages/block-library/src/query/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { loop as icon } from '@wordpress/icons';
import { addFilter } from '@wordpress/hooks';

/**
* Internal dependencies
Expand All @@ -13,7 +12,6 @@ import edit from './edit';
import save from './save';
import variations from './variations';
import deprecated from './deprecated';
import queryInspectorControls from './hooks';

const { name } = metadata;
export { metadata, name };
Expand All @@ -26,8 +24,4 @@ export const settings = {
deprecated,
};

export const init = () => {
addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );

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