From c82a6291c6cfa84f18a7d71ce8d00f329b39e3ac Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 5 Oct 2024 11:27:53 +0900 Subject: [PATCH 1/5] Post Editor: Always force iframe in pattern editor --- packages/editor/src/components/visual-editor/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 88d2dac8ffd77..65aed2f878f72 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -359,7 +359,9 @@ function VisualEditor( { // Dsiable resizing in zoomed-out mode. ! isZoomedOut; const shouldIframe = - ! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType ); + ! disableIframe || + [ 'Tablet', 'Mobile' ].includes( deviceType ) || + PATTERN_POST_TYPE === postType; const iframeStyles = useMemo( () => { return [ From 5da84337c5d2845489f0a0e8ebc3d728898deee3 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 8 Oct 2024 16:36:03 +0900 Subject: [PATCH 2/5] Aggregate conditions into useShouldIframe hook --- .../edit-post/src/components/layout/use-should-iframe.js | 8 +++++--- packages/editor/src/components/visual-editor/index.js | 8 ++------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index e36a4773c4a1f..f6ce9a532c5d6 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -12,7 +12,7 @@ export function useShouldIframe() { const { isBlockBasedTheme, hasV3BlocksOnly, - isEditingTemplate, + isEditingTemplateOrPattern, isZoomOutMode, } = useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType } = select( editorStore ); @@ -24,7 +24,9 @@ export function useShouldIframe() { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - isEditingTemplate: getCurrentPostType() === 'wp_template', + isEditingTemplateOrPattern: [ 'wp_template', 'wp_block' ].includes( + getCurrentPostType() + ), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -32,7 +34,7 @@ export function useShouldIframe() { return ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) || - isEditingTemplate || + isEditingTemplateOrPattern || isZoomOutMode ); } diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 65aed2f878f72..a3ddc33d2abf0 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -358,10 +358,6 @@ function VisualEditor( { ! isMobileViewport && // Dsiable resizing in zoomed-out mode. ! isZoomedOut; - const shouldIframe = - ! disableIframe || - [ 'Tablet', 'Mobile' ].includes( deviceType ) || - PATTERN_POST_TYPE === postType; const iframeStyles = useMemo( () => { return [ @@ -386,7 +382,7 @@ function VisualEditor( { { 'has-padding': isFocusedEntity || enableResizing, 'is-resizable': enableResizing, - 'is-iframed': shouldIframe, + 'is-iframed': ! disableIframe, } ) } > @@ -397,7 +393,7 @@ function VisualEditor( { } > Date: Tue, 8 Oct 2024 17:33:17 +0900 Subject: [PATCH 3/5] Revert "Aggregate conditions into useShouldIframe hook" This reverts commit 5da84337c5d2845489f0a0e8ebc3d728898deee3. --- .../edit-post/src/components/layout/use-should-iframe.js | 8 +++----- packages/editor/src/components/visual-editor/index.js | 8 ++++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index f6ce9a532c5d6..e36a4773c4a1f 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -12,7 +12,7 @@ export function useShouldIframe() { const { isBlockBasedTheme, hasV3BlocksOnly, - isEditingTemplateOrPattern, + isEditingTemplate, isZoomOutMode, } = useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType } = select( editorStore ); @@ -24,9 +24,7 @@ export function useShouldIframe() { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - isEditingTemplateOrPattern: [ 'wp_template', 'wp_block' ].includes( - getCurrentPostType() - ), + isEditingTemplate: getCurrentPostType() === 'wp_template', isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -34,7 +32,7 @@ export function useShouldIframe() { return ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) || - isEditingTemplateOrPattern || + isEditingTemplate || isZoomOutMode ); } diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index a3ddc33d2abf0..65aed2f878f72 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -358,6 +358,10 @@ function VisualEditor( { ! isMobileViewport && // Dsiable resizing in zoomed-out mode. ! isZoomedOut; + const shouldIframe = + ! disableIframe || + [ 'Tablet', 'Mobile' ].includes( deviceType ) || + PATTERN_POST_TYPE === postType; const iframeStyles = useMemo( () => { return [ @@ -382,7 +386,7 @@ function VisualEditor( { { 'has-padding': isFocusedEntity || enableResizing, 'is-resizable': enableResizing, - 'is-iframed': ! disableIframe, + 'is-iframed': shouldIframe, } ) } > @@ -393,7 +397,7 @@ function VisualEditor( { } > Date: Tue, 8 Oct 2024 16:36:03 +0900 Subject: [PATCH 4/5] Aggregate conditions into useShouldIframe hook --- .../edit-post/src/components/layout/use-should-iframe.js | 8 +++++--- packages/editor/src/components/visual-editor/index.js | 8 ++------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index e36a4773c4a1f..f6ce9a532c5d6 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -12,7 +12,7 @@ export function useShouldIframe() { const { isBlockBasedTheme, hasV3BlocksOnly, - isEditingTemplate, + isEditingTemplateOrPattern, isZoomOutMode, } = useSelect( ( select ) => { const { getEditorSettings, getCurrentPostType } = select( editorStore ); @@ -24,7 +24,9 @@ export function useShouldIframe() { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - isEditingTemplate: getCurrentPostType() === 'wp_template', + isEditingTemplateOrPattern: [ 'wp_template', 'wp_block' ].includes( + getCurrentPostType() + ), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', }; }, [] ); @@ -32,7 +34,7 @@ export function useShouldIframe() { return ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) || - isEditingTemplate || + isEditingTemplateOrPattern || isZoomOutMode ); } diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 65aed2f878f72..a3ddc33d2abf0 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -358,10 +358,6 @@ function VisualEditor( { ! isMobileViewport && // Dsiable resizing in zoomed-out mode. ! isZoomedOut; - const shouldIframe = - ! disableIframe || - [ 'Tablet', 'Mobile' ].includes( deviceType ) || - PATTERN_POST_TYPE === postType; const iframeStyles = useMemo( () => { return [ @@ -386,7 +382,7 @@ function VisualEditor( { { 'has-padding': isFocusedEntity || enableResizing, 'is-resizable': enableResizing, - 'is-iframed': shouldIframe, + 'is-iframed': ! disableIframe, } ) } > @@ -397,7 +393,7 @@ function VisualEditor( { } > Date: Thu, 17 Oct 2024 19:27:09 +0900 Subject: [PATCH 5/5] Add device type check to useShouldIframe check --- .../edit-post/src/components/layout/use-should-iframe.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js index f6ce9a532c5d6..a10febc63d39e 100644 --- a/packages/edit-post/src/components/layout/use-should-iframe.js +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -14,8 +14,10 @@ export function useShouldIframe() { hasV3BlocksOnly, isEditingTemplateOrPattern, isZoomOutMode, + deviceType, } = useSelect( ( select ) => { - const { getEditorSettings, getCurrentPostType } = select( editorStore ); + const { getEditorSettings, getCurrentPostType, getDeviceType } = + select( editorStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const { getBlockTypes } = select( blocksStore ); const editorSettings = getEditorSettings(); @@ -28,6 +30,7 @@ export function useShouldIframe() { getCurrentPostType() ), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', + deviceType: getDeviceType(), }; }, [] ); @@ -35,6 +38,7 @@ export function useShouldIframe() { hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) || isEditingTemplateOrPattern || - isZoomOutMode + isZoomOutMode || + [ 'Tablet', 'Mobile' ].includes( deviceType ) ); }