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

Update: Rephrase "Force page reload" and move to Advanced #65081

Merged
merged 5 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from 3 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 @@ -42,7 +42,7 @@ export default function EnhancedPaginationModal( {
};

let notice = __(
'If you still want to prevent full page reloads, remove that block, then disable "Force page reload" again in the Query Block settings.'
'If you still want to prevent full page reloads, remove that block, then disable "Reload full page" again in the Query Block settings.'
);
if ( hasBlocksFromPlugins ) {
notice =
Expand All @@ -63,7 +63,7 @@ export default function EnhancedPaginationModal( {
return (
isOpen && (
<Modal
title={ __( 'Query block: Force page reload enabled' ) }
title={ __( 'Query block: Reload full page enabled' ) }
className="wp-block-query__enhanced-pagination-modal"
aria={ {
describedby: modalDescriptionId,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@ export default function EnhancedPaginationControl( {
);
} else if ( enhancedPagination ) {
help = __(
"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is correct.

);
} else if ( hasUnsupportedBlocks ) {
help = __(
"Force page reload can't be disabled because there are non-compatible blocks inside the Query block."
"Reload full page can't be disabled because there are non-compatible blocks inside the Query block."
jasmussen marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

@gziolo gziolo Sep 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One important note. When there are non-compatible blocks, then the full page navigation, as in older WordPress versions, needs to happen. I think it's what it says but it's still confusing for me. Eventually, we should aim to remove this compatibility check and instead handle everything on the front end using a progressive enhancement approach. For example, when the partial page change withouth full reload is enabled, we try to go to the next page and if Interactivity API detects something went wrong, it should fall back to the usual behavior when someone click a link.

);
}

return (
<>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Force page reload' ) }
label={ __( 'Reload full page' ) }
help={ help }
checked={
! enhancedPagination && ! fullPageClientSideNavigation
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import AuthorControl from './author-control';
import ParentControl from './parent-control';
import { TaxonomyControls } from './taxonomy-controls';
import StickyControl from './sticky-control';
import EnhancedPaginationControl from './enhanced-pagination-control';
import CreateNewPostLink from './create-new-post-link';
import PerPageControl from './per-page-control';
import OffsetControl from './offset-controls';
Expand All @@ -43,9 +42,8 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
const { BlockInfo } = unlock( blockEditorPrivateApis );

export default function QueryInspectorControls( props ) {
const { attributes, setQuery, setDisplayLayout, setAttributes, clientId } =
props;
const { query, displayLayout, enhancedPagination } = attributes;
const { attributes, setQuery, setDisplayLayout } = props;
const { query, displayLayout } = attributes;
const {
order,
orderBy,
Expand Down Expand Up @@ -262,11 +260,6 @@ export default function QueryInspectorControls( props ) {
}
/>
) }
<EnhancedPaginationControl
enhancedPagination={ enhancedPagination }
setAttributes={ setAttributes }
clientId={ clientId }
/>
</PanelBody>
) }
{ ! inherit && showDisplayPanel && (
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/query/edit/query-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
import QueryToolbar from './query-toolbar';
import QueryInspectorControls from './inspector-controls';
import EnhancedPaginationModal from './enhanced-pagination-modal';
Expand All @@ -36,6 +37,7 @@ export default function QueryContent( {
queryId,
query,
displayLayout,
enhancedPagination,
tagName: TagName = 'div',
query: { inherit } = {},
} = attributes;
Expand Down Expand Up @@ -161,6 +163,11 @@ export default function QueryContent( {
}
help={ htmlElementMessages[ TagName ] }
/>
<EnhancedPaginationControl
enhancedPagination={ enhancedPagination }
setAttributes={ setAttributes }
clientId={ clientId }
/>
</InspectorControls>
<TagName { ...innerBlocksProps } />
</>
Expand Down
Loading