From 8d644d8713591cae14d331ff2480236585ac1b8f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 26 Oct 2022 16:33:52 +1100 Subject: [PATCH 01/14] Try getting Post Content layout on server before editor loads --- .../wordpress-6.1/block-editor-settings.php | 17 ++++++ .../src/components/visual-editor/index.js | 57 +------------------ 2 files changed, 19 insertions(+), 55 deletions(-) diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php index cafe91e787dc6..c3beb02e13f0a 100644 --- a/lib/compat/wordpress-6.1/block-editor-settings.php +++ b/lib/compat/wordpress-6.1/block-editor-settings.php @@ -13,6 +13,23 @@ * @return array New block editor settings. */ function gutenberg_get_block_editor_settings( $settings ) { + global $post_id; + $template_slug = get_page_template_slug( $post_id ); + $current_template = gutenberg_get_block_templates( array( 'slug__in' => array( $template_slug ) ) ); + + if ( ! empty( $current_template ) ) { + $template_blocks = parse_blocks( $current_template[0]->content ); + $post_content_block = array(); + + foreach ( $template_blocks as $template_block ) { + if ( 'core/post-content' === $template_block['blockName'] ) { + $post_content_block = $template_block; + } + } + // mismatched naming x(. + $post_content_block['attributes'] = $post_content_block['attrs']; + $settings['postContentBlock'] = $post_content_block; + } // Set what is the context for this data request. $context = 'other'; if ( diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 5c4c167849692..f6cb4623e4f14 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -36,8 +36,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { arrowLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; -import { parse } from '@wordpress/blocks'; -import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -78,37 +76,12 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) { ); } -/** - * Given an array of nested blocks, find the first Post Content - * block inside it, recursing through any nesting levels. - * - * @param {Array} blocks A list of blocks. - * - * @return {Object | undefined} The Post Content block. - */ -function findPostContent( blocks ) { - for ( let i = 0; i < blocks.length; i++ ) { - if ( blocks[ i ].name === 'core/post-content' ) { - return blocks[ i ]; - } - if ( blocks[ i ].innerBlocks.length ) { - const nestedPostContent = findPostContent( - blocks[ i ].innerBlocks - ); - - if ( nestedPostContent ) { - return nestedPostContent; - } - } - } -} - export default function VisualEditor( { styles } ) { const { deviceType, isWelcomeGuideVisible, isTemplateMode, - editedPostTemplate = {}, + postContentBlock, wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, @@ -117,7 +90,6 @@ export default function VisualEditor( { styles } ) { isFeatureActive, isEditingTemplate, __experimentalGetPreviewDeviceType, - getEditedPostTemplate, } = select( editPostStore ); const { getCurrentPostId, getCurrentPostType, getEditorSettings } = select( editorStore ); @@ -131,22 +103,12 @@ export default function VisualEditor( { styles } ) { } const editorSettings = getEditorSettings(); - const supportsTemplateMode = editorSettings.supportsTemplateMode; - const canEditTemplate = select( coreStore ).canUser( - 'create', - 'templates' - ); return { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, - // Post template fetch returns a 404 on classic themes, which - // messes with e2e tests, so we check it's a block theme first. - editedPostTemplate: - supportsTemplateMode && canEditTemplate - ? getEditedPostTemplate() - : undefined, + postContentBlock: getEditorSettings().postContentBlock, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, @@ -230,21 +192,6 @@ export default function VisualEditor( { styles } ) { return { type: 'default' }; }, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] ); - const postContentBlock = useMemo( () => { - // When in template editing mode, we can access the blocks directly. - if ( editedPostTemplate?.blocks ) { - return findPostContent( editedPostTemplate?.blocks ); - } - // If there are no blocks, we have to parse the content string. - // Best double-check it's a string otherwise the parse function gets unhappy. - const parseableContent = - typeof editedPostTemplate?.content === 'string' - ? editedPostTemplate?.content - : ''; - - return findPostContent( parse( parseableContent ) ) || {}; - }, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] ); - const postContentLayoutClasses = useLayoutClasses( postContentBlock ); const blockListLayoutClass = classnames( From 58afc98b556af263bc1b2b0bbfbc3a012529db61 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Oct 2022 15:45:39 +1100 Subject: [PATCH 02/14] Add fallback template slug logic --- .../wordpress-6.1/block-editor-settings.php | 126 +++++++++++++----- 1 file changed, 94 insertions(+), 32 deletions(-) diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php index c3beb02e13f0a..4e2a754854446 100644 --- a/lib/compat/wordpress-6.1/block-editor-settings.php +++ b/lib/compat/wordpress-6.1/block-editor-settings.php @@ -14,21 +14,69 @@ */ function gutenberg_get_block_editor_settings( $settings ) { global $post_id; - $template_slug = get_page_template_slug( $post_id ); + + $template_slug = get_page_template_slug( $post_id ); + + if ( ! $template_slug ) { + $post_slug = 'singular'; + $page_slug = 'singular'; + $template_types = get_block_templates(); + + foreach ( $template_types as $template_type ) { + if ( 'page' === $template_type->slug ) { + $page_slug = 'page'; + } + if ( 'single' === $template_type->slug ) { + $post_slug = 'single'; + } + } + + $what_post_type = get_post_type( $post_id ); + switch ( $what_post_type ) { + case 'post': + $template_slug = $post_slug; + break; + case 'page': + $template_slug = $page_slug; + break; + } + } + $current_template = gutenberg_get_block_templates( array( 'slug__in' => array( $template_slug ) ) ); + /** + * Finds Post Content in an array of blocks + * + * @param array $blocks Array of blocks. + * + * @return array Post Content block. + */ + function get_post_content_block( $blocks ) { + foreach ( $blocks as $block ) { + if ( 'core/post-content' === $block['blockName'] ) { + return $block; + } + if ( ! empty( $block['innerBlocks'] ) ) { + $post_content = get_post_content_block( $block['innerBlocks'] ); + + if ( ! empty( $post_content ) ) { + return $post_content; + } + } + } + } + if ( ! empty( $current_template ) ) { $template_blocks = parse_blocks( $current_template[0]->content ); - $post_content_block = array(); + $post_content_block = get_post_content_block( $template_blocks ); - foreach ( $template_blocks as $template_block ) { - if ( 'core/post-content' === $template_block['blockName'] ) { - $post_content_block = $template_block; + if ( ! empty( $post_content_block ) ) { + // mismatched naming x(. + if ( empty( $post_content_block['attributes'] ) && ! empty( $post_content_block['attrs'] ) ) { + $post_content_block['attributes'] = $post_content_block['attrs']; } + $settings['postContentBlock'] = $post_content_block; } - // mismatched naming x(. - $post_content_block['attributes'] = $post_content_block['attrs']; - $settings['postContentBlock'] = $post_content_block; } // Set what is the context for this data request. $context = 'other'; @@ -43,21 +91,21 @@ function gutenberg_get_block_editor_settings( $settings ) { if ( 'other' === $context ) { global $wp_version; - $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' ); - $is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' ); + $is_wp_5_9 = version_compare( $wp_version, '5.9', ' >= ' ) && version_compare( $wp_version, '6.0 - beta1', ' < ' ); + $is_wp_6_0 = version_compare( $wp_version, '6.0 - beta1', ' >= ' ); // Make sure the styles array exists. - // In some contexts, like the navigation editor, it doesn't. + // In some contexts, like the navigation editor, it doesn't . if ( ! isset( $settings['styles'] ) ) { $settings['styles'] = array(); } - // Remove existing global styles provided by core. - $styles_without_existing_global_styles = array(); + // Remove existing global styles provided by core. + $styles_without_existing_global_styles = array(); foreach ( $settings['styles'] as $style ) { if ( - ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0. - ( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) ) + ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0. + ( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) ) ) { $styles_without_existing_global_styles[] = $style; } @@ -91,26 +139,40 @@ function gutenberg_get_block_editor_settings( $settings ) { '__unstableType' => 'theme', 'isGlobalStyles' => true, ); - $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); - if ( '' !== $actual_css ) { - $block_classes['css'] = $actual_css; - $new_global_styles[] = $block_classes; + foreach ( $presets as $preset_style ) { + $actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) ); + if ( '' !== $actual_css ) { + $preset_style['css'] = $actual_css; + $new_global_styles[] = $preset_style; + } } - } else { - // If there is no `theme.json` file, ensure base layout styles are still available. - $block_classes = array( - 'css' => 'base-layout-styles', - '__unstableType' => 'base-layout', - 'isGlobalStyles' => true, - ); - $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); - if ( '' !== $actual_css ) { - $block_classes['css'] = $actual_css; - $new_global_styles[] = $block_classes; + + if ( WP_Theme_JSON_Resolver::theme_has_support() ) { + $block_classes = array( + 'css' => 'styles', + '__unstableType' => 'theme', + 'isGlobalStyles' => true, + ); + $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); + if ( '' !== $actual_css ) { + $block_classes['css'] = $actual_css; + $new_global_styles[] = $block_classes; + } + } else { + // If there is no `theme.json` file, ensure base layout styles are still available. + $block_classes = array( + 'css' => 'base-layout-styles', + '__unstableType' => 'base-layout', + 'isGlobalStyles' => true, + ); + $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); + if ( '' !== $actual_css ) { + $block_classes['css'] = $actual_css; + $new_global_styles[] = $block_classes; + } } - } - $settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles ); + $settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles ); } // Copied from get_block_editor_settings() at wordpress-develop/block-editor.php. From 63b5cbced2cb01aac2a7c7c30dfbfff68f837f76 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 23 Feb 2023 15:16:57 +1100 Subject: [PATCH 03/14] Add block editor settings in new filter --- .../wordpress-6.1/block-editor-settings.php | 127 ++++-------------- lib/experimental/block-editor-settings.php | 91 +++++++++++++ lib/load.php | 1 + 3 files changed, 116 insertions(+), 103 deletions(-) create mode 100644 lib/experimental/block-editor-settings.php diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php index 4e2a754854446..cafe91e787dc6 100644 --- a/lib/compat/wordpress-6.1/block-editor-settings.php +++ b/lib/compat/wordpress-6.1/block-editor-settings.php @@ -13,71 +13,6 @@ * @return array New block editor settings. */ function gutenberg_get_block_editor_settings( $settings ) { - global $post_id; - - $template_slug = get_page_template_slug( $post_id ); - - if ( ! $template_slug ) { - $post_slug = 'singular'; - $page_slug = 'singular'; - $template_types = get_block_templates(); - - foreach ( $template_types as $template_type ) { - if ( 'page' === $template_type->slug ) { - $page_slug = 'page'; - } - if ( 'single' === $template_type->slug ) { - $post_slug = 'single'; - } - } - - $what_post_type = get_post_type( $post_id ); - switch ( $what_post_type ) { - case 'post': - $template_slug = $post_slug; - break; - case 'page': - $template_slug = $page_slug; - break; - } - } - - $current_template = gutenberg_get_block_templates( array( 'slug__in' => array( $template_slug ) ) ); - - /** - * Finds Post Content in an array of blocks - * - * @param array $blocks Array of blocks. - * - * @return array Post Content block. - */ - function get_post_content_block( $blocks ) { - foreach ( $blocks as $block ) { - if ( 'core/post-content' === $block['blockName'] ) { - return $block; - } - if ( ! empty( $block['innerBlocks'] ) ) { - $post_content = get_post_content_block( $block['innerBlocks'] ); - - if ( ! empty( $post_content ) ) { - return $post_content; - } - } - } - } - - if ( ! empty( $current_template ) ) { - $template_blocks = parse_blocks( $current_template[0]->content ); - $post_content_block = get_post_content_block( $template_blocks ); - - if ( ! empty( $post_content_block ) ) { - // mismatched naming x(. - if ( empty( $post_content_block['attributes'] ) && ! empty( $post_content_block['attrs'] ) ) { - $post_content_block['attributes'] = $post_content_block['attrs']; - } - $settings['postContentBlock'] = $post_content_block; - } - } // Set what is the context for this data request. $context = 'other'; if ( @@ -91,21 +26,21 @@ function get_post_content_block( $blocks ) { if ( 'other' === $context ) { global $wp_version; - $is_wp_5_9 = version_compare( $wp_version, '5.9', ' >= ' ) && version_compare( $wp_version, '6.0 - beta1', ' < ' ); - $is_wp_6_0 = version_compare( $wp_version, '6.0 - beta1', ' >= ' ); + $is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' ); + $is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' ); // Make sure the styles array exists. - // In some contexts, like the navigation editor, it doesn't . + // In some contexts, like the navigation editor, it doesn't. if ( ! isset( $settings['styles'] ) ) { $settings['styles'] = array(); } - // Remove existing global styles provided by core. - $styles_without_existing_global_styles = array(); + // Remove existing global styles provided by core. + $styles_without_existing_global_styles = array(); foreach ( $settings['styles'] as $style ) { if ( - ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0. - ( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) ) + ( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0. + ( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) ) ) { $styles_without_existing_global_styles[] = $style; } @@ -139,40 +74,26 @@ function get_post_content_block( $blocks ) { '__unstableType' => 'theme', 'isGlobalStyles' => true, ); - foreach ( $presets as $preset_style ) { - $actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) ); - if ( '' !== $actual_css ) { - $preset_style['css'] = $actual_css; - $new_global_styles[] = $preset_style; - } + $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); + if ( '' !== $actual_css ) { + $block_classes['css'] = $actual_css; + $new_global_styles[] = $block_classes; } - - if ( WP_Theme_JSON_Resolver::theme_has_support() ) { - $block_classes = array( - 'css' => 'styles', - '__unstableType' => 'theme', - 'isGlobalStyles' => true, - ); - $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); - if ( '' !== $actual_css ) { - $block_classes['css'] = $actual_css; - $new_global_styles[] = $block_classes; - } - } else { - // If there is no `theme.json` file, ensure base layout styles are still available. - $block_classes = array( - 'css' => 'base-layout-styles', - '__unstableType' => 'base-layout', - 'isGlobalStyles' => true, - ); - $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); - if ( '' !== $actual_css ) { - $block_classes['css'] = $actual_css; - $new_global_styles[] = $block_classes; - } + } else { + // If there is no `theme.json` file, ensure base layout styles are still available. + $block_classes = array( + 'css' => 'base-layout-styles', + '__unstableType' => 'base-layout', + 'isGlobalStyles' => true, + ); + $actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) ); + if ( '' !== $actual_css ) { + $block_classes['css'] = $actual_css; + $new_global_styles[] = $block_classes; } + } - $settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles ); + $settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles ); } // Copied from get_block_editor_settings() at wordpress-develop/block-editor.php. diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php new file mode 100644 index 0000000000000..397efb943e4d3 --- /dev/null +++ b/lib/experimental/block-editor-settings.php @@ -0,0 +1,91 @@ +slug ) { + $page_slug = 'page'; + } + if ( 'single' === $template_type->slug ) { + $post_slug = 'single'; + } + } + + $what_post_type = get_post_type( $post_id ); + switch ( $what_post_type ) { + case 'post': + $template_slug = $post_slug; + break; + case 'page': + $template_slug = $page_slug; + break; + } + } + + $current_template = gutenberg_get_block_templates( array( 'slug__in' => array( $template_slug ) ) ); + + /** + * Finds Post Content in an array of blocks + * + * @param array $blocks Array of blocks. + * + * @return array Post Content block. + */ + function get_post_content_block( $blocks ) { + foreach ( $blocks as $block ) { + if ( 'core/post-content' === $block['blockName'] ) { + return $block; + } + if ( ! empty( $block['innerBlocks'] ) ) { + $post_content = get_post_content_block( $block['innerBlocks'] ); + + if ( ! empty( $post_content ) ) { + return $post_content; + } + } + } + } + + if ( ! empty( $current_template ) ) { + $template_blocks = parse_blocks( $current_template[0]->content ); + $post_content_block = get_post_content_block( $template_blocks ); + + if ( ! empty( $post_content_block ) ) { + // mismatched naming x(. + if ( empty( $post_content_block['attributes'] ) && ! empty( $post_content_block['attrs'] ) ) { + $post_content_block['attributes'] = $post_content_block['attrs']; + } + $settings['postContentBlock'] = $post_content_block; + } + } + + return $settings; +} + +add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); \ No newline at end of file diff --git a/lib/load.php b/lib/load.php index 39b0446869791..f35c020654856 100644 --- a/lib/load.php +++ b/lib/load.php @@ -106,6 +106,7 @@ function gutenberg_is_experiment_enabled( $name ) { // Experimental features. remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API. require __DIR__ . '/experimental/block-editor-settings-mobile.php'; +require __DIR__ . '/experimental/block-editor-settings.php'; require __DIR__ . '/experimental/blocks.php'; require __DIR__ . '/experimental/navigation-theme-opt-in.php'; require __DIR__ . '/experimental/kses.php'; From e37f8e5de4db070eb8c52f0d374ae9561de9ada1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 23 Feb 2023 15:30:11 +1100 Subject: [PATCH 04/14] Fix whitespace issues --- lib/experimental/block-editor-settings.php | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 397efb943e4d3..97e58448653be 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -13,13 +13,13 @@ * @return array New block editor settings. */ function gutenberg_get_block_editor_settings_experimental( $settings ) { - $is_block_theme = wp_is_block_theme(); + $is_block_theme = wp_is_block_theme(); - if ( ! $is_block_theme ) { - return $settings; - } + if ( ! $is_block_theme ) { + return $settings; + } - global $post_id; + global $post_id; $template_slug = get_page_template_slug( $post_id ); @@ -50,7 +50,7 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) { $current_template = gutenberg_get_block_templates( array( 'slug__in' => array( $template_slug ) ) ); - /** + /** * Finds Post Content in an array of blocks * * @param array $blocks Array of blocks. @@ -72,7 +72,7 @@ function get_post_content_block( $blocks ) { } } - if ( ! empty( $current_template ) ) { + if ( ! empty( $current_template ) ) { $template_blocks = parse_blocks( $current_template[0]->content ); $post_content_block = get_post_content_block( $template_blocks ); @@ -84,8 +84,8 @@ function get_post_content_block( $blocks ) { $settings['postContentBlock'] = $post_content_block; } } - - return $settings; + + return $settings; } add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); \ No newline at end of file From 3992e5500c6e9a70ef258c6572065530c7cdbec8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 23 Feb 2023 16:19:54 +1100 Subject: [PATCH 05/14] Address review feedback --- lib/experimental/block-editor-settings.php | 15 +++++------ packages/block-editor/src/hooks/layout.js | 26 +++++++++---------- .../src/components/visual-editor/index.js | 18 ++++++++----- 3 files changed, 29 insertions(+), 30 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 97e58448653be..0da93d6f0ce1a 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -73,19 +73,16 @@ function get_post_content_block( $blocks ) { } if ( ! empty( $current_template ) ) { - $template_blocks = parse_blocks( $current_template[0]->content ); - $post_content_block = get_post_content_block( $template_blocks ); + $template_blocks = parse_blocks( $current_template[0]->content ); + $post_content_block = get_post_content_block( $template_blocks ); + $post_content_attributes = $post_content_block['attrs']; - if ( ! empty( $post_content_block ) ) { - // mismatched naming x(. - if ( empty( $post_content_block['attributes'] ) && ! empty( $post_content_block['attrs'] ) ) { - $post_content_block['attributes'] = $post_content_block['attrs']; - } - $settings['postContentBlock'] = $post_content_block; + if ( ! empty( $post_content_attributes ) ) { + $settings['postContentAttributes'] = $post_content_attributes; } } return $settings; } -add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); \ No newline at end of file +add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 836a9cd5a57c6..d3fae64fa5c7b 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -35,11 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout'; /** * Generates the utility classnames for the given block's layout attributes. * - * @param { Object } block Block object. + * @param { Object } layout Layout object. + * @param { string } blockName Block name. * * @return { Array } Array of CSS classname strings. */ -export function useLayoutClasses( block = {} ) { +export function useLayoutClasses( layout, blockName ) { const rootPaddingAlignment = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalFeatures @@ -47,11 +48,8 @@ export function useLayoutClasses( block = {} ) { }, [] ); const globalLayoutSettings = useSetting( 'layout' ) || {}; - const { attributes = {}, name } = block; - const { layout } = attributes; - const { default: defaultBlockLayout } = - getBlockSupport( name, layoutBlockSupportKey ) || {}; + getBlockSupport( blockName, layoutBlockSupportKey ) || {}; const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } @@ -100,14 +98,14 @@ export function useLayoutClasses( block = {} ) { /** * Generates a CSS rule with the given block's layout styles. * - * @param { Object } block Block object. - * @param { string } selector A selector to use in generating the CSS rule. + * @param { Object } blockAttributes Block attributes. + * @param { string } blockName Block name. + * @param { string } selector A selector to use in generating the CSS rule. * * @return { string } CSS rule. */ -export function useLayoutStyles( block = {}, selector ) { - const { attributes = {}, name } = block; - const { layout = {}, style = {} } = attributes; +export function useLayoutStyles( blockAttributes, blockName, selector ) { + const { layout = {}, style = {} } = blockAttributes; // Update type for blocks using legacy layouts. const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize @@ -118,7 +116,7 @@ export function useLayoutStyles( block = {}, selector ) { const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; const css = fullLayoutType?.getLayoutStyle?.( { - blockName: name, + blockName, selector, layout, layoutDefinitions: globalLayoutSettings?.definitions, @@ -350,7 +348,7 @@ export const withInspectorControls = createHigherOrderComponent( */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const { name, attributes, block } = props; + const { name, attributes } = props; const hasLayoutBlockSupport = hasBlockSupport( name, layoutBlockSupportKey @@ -372,7 +370,7 @@ export const withLayoutStyles = createHigherOrderComponent( ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport - ? useLayoutClasses( block ) + ? useLayoutClasses( layout, name ) : null; // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index f6cb4623e4f14..d74cd22c8a677 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -81,7 +81,7 @@ export default function VisualEditor( { styles } ) { deviceType, isWelcomeGuideVisible, isTemplateMode, - postContentBlock, + postContentAttributes, wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, @@ -108,7 +108,7 @@ export default function VisualEditor( { styles } ) { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, - postContentBlock: getEditorSettings().postContentBlock, + postContentAttributes: getEditorSettings().postContentAttributes, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, @@ -192,7 +192,12 @@ export default function VisualEditor( { styles } ) { return { type: 'default' }; }, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] ); - const postContentLayoutClasses = useLayoutClasses( postContentBlock ); + const layout = postContentAttributes?.layout || {}; + + const postContentLayoutClasses = useLayoutClasses( + layout, + 'core/post-content' + ); const blockListLayoutClass = classnames( { @@ -202,12 +207,11 @@ export default function VisualEditor( { styles } ) { ); const postContentLayoutStyles = useLayoutStyles( - postContentBlock, + postContentAttributes, + 'core/post-content', '.block-editor-block-list__layout.is-root-container' ); - const layout = postContentBlock?.attributes?.layout || {}; - // Update type for blocks using legacy layouts. const postContentLayout = useMemo( () => { return layout && @@ -227,7 +231,7 @@ export default function VisualEditor( { styles } ) { // If there is a Post Content block we use its layout for the block list; // if not, this must be a classic theme, in which case we use the fallback layout. - const blockListLayout = postContentBlock?.isValid + const blockListLayout = postContentAttributes ? postContentLayout : fallbackLayout; From 7bcada79aa21419215c1c696857265719aa41474 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 28 Feb 2023 16:51:28 +1100 Subject: [PATCH 06/14] Get latest post content in editor if template changes. --- packages/block-editor/src/hooks/layout.js | 2 +- .../src/components/visual-editor/index.js | 66 ++++++++++++++++++- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index d3fae64fa5c7b..f0ebf6ac89d46 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -104,7 +104,7 @@ export function useLayoutClasses( layout, blockName ) { * * @return { string } CSS rule. */ -export function useLayoutStyles( blockAttributes, blockName, selector ) { +export function useLayoutStyles( blockAttributes = {}, blockName, selector ) { const { layout = {}, style = {} } = blockAttributes; // Update type for blocks using legacy layouts. const usedLayout = diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index d74cd22c8a677..c1ae553360dbe 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -36,6 +36,8 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { arrowLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import { parse } from '@wordpress/blocks'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -76,12 +78,39 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) { ); } +/** + * Given an array of nested blocks, find the first Post Content + * block inside it, recursing through any nesting levels, + * and return its attributes. + * + * @param {Array} blocks A list of blocks. + * + * @return {Object | undefined} The Post Content block. + */ +function getPostContentAttributes( blocks ) { + for ( let i = 0; i < blocks.length; i++ ) { + if ( blocks[ i ].name === 'core/post-content' ) { + return blocks[ i ].attributes; + } + if ( blocks[ i ].innerBlocks.length ) { + const nestedPostContent = getPostContentAttributes( + blocks[ i ].innerBlocks + ); + + if ( nestedPostContent ) { + return nestedPostContent; + } + } + } +} + export default function VisualEditor( { styles } ) { const { deviceType, isWelcomeGuideVisible, isTemplateMode, postContentAttributes, + editedPostTemplate = {}, wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, @@ -89,6 +118,7 @@ export default function VisualEditor( { styles } ) { const { isFeatureActive, isEditingTemplate, + getEditedPostTemplate, __experimentalGetPreviewDeviceType, } = select( editPostStore ); const { getCurrentPostId, getCurrentPostType, getEditorSettings } = @@ -103,12 +133,21 @@ export default function VisualEditor( { styles } ) { } const editorSettings = getEditorSettings(); + const supportsTemplateMode = editorSettings.supportsTemplateMode; + const canEditTemplate = select( coreStore ).canUser( + 'create', + 'templates' + ); return { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, postContentAttributes: getEditorSettings().postContentAttributes, + editedPostTemplate: + supportsTemplateMode && canEditTemplate + ? getEditedPostTemplate() + : undefined, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, @@ -192,7 +231,29 @@ export default function VisualEditor( { styles } ) { return { type: 'default' }; }, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] ); - const layout = postContentAttributes?.layout || {}; + const newestPostContentAttributes = useMemo( () => { + if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) { + return postContentAttributes; + } + // When in template editing mode, we can access the blocks directly. + if ( editedPostTemplate?.blocks ) { + return getPostContentAttributes( editedPostTemplate?.blocks ); + } + // If there are no blocks, we have to parse the content string. + // Best double-check it's a string otherwise the parse function gets unhappy. + const parseableContent = + typeof editedPostTemplate?.content === 'string' + ? editedPostTemplate?.content + : ''; + + return getPostContentAttributes( parse( parseableContent ) ) || {}; + }, [ + editedPostTemplate?.content, + editedPostTemplate?.blocks, + postContentAttributes, + ] ); + + const layout = newestPostContentAttributes?.layout || {}; const postContentLayoutClasses = useLayoutClasses( layout, @@ -207,7 +268,7 @@ export default function VisualEditor( { styles } ) { ); const postContentLayoutStyles = useLayoutStyles( - postContentAttributes, + newestPostContentAttributes, 'core/post-content', '.block-editor-block-list__layout.is-root-container' ); @@ -222,6 +283,7 @@ export default function VisualEditor( { styles } ) { ? { ...globalLayoutSettings, ...layout, type: 'constrained' } : { ...globalLayoutSettings, ...layout, type: 'default' }; }, [ + layout, layout?.type, layout?.inherit, layout?.contentSize, From c1a48bb8f442deca040644c0774f5367bb2289c2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Mar 2023 15:25:37 +1100 Subject: [PATCH 07/14] Custom posts default to post template. --- lib/experimental/block-editor-settings.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 0da93d6f0ce1a..455b67ddab8df 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -39,12 +39,12 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) { $what_post_type = get_post_type( $post_id ); switch ( $what_post_type ) { - case 'post': - $template_slug = $post_slug; - break; case 'page': $template_slug = $page_slug; break; + default: + $template_slug = $post_slug; + break; } } From 602c4a9ec4448c3374fc335bcc4c676bdb9199b2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Mar 2023 15:41:55 +1100 Subject: [PATCH 08/14] Remove unnecessary variable --- lib/experimental/block-editor-settings.php | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 455b67ddab8df..05b1c4227cbdd 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -73,12 +73,11 @@ function get_post_content_block( $blocks ) { } if ( ! empty( $current_template ) ) { - $template_blocks = parse_blocks( $current_template[0]->content ); - $post_content_block = get_post_content_block( $template_blocks ); - $post_content_attributes = $post_content_block['attrs']; + $template_blocks = parse_blocks( $current_template[0]->content ); + $post_content_block = get_post_content_block( $template_blocks ); - if ( ! empty( $post_content_attributes ) ) { - $settings['postContentAttributes'] = $post_content_attributes; + if ( ! empty( $post_content_block['attrs'] ) ) { + $settings['postContentAttributes'] = $post_content_block['attrs']; } } From 160f791b3f1a29610e327c3758150c2a3d045971 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Mar 2023 16:14:29 +1100 Subject: [PATCH 09/14] Update useLayoutClasses to take attributes object. --- packages/block-editor/src/hooks/layout.js | 10 ++++++---- .../edit-post/src/components/visual-editor/index.js | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index f0ebf6ac89d46..daca2056a8cb5 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -35,12 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout'; /** * Generates the utility classnames for the given block's layout attributes. * - * @param { Object } layout Layout object. - * @param { string } blockName Block name. + * @param { Object } blockAttributes Block attributes. + * @param { string } blockName Block name. * * @return { Array } Array of CSS classname strings. */ -export function useLayoutClasses( layout, blockName ) { +export function useLayoutClasses( blockAttributes = {}, blockName ) { const rootPaddingAlignment = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalFeatures @@ -48,6 +48,8 @@ export function useLayoutClasses( layout, blockName ) { }, [] ); const globalLayoutSettings = useSetting( 'layout' ) || {}; + const { layout = {} } = blockAttributes; + const { default: defaultBlockLayout } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; const usedLayout = @@ -370,7 +372,7 @@ export const withLayoutStyles = createHigherOrderComponent( ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport - ? useLayoutClasses( layout, name ) + ? useLayoutClasses( attributes, name ) : null; // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index c1ae553360dbe..750053aeb995f 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -256,7 +256,7 @@ export default function VisualEditor( { styles } ) { const layout = newestPostContentAttributes?.layout || {}; const postContentLayoutClasses = useLayoutClasses( - layout, + newestPostContentAttributes, 'core/post-content' ); From 87759cf2e98c12f430363d6a506a78e1baa581c2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 6 Mar 2023 17:21:57 +1100 Subject: [PATCH 10/14] Fix used layout logic. --- packages/block-editor/src/hooks/layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index daca2056a8cb5..76b8952329caa 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -48,7 +48,7 @@ export function useLayoutClasses( blockAttributes = {}, blockName ) { }, [] ); const globalLayoutSettings = useSetting( 'layout' ) || {}; - const { layout = {} } = blockAttributes; + const { layout } = blockAttributes; const { default: defaultBlockLayout } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; From a7994ef4a1a81aa3db057f12ba6b27580eabc5f6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 6 Mar 2023 17:32:32 +1100 Subject: [PATCH 11/14] Restore comment --- packages/edit-post/src/components/visual-editor/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 750053aeb995f..8e10846317053 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -144,6 +144,8 @@ export default function VisualEditor( { styles } ) { isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, postContentAttributes: getEditorSettings().postContentAttributes, + // Post template fetch returns a 404 on classic themes, which + // messes with e2e tests, so check it's a block theme first. editedPostTemplate: supportsTemplateMode && canEditTemplate ? getEditedPostTemplate() From c3c6e49fd1a32fbccb04757ec7a4a1e40f20850b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Mar 2023 11:29:27 +1100 Subject: [PATCH 12/14] Make sure postContentAttributes only exist where they're needed. --- lib/experimental/block-editor-settings.php | 6 +++--- .../src/components/provider/use-block-editor-settings.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 05b1c4227cbdd..a72c75cf5e923 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -15,12 +15,12 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) { $is_block_theme = wp_is_block_theme(); - if ( ! $is_block_theme ) { + global $post_id; + + if ( ! $is_block_theme || ! $post_id ) { return $settings; } - global $post_id; - $template_slug = get_page_template_slug( $post_id ); if ( ! $template_slug ) { diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 4c5c431e5915f..d8035f4f54fca 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -62,6 +62,7 @@ const BLOCK_EDITOR_SETTINGS = [ 'locale', 'maxWidth', 'onUpdateDefaultBlockStyles', + 'postContentAttributes', 'postsPerPage', 'readOnly', 'styles', From cca103df97c2233e9357b18c0ba6483b984f22c0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Mar 2023 17:05:05 +1100 Subject: [PATCH 13/14] Capitalise post ID --- lib/experimental/block-editor-settings.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index a72c75cf5e923..7888595eba0f4 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -15,13 +15,13 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) { $is_block_theme = wp_is_block_theme(); - global $post_id; + global $post_ID; - if ( ! $is_block_theme || ! $post_id ) { + if ( ! $is_block_theme || ! $post_ID ) { return $settings; } - $template_slug = get_page_template_slug( $post_id ); + $template_slug = get_page_template_slug( $post_ID ); if ( ! $template_slug ) { $post_slug = 'singular'; @@ -37,7 +37,7 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) { } } - $what_post_type = get_post_type( $post_id ); + $what_post_type = get_post_type( $post_ID ); switch ( $what_post_type ) { case 'page': $template_slug = $page_slug; From c814f4770fdab67411bb01cdec77ff925ac3043d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 8 Mar 2023 12:33:22 +1100 Subject: [PATCH 14/14] Remove layout object from dependencies --- packages/edit-post/src/components/visual-editor/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 8e10846317053..8bfa39dad2e11 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -285,7 +285,6 @@ export default function VisualEditor( { styles } ) { ? { ...globalLayoutSettings, ...layout, type: 'constrained' } : { ...globalLayoutSettings, ...layout, type: 'default' }; }, [ - layout, layout?.type, layout?.inherit, layout?.contentSize,