@wordpress/block-library 6.0.23 → 7.0.0

package/src/query/edit/query-inspector-controls.js

@@ -1,281 +0,0 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	PanelBody,
-	QueryControls,
-	TextControl,
-	FormTokenField,
-	SelectControl,
-	RangeControl,
-	ToggleControl,
-	Notice,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useEffect, useState, useCallback } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { getTermsInfo, usePostTypes } from '../utils';
-import { MAX_FETCHED_TERMS } from '../constants';
-
-const stickyOptions = [
-	{ label: __( 'Include' ), value: '' },
-	{ label: __( 'Exclude' ), value: 'exclude' },
-	{ label: __( 'Only' ), value: 'only' },
-];
-
-// Helper function to get the term id based on user input in terms `FormTokenField`.
-const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
-	// First we check for exact match by `term.id` or case sensitive `term.name` match.
-	const termId = termValue?.id || termsMappedByName[ termValue ]?.id;
-	if ( termId ) return termId;
-	/**
-	 * Here we make an extra check for entered terms in a non case sensitive way,
-	 * to match user expectations, due to `FormTokenField` behaviour that shows
-	 * suggestions which are case insensitive.
-	 *
-	 * Although WP tries to discourage users to add terms with the same name (case insensitive),
-	 * it's still possible if you manually change the name, as long as the terms have different slugs.
-	 * In this edge case we always apply the first match from the terms list.
-	 */
-	const termValueLower = termValue.toLocaleLowerCase();
-	for ( const term in termsMappedByName ) {
-		if ( term.toLocaleLowerCase() === termValueLower ) {
-			return termsMappedByName[ term ].id;
-		}
-	}
-};
-
-export default function QueryInspectorControls( {
-	attributes: { query, displayLayout },
-	setQuery,
-	setDisplayLayout,
-} ) {
-	const {
-		order,
-		orderBy,
-		author: selectedAuthorId,
-		postType,
-		sticky,
-		inherit,
-	} = query;
-	const [ showCategories, setShowCategories ] = useState( true );
-	const [ showTags, setShowTags ] = useState( true );
-	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
-	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
-	const { authorList, categories, tags } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
-		const termsQuery = { per_page: MAX_FETCHED_TERMS };
-		const _categories = getEntityRecords(
-			'taxonomy',
-			'category',
-			termsQuery
-		);
-		const _tags = getEntityRecords( 'taxonomy', 'post_tag', termsQuery );
-		return {
-			categories: getTermsInfo( _categories ),
-			tags: getTermsInfo( _tags ),
-			authorList: getEntityRecords( 'root', 'user', {
-				per_page: -1,
-			} ),
-		};
-	}, [] );
-	useEffect( () => {
-		if ( ! postTypesTaxonomiesMap ) return;
-		const postTypeTaxonomies = postTypesTaxonomiesMap[ postType ];
-		setShowCategories( postTypeTaxonomies.includes( 'category' ) );
-		setShowTags( postTypeTaxonomies.includes( 'post_tag' ) );
-	}, [ postType, postTypesTaxonomiesMap ] );
-	useEffect( () => {
-		setShowSticky( postType === 'post' );
-	}, [ postType ] );
-	const onPostTypeChange = ( newValue ) => {
-		const updateQuery = { postType: newValue };
-		if ( ! postTypesTaxonomiesMap[ newValue ].includes( 'category' ) ) {
-			updateQuery.categoryIds = [];
-		}
-		if ( ! postTypesTaxonomiesMap[ newValue ].includes( 'post_tag' ) ) {
-			updateQuery.tagIds = [];
-		}
-		if ( newValue !== 'post' ) {
-			updateQuery.sticky = '';
-		}
-		setQuery( updateQuery );
-	};
-	// Handles categories and tags changes.
-	const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => {
-		const termIds = Array.from(
-			newTermValues.reduce( ( accumulator, termValue ) => {
-				const termId = getTermIdByTermValue(
-					terms.mapByName,
-					termValue
-				);
-				if ( termId ) accumulator.add( termId );
-				return accumulator;
-			}, new Set() )
-		);
-		setQuery( { [ queryProperty ]: termIds } );
-	};
-	const onCategoriesChange = onTermsChange( categories, 'categoryIds' );
-	const onTagsChange = onTermsChange( tags, 'tagIds' );
-
-	const [ querySearch, setQuerySearch ] = useState( query.search );
-	const onChangeDebounced = useCallback(
-		debounce( () => {
-			if ( query.search !== querySearch ) {
-				setQuery( { search: querySearch } );
-			}
-		}, 250 ),
-		[ querySearch, query.search ]
-	);
-
-	useEffect( () => {
-		onChangeDebounced();
-		return onChangeDebounced.cancel;
-	}, [ querySearch, onChangeDebounced ] );
-
-	// Returns only the existing term ids (categories/tags) in proper
-	// format to be used in `FormTokenField`. This prevents the component
-	// from crashing in the editor, when non existing term ids were provided.
-	const getExistingTermsFormTokenValue = ( taxonomy ) => {
-		const termsMapper = {
-			category: {
-				queryProp: 'categoryIds',
-				terms: categories,
-			},
-			post_tag: {
-				queryProp: 'tagIds',
-				terms: tags,
-			},
-		};
-		const requestedTerm = termsMapper[ taxonomy ];
-		return ( query[ requestedTerm.queryProp ] || [] ).reduce(
-			( accumulator, termId ) => {
-				const term = requestedTerm.terms.mapById[ termId ];
-				if ( term ) {
-					accumulator.push( {
-						id: termId,
-						value: term.name,
-					} );
-				}
-				return accumulator;
-			},
-			[]
-		);
-	};
-
-	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					label={ __( 'Inherit query from template' ) }
-					help={ __(
-						'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-					) }
-					checked={ !! inherit }
-					onChange={ ( value ) => setQuery( { inherit: !! value } ) }
-				/>
-				{ ! inherit && (
-					<SelectControl
-						options={ postTypesSelectOptions }
-						value={ postType }
-						label={ __( 'Post Type' ) }
-						onChange={ onPostTypeChange }
-						help={ __(
-							'WordPress contains different types of content and they are divided into collections called "Post Types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
-						) }
-					/>
-				) }
-				{ displayLayout?.type === 'flex' && (
-					<>
-						<RangeControl
-							label={ __( 'Columns' ) }
-							value={ displayLayout.columns }
-							onChange={ ( value ) =>
-								setDisplayLayout( { columns: value } )
-							}
-							min={ 2 }
-							max={ Math.max( 6, displayLayout.columns ) }
-						/>
-						{ displayLayout.columns > 6 && (
-							<Notice status="warning" isDismissible={ false }>
-								{ __(
-									'This column count exceeds the recommended amount and may cause visual breakage.'
-								) }
-							</Notice>
-						) }
-					</>
-				) }
-				{ ! inherit && (
-					<QueryControls
-						{ ...{ order, orderBy } }
-						onOrderChange={ ( value ) =>
-							setQuery( { order: value } )
-						}
-						onOrderByChange={ ( value ) =>
-							setQuery( { orderBy: value } )
-						}
-					/>
-				) }
-				{ showSticky && (
-					<SelectControl
-						label={ __( 'Sticky posts' ) }
-						options={ stickyOptions }
-						value={ sticky }
-						onChange={ ( value ) => setQuery( { sticky: value } ) }
-						help={ __(
-							'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
-						) }
-					/>
-				) }
-			</PanelBody>
-			{ ! inherit && (
-				<PanelBody title={ __( 'Filters' ) }>
-					{ showCategories && categories?.terms?.length > 0 && (
-						<FormTokenField
-							label={ __( 'Categories' ) }
-							value={ getExistingTermsFormTokenValue(
-								'category'
-							) }
-							suggestions={ categories.names }
-							onChange={ onCategoriesChange }
-						/>
-					) }
-					{ showTags && tags?.terms?.length > 0 && (
-						<FormTokenField
-							label={ __( 'Tags' ) }
-							value={ getExistingTermsFormTokenValue(
-								'post_tag'
-							) }
-							suggestions={ tags.names }
-							onChange={ onTagsChange }
-						/>
-					) }
-					<QueryControls
-						{ ...{ selectedAuthorId, authorList } }
-						onAuthorChange={ ( value ) =>
-							setQuery( {
-								author: value !== '' ? +value : undefined,
-							} )
-						}
-					/>
-					<TextControl
-						label={ __( 'Keyword' ) }
-						value={ querySearch }
-						onChange={ setQuerySearch }
-					/>
-				</PanelBody>
-			) }
-		</InspectorControls>
-	);
-}