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.

Sign up for GitHub

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

Fixed non-existing path issue #67773

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Fixed non-existing path issue #67773

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
107 changes: 81 additions & 26 deletions packages/edit-site/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,43 +25,98 @@ import { store as editSiteStore } from './store';
import { unlock } from './lock-unlock';
import App from './components/app';

const { registerCoreBlockBindingsSources } = unlock( editorPrivateApis );
const { registerCoreBlockBindingsSources } = unlock(editorPrivateApis);

/**
* Checks if the given path exists.
*
* @param {string} path The path to check.
* @return {boolean} True if the path exists, false otherwise.
*/
async function checkPathExists(path) {
const response = await fetch(`/wp-json/wp/v2/templates${path}`);
return response.ok;
}
Comment on lines +36 to +39
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting idea, though I this can be implemented as part of the routing code to avoid the need to fetch asynchronously. In the site editor the routing is implemented here:

gutenberg/packages/edit-site/src/components/app/index.js

Lines 53 to 60 in 358fe48

return (
<RouterProvider
routes={ routes }
pathArg="p"
beforeNavigate={ beforeNavigate }
>
<AppLayout />
</RouterProvider>

The routes come from this file:
https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/components/site-editor-routes/index.js

The implementation is using the router package as a library. I can see that there's some handling for 404 here:

gutenberg/packages/router/src/router.tsx

Lines 163 to 172 in 8e048a8

if ( ! result ) {
return {
name: '404',
path: addQueryArgs( path, query ),
areas: {},
widths: {},
query,
params: {},
};
}

I'm not familiar with the code though, so I don't know how to make this display something. Perhaps it should be possible to define a 404 route in the site editor package


/**
* Initializes the site editor screen.
*
* @param {string} id ID of the root element to render the screen in.
* @param {Object} settings Editor settings.
*/
export function initializeEditor( id, settings ) {
const target = document.getElementById( id );
const root = createRoot( target );
export async function initializeEditor(id, settings) {
const target = document.getElementById(id);
const root = createRoot(target);
// Extract the 'p' parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const path = urlParams.get('p');

// Decode the URI component for the path
const decodedPath = decodeURIComponent(path || '');

if (decodedPath && !(await checkPathExists(decodedPath))) {
// Render a "Not Found" message
root.render(
<StrictMode>
<div
style={{
textAlign: 'center',
marginTop: '50px',
fontSize: '24px',
color: '#fff',
}}
>
<strong>404:</strong> Template Not Found
<div style={{ marginTop: '20px' }}>
<button
onClick={() => {
// Redirect to the site editor
window.location.href = '/wp-admin/site-editor.php';
}}
style={{
padding: '10px 20px',
backgroundColor: '#0073aa',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '16px',
}}
>
Go to Site Editor
</button>
</div>
</div>
</StrictMode>
);
return root;
}

dispatch( blocksStore ).reapplyBlockTypeFilters();
dispatch(blocksStore).reapplyBlockTypeFilters();
const coreBlocks = __experimentalGetCoreBlocks().filter(
( { name } ) => name !== 'core/freeform'
({ name }) => name !== 'core/freeform'
);
registerCoreBlocks( coreBlocks );
registerCoreBlocks(coreBlocks);
registerCoreBlockBindingsSources();
dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
registerLegacyWidgetBlock( { inserter: false } );
registerWidgetGroupBlock( { inserter: false } );
if ( globalThis.IS_GUTENBERG_PLUGIN ) {
__experimentalRegisterExperimentalCoreBlocks( {
dispatch(blocksStore).setFreeformFallbackBlockName('core/html');
registerLegacyWidgetBlock({ inserter: false });
registerWidgetGroupBlock({ inserter: false });
if (globalThis.IS_GUTENBERG_PLUGIN) {
__experimentalRegisterExperimentalCoreBlocks({
enableFSEBlocks: true,
} );
});
}

// We dispatch actions and update the store synchronously before rendering
// so that we won't trigger unnecessary re-renders with useEffect.
dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
dispatch(preferencesStore).setDefaults('core/edit-site', {
welcomeGuide: true,
welcomeGuideStyles: true,
welcomeGuidePage: true,
welcomeGuideTemplate: true,
} );
});

dispatch( preferencesStore ).setDefaults( 'core', {
dispatch(preferencesStore).setDefaults('core', {
allowRightClickOverrides: true,
distractionFree: false,
editorMode: 'visual',
Expand All @@ -70,24 +125,24 @@ export function initializeEditor( id, settings ) {
focusMode: false,
inactivePanels: [],
keepCaretInsideBlock: false,
openPanels: [ 'post-status' ],
openPanels: ['post-status'],
showBlockBreadcrumbs: true,
showListViewByDefault: false,
enableChoosePatternModal: true,
} );
});

if ( window.__experimentalMediaProcessing ) {
dispatch( preferencesStore ).setDefaults( 'core/media', {
if (window.__experimentalMediaProcessing) {
dispatch(preferencesStore).setDefaults('core/media', {
requireApproval: true,
optimizeOnUpload: true,
} );
});
}

dispatch( editSiteStore ).updateSettings( settings );
dispatch(editSiteStore).updateSettings(settings);

// Prevent the default browser action for files dropped outside of dropzones.
window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
window.addEventListener('dragover', (e) => e.preventDefault(), false);
window.addEventListener('drop', (e) => e.preventDefault(), false);

root.render(
<StrictMode>
Expand All @@ -99,10 +154,10 @@ export function initializeEditor( id, settings ) {
}

export function reinitializeEditor() {
deprecated( 'wp.editSite.reinitializeEditor', {
deprecated('wp.editSite.reinitializeEditor', {
since: '6.2',
version: '6.3',
} );
});
}

export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
Expand Down
Loading