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

Improve Custom HTML Block so preview mode persists on save. #46834

Open
wants to merge 11 commits into
base: trunk
Choose a base branch
from
+21 −33
Open

Improve Custom HTML Block so preview mode persists on save. #46834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
46c3655
Update core-blocks.md with preview as attribute for HTML Block.
mauteri Dec 31, 2022
d2eebf1
Update unit test.
mauteri Dec 31, 2022
a959a43
Merge branch 'trunk' of github.com:mauteri/gutenberg into improve/htm…
mauteri Jan 6, 2023
5f75406
Change preview to isPreview; Small cleanup.
mauteri Jan 6, 2023
5cef485
Resolved conflicts; changed HTML to Edit; added overlay to preview on…
mauteri Feb 11, 2024
d1aff88
This file should not have changed.
mauteri Feb 11, 2024
0788829
Remove extra line break.
mauteri Feb 12, 2024
6505b51
Fix conflict, remove lint-staged-typecheck for now as it keeps failing.
mauteri May 6, 2024
bf269b9
Removed hover CSS; removed Disabled per Alex Stine.
mauteri May 6, 2024
e35cc45
Revert package.json in attempt to fix commit issue.
mauteri May 7, 2024
534696e
Merge branch 'trunk' of github.com:mauteri/gutenberg into improve/htm…
mauteri May 8, 2024
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
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ Add custom HTML code and preview it as you edit. ([Source](https://github.com/Wo
- **Name:** core/html
- **Category:** widgets
- **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
- **Attributes:** content
- **Attributes:** content, isPreview

## Image

Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/html/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
"content": {
"type": "string",
"source": "raw"
},
"isPreview": {
"type": "boolean",
"default": false
}
},
"supports": {
Expand Down
28 changes: 7 additions & 21 deletions packages/block-library/src/html/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useContext, useState } from '@wordpress/element';
import {
BlockControls,
PlainText,
useBlockProps,
} from '@wordpress/block-editor';
import {
ToolbarButton,
Disabled,
ToolbarGroup,
VisuallyHidden,
} from '@wordpress/components';
Expand All @@ -22,43 +20,31 @@ import { useInstanceId } from '@wordpress/compose';
import Preview from './preview';

export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
const [ isPreview, setIsPreview ] = useState();
const isDisabled = useContext( Disabled.Context );

const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );

function switchToPreview() {
setIsPreview( true );
}

function switchToHTML() {
setIsPreview( false );
}

const blockProps = useBlockProps( {
className: 'block-library-html__edit',
'aria-describedby': isPreview ? instanceId : undefined,
'aria-describedby': attributes.isPreview ? instanceId : undefined,
} );

return (
<div { ...blockProps }>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
isPressed={ ! isPreview }
onClick={ switchToHTML }
isPressed={ ! attributes.isPreview }
onClick={ () => setAttributes( { isPreview: false } ) }
>
HTML
{ __( 'Edit' ) }
</ToolbarButton>
<ToolbarButton
isPressed={ isPreview }
onClick={ switchToPreview }
isPressed={ attributes.isPreview }
onClick={ () => setAttributes( { isPreview: true } ) }
>
{ __( 'Preview' ) }
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
{ isPreview || isDisabled ? (
{ attributes.isPreview ? (
<>
<Preview
content={ attributes.content }
Expand Down
17 changes: 7 additions & 10 deletions packages/edit-site/lib/unbrotli.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,12 +332,11 @@
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
1, 0, 1, 0, 1, 0, 1, /* UTF8 lead byte range. */
1, 0, 1, 0, 1, 0, 1 /* UTF8 lead byte range. */, 2, 3,
2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2,
3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3,
2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2,
3, 2, 3, 2, 3, 2, 3,
/* CONTEXT_UTF8 second last byte. */
3, 2, 3, 2, 3, /* CONTEXT_UTF8 second last byte. */
/* ASCII range. */
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1,
Expand All @@ -351,11 +350,10 @@
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, /* UTF8 lead byte range. */
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2,
0, 0, 0, 0 /* UTF8 lead byte range. */, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
/* CONTEXT_SIGNED, second last byte. */
2, 2, 2, 2, 2, /* CONTEXT_SIGNED, second last byte. */
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
Expand Down Expand Up @@ -447,9 +445,8 @@

exports.lookupOffsets = new Uint16Array( [
/* CONTEXT_LSB6 */
1024, 1536, /* CONTEXT_MSB6 */
1280, 1536, /* CONTEXT_UTF8 */
0, 256, /* CONTEXT_SIGNED */
1024, 1536 /* CONTEXT_MSB6 */, 1280,
1536 /* CONTEXT_UTF8 */, 0, 256 /* CONTEXT_SIGNED */,
768, 512,
] );
},
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__html.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"name": "core/html",
"isValid": true,
"attributes": {
"content": "<h1>Some HTML code</h1>\n<div>This is a div</div>"
"content": "<h1>Some HTML code</h1>\n<div>This is a div</div>",
"isPreview": false
},
"innerBlocks": []
}
Expand Down
Loading