Feature: Query Loop Block Support #98
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "extends": [ | ||
| "@10up/eslint-config/wordpress" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,273 @@ | ||||||||
| /* eslint-disable @wordpress/no-unsafe-wp-apis */ | ||||||||
| /* eslint-disable import/no-extraneous-dependencies */ | ||||||||
| /* eslint-disable import/extensions */ | ||||||||
| /** | ||||||||
| * External dependencies | ||||||||
| */ | ||||||||
| import { v4 as uuidv4 } from 'uuid'; | ||||||||
| import { registerBlockExtension, ContentPicker } from '@10up/block-components'; | ||||||||
|
|
||||||||
| /** | ||||||||
| * WordPress dependencies | ||||||||
| */ | ||||||||
| import { | ||||||||
| ToggleControl, | ||||||||
| Notice, | ||||||||
| SelectControl, | ||||||||
| BaseControl, | ||||||||
| __experimentalToolsPanel as ToolsPanel, | ||||||||
| __experimentalToolsPanelItem as ToolsPanelItem, | ||||||||
| } from '@wordpress/components'; | ||||||||
| import { InspectorControls } from '@wordpress/block-editor'; | ||||||||
| import { useSelect } from '@wordpress/data'; | ||||||||
| import { __ } from '@wordpress/i18n'; | ||||||||
| import { store as coreStore } from '@wordpress/core-data'; | ||||||||
| import { store as editorStore } from '@wordpress/editor'; | ||||||||
| import { useMemo, useEffect, useRef } from '@wordpress/element'; | ||||||||
|
|
||||||||
| /** | ||||||||
| * Internal dependencies | ||||||||
| */ | ||||||||
| import { store } from '../store'; | ||||||||
|
|
||||||||
| const BlockEdit = ({ setAttributes, attributes }) => { | ||||||||
| const { query, showRelated, relationshipKey, sourcePost, orderByRelationship } = attributes; | ||||||||
| const { postType: queriedPostType } = query; | ||||||||
|
|
||||||||
| const { postTypes, relationships, hasRelationships, currentPostId, currentPostType } = | ||||||||
| useSelect( | ||||||||
| (select) => { | ||||||||
| const { getPostTypes } = select(coreStore); | ||||||||
| const excludedPostTypes = ['attachment']; | ||||||||
| const filteredPostTypes = getPostTypes({ per_page: -1 })?.filter( | ||||||||
| ({ viewable, slug }) => viewable && !excludedPostTypes.includes(slug), | ||||||||
| ); | ||||||||
|
|
||||||||
| const currentPostId = select(editorStore).getCurrentPostId(); | ||||||||
| const currentPostType = select(editorStore).getCurrentPostType(); | ||||||||
|
|
||||||||
| const postRelationships = select(store).getRelationships( | ||||||||
| sourcePost?.[0]?.id || currentPostId, | ||||||||
| ); | ||||||||
| const filteredRelationships = Object.values(postRelationships).filter( | ||||||||
| (relationship) => | ||||||||
| Array.isArray(relationship.post_type) && | ||||||||
| relationship.post_type.includes(queriedPostType), | ||||||||
| ); | ||||||||
|
|
||||||||
| return { | ||||||||
| postTypes: filteredPostTypes, | ||||||||
| relationships: filteredRelationships, | ||||||||
| hasRelationships: filteredRelationships.length > 0, | ||||||||
| currentPostId, | ||||||||
| currentPostType, | ||||||||
| }; | ||||||||
| }, | ||||||||
| [queriedPostType, sourcePost?.length], | ||||||||
| ); | ||||||||
|
|
||||||||
| const postTypesSlugs = useMemo(() => (postTypes || []).map(({ slug }) => slug), [postTypes]); | ||||||||
|
|
||||||||
| const relationshipsOptions = useMemo( | ||||||||
| () => | ||||||||
| relationships.map((relationship) => ({ | ||||||||
| value: relationship.rel_key, | ||||||||
| label: relationship.labels.name, | ||||||||
| })), | ||||||||
| [relationships], | ||||||||
| ); | ||||||||
|
|
||||||||
| const selectedRelationshipKey = useMemo( | ||||||||
| () => | ||||||||
| relationshipKey && relationships.some((rel) => rel.rel_key === relationshipKey) | ||||||||
| ? relationshipKey | ||||||||
| : relationships[0]?.rel_key, | ||||||||
| [relationshipKey, relationships], | ||||||||
| ); | ||||||||
|
|
||||||||
| const selectedRelationship = useMemo( | ||||||||
| () => | ||||||||
| relationships.find((relationship) => relationship.rel_key === selectedRelationshipKey), | ||||||||
| [relationships, selectedRelationshipKey], | ||||||||
| ); | ||||||||
|
|
||||||||
| const lastQueryRef = useRef(query); | ||||||||
|
|
||||||||
| const updatedQuery = useMemo(() => { | ||||||||
| if (!showRelated || !selectedRelationship) { | ||||||||
| const { relationshipQuery, orderByRelationship, ...cleanQuery } = query; | ||||||||
| return cleanQuery; | ||||||||
| } | ||||||||
|
|
||||||||
| return { | ||||||||
| ...query, | ||||||||
| orderByRelationship: orderByRelationship && selectedRelationship.sortable, | ||||||||
| relationshipQuery: [ | ||||||||
| { | ||||||||
| name: selectedRelationship.rel_name, | ||||||||
| related_to_post: sourcePost?.[0]?.id || currentPostId, | ||||||||
| }, | ||||||||
| ], | ||||||||
| }; | ||||||||
| }, [query, showRelated, orderByRelationship, selectedRelationship, sourcePost, currentPostId]); | ||||||||
|
|
||||||||
| useEffect(() => { | ||||||||
| if (JSON.stringify(lastQueryRef.current) !== JSON.stringify(updatedQuery)) { | ||||||||
| setAttributes({ query: updatedQuery }); | ||||||||
| lastQueryRef.current = updatedQuery; | ||||||||
| } | ||||||||
| }, [updatedQuery, setAttributes]); | ||||||||
|
|
||||||||
| const relationshipsControlLabel = __('Relationship', 'tenup-content-connect'); | ||||||||
| const relationshipsControlHelp = __( | ||||||||
| 'Select a relationship to determine how related entities are retrieved.', | ||||||||
| 'tenup-content-connect', | ||||||||
| ); | ||||||||
| const sourcePostControlHelp = __( | ||||||||
| 'Choose the post from which related entities will be pulled. Defaults to the current post.', | ||||||||
| 'tenup-content-connect', | ||||||||
| ); | ||||||||
|
|
||||||||
| const resetAll = () => { | ||||||||
| setAttributes({ | ||||||||
| showRelated: false, | ||||||||
| sourcePost: undefined, | ||||||||
| relationshipKey: undefined, | ||||||||
| orderByRelationship: true, | ||||||||
| }); | ||||||||
| }; | ||||||||
|
|
||||||||
| const onShowRelatedChange = (value) => { | ||||||||
| if (!value) { | ||||||||
| resetAll(); | ||||||||
| } else { | ||||||||
| setAttributes({ | ||||||||
| showRelated: value, | ||||||||
| sourcePost: [ | ||||||||
| { | ||||||||
| id: currentPostId, | ||||||||
| type: currentPostType, | ||||||||
| uuid: uuidv4(), | ||||||||
| }, | ||||||||
| ], | ||||||||
| }); | ||||||||
| } | ||||||||
| }; | ||||||||
|
|
||||||||
| const onSourcePostChange = (ids) => { | ||||||||
| setAttributes({ sourcePost: ids.length ? ids : undefined }); | ||||||||
| }; | ||||||||
|
|
||||||||
| const onRelationshipChange = (value) => { | ||||||||
| setAttributes({ relationshipKey: value }); | ||||||||
| }; | ||||||||
|
|
||||||||
| const onOrderByRelationshipChange = (value) => { | ||||||||
| setAttributes({ orderByRelationship: value }); | ||||||||
| }; | ||||||||
|
|
||||||||
| return ( | ||||||||
| <InspectorControls> | ||||||||
| <ToolsPanel label={__('Related', 'tenup-content-connect')} resetAll={resetAll}> | ||||||||
| <ToolsPanelItem | ||||||||
| hasValue={() => !!showRelated} | ||||||||
| label={__('Related entities', 'tenup-content-connect')} | ||||||||
| onDeselect={() => resetAll()} | ||||||||
| isShownByDefault | ||||||||
| > | ||||||||
| <ToggleControl | ||||||||
| label={__('Only show related entities', 'tenup-content-connect')} | ||||||||
| checked={showRelated} | ||||||||
| onChange={onShowRelatedChange} | ||||||||
| /> | ||||||||
| </ToolsPanelItem> | ||||||||
| {showRelated && ( | ||||||||
| <ToolsPanelItem | ||||||||
| hasValue={() => !!sourcePost} | ||||||||
| label={__('Source post', 'tenup-content-connect')} | ||||||||
| onDeselect={() => setAttributes({ sourcePost: undefined })} | ||||||||
| isShownByDefault | ||||||||
| > | ||||||||
| <BaseControl help={sourcePostControlHelp}> | ||||||||
| <ContentPicker | ||||||||
| onPickChange={onSourcePostChange} | ||||||||
| mode="post" | ||||||||
| content={sourcePost} | ||||||||
| contentTypes={postTypesSlugs} | ||||||||
| maxContentItems={1} | ||||||||
| singlePickedLabel={__('Selected post:', 'tenup-content-connect')} | ||||||||
| /> | ||||||||
| </BaseControl> | ||||||||
| </ToolsPanelItem> | ||||||||
|
Comment on lines
+185
to
+201
Member
There was a problem hiding this comment. The way this currently works is odd. By default it already has the current post selected. I am not sure if this is how it should be 🤔 I think instead of that we should hide the That way users that want to select a different post to relate to (which should be a very niche feature) can still do it but it isn't there front and center. |
||||||||
| )} | ||||||||
| {showRelated && ( | ||||||||
| <ToolsPanelItem | ||||||||
| hasValue={() => !!relationshipKey} | ||||||||
| label={__('Relationship', 'tenup-content-connect')} | ||||||||
| onDeselect={() => setAttributes({ relationshipKey: undefined })} | ||||||||
| isShownByDefault | ||||||||
| > | ||||||||
| {hasRelationships && ( | ||||||||
| <SelectControl | ||||||||
| options={relationshipsOptions} | ||||||||
| value={relationshipKey} | ||||||||
| label={relationshipsControlLabel} | ||||||||
| onChange={onRelationshipChange} | ||||||||
| help={relationshipsControlHelp} | ||||||||
| __nextHasNoMarginBottom | ||||||||
|
Member
There was a problem hiding this comment.
Suggested change
If we need this control we should make sure it has the new default size to make it look better :) |
||||||||
| /> | ||||||||
| )} | ||||||||
|
Comment on lines
+210
to
+219
Member
There was a problem hiding this comment. We should only show this select control if there is more than one relationship available. I got it in an example where it only had one option |
||||||||
| {!hasRelationships && ( | ||||||||
| <Notice spokenMessage={null} status="warning" isDismissible={false}> | ||||||||
| {__( | ||||||||
| 'No relationships exist for the selected post type or post. Try selecting a different post or post type.', | ||||||||
| 'tenup-content-connect', | ||||||||
| )} | ||||||||
| </Notice> | ||||||||
| )} | ||||||||
| </ToolsPanelItem> | ||||||||
| )} | ||||||||
| {showRelated && selectedRelationship?.sortable && ( | ||||||||
| <ToolsPanelItem | ||||||||
| hasValue={() => !!orderByRelationship} | ||||||||
| label={__('Order by relationship', 'tenup-content-connect')} | ||||||||
| onDeselect={() => setAttributes({ orderByRelationship: undefined })} | ||||||||
| > | ||||||||
| <ToggleControl | ||||||||
| __nextHasNoMarginBottom | ||||||||
| label={__('Order by relationship', 'tenup-content-connect')} | ||||||||
| checked={orderByRelationship} | ||||||||
| onChange={onOrderByRelationshipChange} | ||||||||
| help={__( | ||||||||
| 'If enabled, the order of the posts will be determined by the selected relationship. This supersedes any other ordering.', | ||||||||
| 'tenup-content-connect', | ||||||||
| )} | ||||||||
| /> | ||||||||
| </ToolsPanelItem> | ||||||||
| )} | ||||||||
| </ToolsPanel> | ||||||||
| </InspectorControls> | ||||||||
| ); | ||||||||
| }; | ||||||||
|
|
||||||||
| registerBlockExtension('core/query', { | ||||||||
| extensionName: 'content-connect', | ||||||||
| attributes: { | ||||||||
| showRelated: { | ||||||||
| type: 'boolean', | ||||||||
| default: false, | ||||||||
| }, | ||||||||
| sourcePost: { | ||||||||
| type: 'array', | ||||||||
| }, | ||||||||
| relationshipKey: { | ||||||||
| type: 'string', | ||||||||
| }, | ||||||||
| orderByRelationship: { | ||||||||
| type: 'boolean', | ||||||||
| default: true, | ||||||||
| }, | ||||||||
| }, | ||||||||
| classNameGenerator: () => '', | ||||||||
| Edit: BlockEdit, | ||||||||
| }); | ||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import './core-query'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we update to version 1.21.1 of the block components we can use the new code split import syntax for these also:
which will result in a smaller bundle size :)