Query Title: add Search and 404 page titles #33515
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,49 +6,102 @@ import classnames from 'classnames'; | |
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { | ||
| AlignmentControl, | ||
| BlockControls, | ||
| useBlockProps, | ||
| Warning, | ||
| store as blockEditorStore, | ||
| InspectorControls, | ||
| } from '@wordpress/block-editor'; | ||
| import { TextControl, PanelBody } from '@wordpress/components'; | ||
| import { __, _x } from '@wordpress/i18n'; | ||
| import { useEffect } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import HeadingLevelDropdown from '../heading/heading-level-dropdown'; | ||
|
|
||
| const SUPPORTED_TEMPLATES = [ 'archive', 'search', '404', 'index' ]; | ||
|
|
||
| export default function QueryTitleEdit( { | ||
| attributes: { content, searchTitle, nothingFoundTitle, level, textAlign }, | ||
| setAttributes, | ||
| context: { templateSlug }, | ||
| } ) { | ||
| const TagName = `h${ level }`; | ||
| const blockProps = useBlockProps( { | ||
| className: classnames( 'wp-block-query-title__placeholder', { | ||
| [ `has-text-align-${ textAlign }` ]: textAlign, | ||
| } ), | ||
| } ); | ||
| const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( | ||
| blockEditorStore | ||
| ); | ||
| let titleContent; | ||
|
|
||
| // translators: Title for index template. | ||
| const defaultTitle = _x( | ||
| 'Query title placeholder', | ||
| 'index template title' | ||
| ); | ||
|
|
||
| // translators: Title for archive template. | ||
| const defaultArchiveTitle = _x( | ||
| 'Archive title placeholder', | ||
| 'archive template title' | ||
| ); | ||
|
|
||
| // translators: Title for 404 template. | ||
| const defaultNothingFoundTitle = _x( | ||
| 'Nothing found', | ||
| '404 template title' | ||
| ); | ||
|
|
||
| // translators: Title for search template with dynamic content placeholders. | ||
| const defaultSearchTitle = _x( | ||
| 'Search results for "%search%"', | ||
| 'search template title' | ||
| ); | ||
|
|
||
| // Infer title content from template slug context | ||
| switch ( templateSlug ) { | ||
| case 'archive': | ||
| titleContent = defaultArchiveTitle; | ||
| break; | ||
| case 'search': | ||
| titleContent = searchTitle; | ||
| break; | ||
| case '404': | ||
| titleContent = nothingFoundTitle; | ||
| break; | ||
| default: | ||
| titleContent = content; | ||
| break; | ||
| } | ||
|
|
||
| const titleElement = <TagName { ...blockProps }>{ titleContent }</TagName>; | ||
|
|
||
| // Update content based on current template | ||
| useEffect( () => { | ||
|
There was a problem hiding this comment. This seems hacky to me 😄 . We use React's implementation details to update the content after the first render and by updating the An alternative, if this approach is preferred, is to use There was a problem hiding this comment. Haha I wasn't sure where else to turn so I jumped to As soon as I moved this logic from the variations file to edit.js, I could see the advantage of using variations. However, as @scruffian has just mentioned above, I think the advantage to not using variations is that the user (or a theme) only needs to insert one block, and the block works the content out itself based on context (i.e. the template). With that in mind, I'm going to attempt your suggested alternative. Thanks for the suggestion and input, it's really helped me understand this more. |
||
| __unstableMarkNextChangeAsNotPersistent(); | ||
| setAttributes( { | ||
| content: defaultTitle, | ||
| searchTitle: defaultSearchTitle, | ||
| nothingFoundTitle: defaultNothingFoundTitle, | ||
| } ); | ||
| }, [] ); | ||
|
|
||
| if ( ! SUPPORTED_TEMPLATES.includes( templateSlug ) ) { | ||
| return ( | ||
| <div { ...blockProps }> | ||
| <Warning>{ __( 'Template is not supported.' ) }</Warning> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <BlockControls group="block"> | ||
|
|
@@ -65,6 +118,32 @@ export default function QueryTitleEdit( { | |
| } } | ||
| /> | ||
| </BlockControls> | ||
| <InspectorControls> | ||
| <PanelBody title={ __( 'Custom Title Contents' ) }> | ||
| <TextControl | ||
| label={ __( 'Search Page Title' ) } | ||
| help={ `${ __( | ||
| 'Edit the search template title. Dynamic content is available with: ' | ||
| ) } %search%, %total%` } | ||
| value={ searchTitle } | ||
| onChange={ ( value ) => | ||
| setAttributes( { | ||
| searchTitle: value, | ||
| } ) | ||
| } | ||
| /> | ||
| <TextControl | ||
| label={ __( '404 Page Title' ) } | ||
| help={ __( 'Edit the 404 template title.' ) } | ||
| value={ nothingFoundTitle } | ||
| onChange={ ( value ) => | ||
| setAttributes( { | ||
| nothingFoundTitle: value, | ||
| } ) | ||
| } | ||
| /> | ||
| </PanelBody> | ||
| </InspectorControls> | ||
| { titleElement } | ||
| </> | ||
| ); | ||
|
|
||
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 |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { archiveTitle as icon } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import metadata from './block.json'; | ||
| import edit from './edit'; | ||
|
|
||
| const { name } = metadata; | ||
| export { metadata, name }; | ||
|
|
||
| export const settings = { | ||
| icon, | ||
| edit, | ||
| }; |
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
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.
I'd avoid non-translatable default values in
block.jsonattributes.Put the default text in the edit component instead and make it translatable.