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.

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

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

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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;
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

This file was deleted.

8 changes: 1 addition & 7 deletions packages/block-library/src/query/index.js
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 } );