Skip to content

HTML Block: Remove "unsaved changes" check #76086

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

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

HTML Block: Remove "unsaved changes" check #76086

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
316 changes: 121 additions & 195 deletions packages/block-library/src/html/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useSelect } from '@wordpress/data';
import {
Modal,
Button,
Flex,
Notice,
privateApis as componentsPrivateApis,
__experimentalHStack as HStack,
Expand Down Expand Up @@ -36,8 +35,6 @@ export default function HTMLEditModal( {
const [ editedHtml, setEditedHtml ] = useState( html );
const [ editedCss, setEditedCss ] = useState( css );
const [ editedJs, setEditedJs ] = useState( js );
const [ isDirty, setIsDirty ] = useState( false );
const [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );
const [ isFullscreen, setIsFullscreen ] = useState( false );

// Check if user has permission to save scripts and get editor styles
Expand All @@ -57,18 +54,6 @@ export default function HTMLEditModal( {
return null;
}

const handleHtmlChange = ( value ) => {
setEditedHtml( value );
setIsDirty( true );
};
const handleCssChange = ( value ) => {
setEditedCss( value );
setIsDirty( true );
};
const handleJsChange = ( value ) => {
setEditedJs( value );
setIsDirty( true );
};
const handleUpdate = () => {
// For users without unfiltered_html capability, strip CSS and JS content
// to prevent kses from leaving broken content
Expand All @@ -79,25 +64,6 @@ export default function HTMLEditModal( {
js: canUserUseUnfilteredHTML ? editedJs : '',
} ),
} );
setIsDirty( false );
};
const handleCancel = () => {
setIsDirty( false );
onRequestClose();
};
const handleRequestClose = () => {
if ( isDirty ) {
setShowUnsavedWarning( true );
} else {
onRequestClose();
}
};
const handleDiscardChanges = () => {
setShowUnsavedWarning( false );
onRequestClose();
};
const handleContinueEditing = () => {
setShowUnsavedWarning( false );
};
const handleUpdateAndClose = () => {
handleUpdate();
Expand All @@ -108,187 +74,147 @@ export default function HTMLEditModal( {
};

return (
<>
<Modal
title={ __( 'Edit HTML' ) }
onRequestClose={ handleRequestClose }
className="block-library-html__modal"
size="large"
isDismissible={ false }
shouldCloseOnClickOutside={ ! isDirty }
shouldCloseOnEsc={ ! isDirty }
isFullScreen={ isFullscreen }
__experimentalHideHeader
>
<Tabs orientation="horizontal" defaultTabId="html">
<Grid
columns={ 1 }
templateRows="auto 1fr auto"
gap={ 4 }
style={ { height: '100%' } }
<Modal
title={ __( 'Edit HTML' ) }
onRequestClose={ onRequestClose }
className="block-library-html__modal"
size="large"
isDismissible={ false }
shouldCloseOnClickOutside={ false }
isFullScreen={ isFullscreen }
__experimentalHideHeader
>
<Tabs orientation="horizontal" defaultTabId="html">
<Grid
columns={ 1 }
templateRows="auto 1fr auto"
gap={ 4 }
style={ { height: '100%' } }
>
<HStack
justify="space-between"
className="block-library-html__modal-header"
>
<HStack
justify="space-between"
className="block-library-html__modal-header"
>
<div>
<Tabs.TabList>
<Tabs.Tab tabId="html">HTML</Tabs.Tab>
{ canUserUseUnfilteredHTML && (
<Tabs.Tab tabId="css">CSS</Tabs.Tab>
) }
{ canUserUseUnfilteredHTML && (
<Tabs.Tab tabId="js">
{ __( 'JavaScript' ) }
</Tabs.Tab>
) }
</Tabs.TabList>
</div>
<div>
<Button
__next40pxDefaultSize
icon={ isFullscreen ? square : fullscreen }
label={ __( 'Enable/disable fullscreen' ) }
onClick={ toggleFullscreen }
variant="tertiary"
/>
</div>
</HStack>
{ hasRestrictedContent && (
<Notice
status="warning"
isDismissible={ false }
className="block-library-html__modal-notice"
>
{ __(
'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'
<div>
<Tabs.TabList>
<Tabs.Tab tabId="html">HTML</Tabs.Tab>
{ canUserUseUnfilteredHTML && (
<Tabs.Tab tabId="css">CSS</Tabs.Tab>
) }
{ canUserUseUnfilteredHTML && (
<Tabs.Tab tabId="js">
{ __( 'JavaScript' ) }
</Tabs.Tab>
) }
</Notice>
) }
<HStack
alignment="stretch"
justify="flex-start"
spacing={ 4 }
className="block-library-html__modal-tabs"
</Tabs.TabList>
</div>
<div>
<Button
__next40pxDefaultSize
icon={ isFullscreen ? square : fullscreen }
label={ __( 'Enable/disable fullscreen' ) }
onClick={ toggleFullscreen }
variant="tertiary"
/>
</div>
</HStack>
{ hasRestrictedContent && (
<Notice
status="warning"
isDismissible={ false }
className="block-library-html__modal-notice"
>
<div className="block-library-html__modal-content">
{ __(
'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'
) }
</Notice>
) }
<HStack
alignment="stretch"
justify="flex-start"
spacing={ 4 }
className="block-library-html__modal-tabs"
>
<div className="block-library-html__modal-content">
<Tabs.TabPanel
tabId="html"
focusable={ false }
className="block-library-html__modal-tab"
>
<PlainText
value={ editedHtml }
onChange={ setEditedHtml }
placeholder={ __( 'Write HTML…' ) }
aria-label={ __( 'HTML' ) }
className="block-library-html__modal-editor"
/>
</Tabs.TabPanel>
{ canUserUseUnfilteredHTML && (
<Tabs.TabPanel
tabId="html"
tabId="css"
focusable={ false }
className="block-library-html__modal-tab"
>
<PlainText
value={ editedHtml }
onChange={ handleHtmlChange }
placeholder={ __( 'Write HTML…' ) }
aria-label={ __( 'HTML' ) }
value={ editedCss }
onChange={ setEditedCss }
placeholder={ __( 'Write CSS…' ) }
aria-label={ __( 'CSS' ) }
className="block-library-html__modal-editor"
/>
</Tabs.TabPanel>
{ canUserUseUnfilteredHTML && (
<Tabs.TabPanel
tabId="css"
focusable={ false }
className="block-library-html__modal-tab"
>
<PlainText
value={ editedCss }
onChange={ handleCssChange }
placeholder={ __( 'Write CSS…' ) }
aria-label={ __( 'CSS' ) }
className="block-library-html__modal-editor"
/>
</Tabs.TabPanel>
) }
{ canUserUseUnfilteredHTML && (
<Tabs.TabPanel
tabId="js"
focusable={ false }
className="block-library-html__modal-tab"
>
<PlainText
value={ editedJs }
onChange={ handleJsChange }
placeholder={ __(
'Write JavaScript…'
) }
aria-label={ __( 'JavaScript' ) }
className="block-library-html__modal-editor"
/>
</Tabs.TabPanel>
) }
</div>
<div className="block-library-html__preview">
<Preview
content={ serializeContent( {
html: editedHtml,
css: editedCss,
js: editedJs,
} ) }
/>
</div>
</HStack>
<HStack
alignment="center"
justify="flex-end"
spacing={ 4 }
className="block-library-html__modal-footer"
>
<Button
__next40pxDefaultSize
variant="tertiary"
onClick={ handleCancel }
>
{ __( 'Cancel' ) }
</Button>
<Button
__next40pxDefaultSize
variant="primary"
onClick={ handleUpdateAndClose }
>
{ __( 'Update' ) }
</Button>
</HStack>
</Grid>
</Tabs>
</Modal>

{ showUnsavedWarning && (
<Modal
title={ __( 'Unsaved changes' ) }
onRequestClose={ handleContinueEditing }
size="medium"
>
<p>
{ __(
'You have unsaved changes. What would you like to do?'
) }
</p>
<Flex direction="row" justify="flex-end" gap={ 2 }>
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ handleDiscardChanges }
>
{ __( 'Discard unsaved changes' ) }
</Button>
) }
{ canUserUseUnfilteredHTML && (
<Tabs.TabPanel
tabId="js"
focusable={ false }
className="block-library-html__modal-tab"
>
<PlainText
value={ editedJs }
onChange={ setEditedJs }
placeholder={ __(
'Write JavaScript…'
) }
aria-label={ __( 'JavaScript' ) }
className="block-library-html__modal-editor"
/>
</Tabs.TabPanel>
) }
</div>
<div className="block-library-html__preview">
<Preview
content={ serializeContent( {
html: editedHtml,
css: editedCss,
js: editedJs,
} ) }
/>
</div>
</HStack>
<HStack
alignment="center"
justify="flex-end"
spacing={ 4 }
className="block-library-html__modal-footer"
>
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ handleContinueEditing }
variant="tertiary"
onClick={ onRequestClose }
>
{ __( 'Continue editing' ) }
{ __( 'Cancel' ) }
</Button>
<Button
__next40pxDefaultSize
variant="primary"
onClick={ handleUpdateAndClose }
>
{ __( 'Update and close' ) }
{ __( 'Update' ) }
</Button>
</Flex>
</Modal>
) }
</>
</HStack>
</Grid>
</Tabs>
</Modal>
);
}
Loading