Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls #58207
There are no files selected for viewing
This file contains 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 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 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,30 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| const MIN_OFFSET = 0; | ||
| const MAX_OFFSET = 100; | ||
|
|
||
| export const OffsetControl = ( { offset = 0, onChange } ) => { | ||
| return ( | ||
| <NumberControl | ||
| label={ __( 'Offset' ) } | ||
| value={ offset } | ||
| min={ MIN_OFFSET } | ||
| onChange={ ( newOffset ) => { | ||
| if ( | ||
| isNaN( newOffset ) || | ||
| newOffset < MIN_OFFSET || | ||
| newOffset > MAX_OFFSET | ||
| ) { | ||
| return; | ||
| } | ||
| onChange( { offset: newOffset } ); | ||
| } } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default OffsetControl; |
This file contains 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,26 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| export const PagesControl = ( { pages, onChange } ) => { | ||
| return ( | ||
| <NumberControl | ||
| label={ __( 'Max Pages to Show' ) } | ||
| value={ pages } | ||
| min={ 0 } | ||
| onChange={ ( newPages ) => { | ||
| if ( isNaN( newPages ) || newPages < 0 ) { | ||
| return; | ||
| } | ||
| onChange( { pages: newPages } ); | ||
| } } | ||
| help={ __( | ||
| 'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).' | ||
| ) } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default PagesControl; |
This file contains 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,31 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { RangeControl } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| const MIN_POSTS_PER_PAGE = 1; | ||
| const MAX_POSTS_PER_PAGE = 100; | ||
|
|
||
| const PerPageControl = ( { perPage, offset = 0, onChange } ) => { | ||
| return ( | ||
| <RangeControl | ||
| label={ __( 'Items Per Page' ) } | ||
| min={ MIN_POSTS_PER_PAGE } | ||
| max={ MAX_POSTS_PER_PAGE } | ||
| onChange={ ( newPerPage ) => { | ||
| if ( | ||
| isNaN( newPerPage ) || | ||
| newPerPage < MIN_POSTS_PER_PAGE || | ||
| newPerPage > MAX_POSTS_PER_PAGE | ||
| ) { | ||
| return; | ||
| } | ||
| onChange( { perPage: newPerPage, offset } ); | ||
| } } | ||
| value={ parseInt( perPage, 10 ) } | ||
|
There was a problem hiding this comment. I think the There was a problem hiding this comment.
Yes, I noticed in the current implementation on trunk these values do have checks for More work for next week 🍹 There was a problem hiding this comment. I've added these back now. |
||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default PerPageControl; | ||
This file contains 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 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,28 @@ | ||
| <?php | ||
| /** | ||
| * Plugin Name: Gutenberg Test Observe Typing | ||
| * Plugin URI: https://github.com/WordPress/gutenberg | ||
| * Author: Gutenberg Team | ||
| * | ||
| * @package gutenberg-test-block-api | ||
| */ | ||
|
|
||
| /** | ||
| * Registers a custom script for the plugin. | ||
| */ | ||
| function enqueue_observe_typing_plugin_script() { | ||
| wp_enqueue_script( | ||
| 'gutenberg-test-observe-typing', | ||
| plugins_url( 'observe-typing/index.js', __FILE__ ), | ||
| array( | ||
| 'wp-blocks', | ||
| 'wp-block-editor', | ||
| 'wp-components', | ||
| 'wp-element' | ||
| ), | ||
| filemtime( plugin_dir_path( __FILE__ ) . 'observe-typing/index.js' ), | ||
| true | ||
| ); | ||
| } | ||
|
|
||
| add_action( 'init', 'enqueue_observe_typing_plugin_script' ); | ||
This file contains 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,45 @@ | ||
| ( function () { | ||
| const { registerBlockType } = wp.blocks; | ||
| const { useBlockProps, BlockControls } = wp.blockEditor; | ||
| const { Dropdown, ToolbarButton, TextControl } = wp.components; | ||
| const { createElement: el, useState } = wp.element; | ||
|
|
||
| registerBlockType( 'e2e-tests/observe-typing', { | ||
| apiVersion: 3, | ||
| title: 'Observe Typing', | ||
| description: 'Observe Typing test block.', | ||
| category: 'widgets', | ||
| edit: function Edit() { | ||
| const [ value, setValue ] = useState( '' ); | ||
| const blockProps = useBlockProps(); | ||
|
|
||
| return el( | ||
| 'div', | ||
| blockProps, | ||
| el( | ||
| BlockControls, | ||
| { group: 'block' }, | ||
| el( Dropdown, { | ||
| renderToggle: ( { onToggle } ) => | ||
| el( | ||
| ToolbarButton, | ||
| { | ||
| onClick: onToggle, | ||
| }, | ||
| 'Open Dropdown' | ||
| ), | ||
| renderContent: () => | ||
| el( TextControl, { | ||
| label: 'Dropdown field', | ||
| value, | ||
| onChange: setValue, | ||
| __next40pxDefaultSize: true, | ||
| } ), | ||
| } ) | ||
| ), | ||
| el( 'p', {}, 'Hello Editor!' ) | ||
| ); | ||
| }, | ||
| save: () => null, | ||
| } ); | ||
| } )(); |
Oops, something went wrong.
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.
Nit (non-blocking): There is probably no need to create wrappers for simple components like -
PerPageControl,OffsetControlandPagesControl.This is mostly my personal preference. Feel free to ignore it :)
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.
I went with wrappers to reduce the size of the
index.jsfor this section. I guess its number of files vs lines of code. I'm happy either way, but if these components get more complicated, it would be nice to abstract that out of the main file.