diff --git a/wp-admin/menu.php b/wp-admin/menu.php index 20a0a2f4771e..94f479fb8cf6 100644 --- a/wp-admin/menu.php +++ b/wp-admin/menu.php @@ -202,8 +202,24 @@ /* translators: %s: Number of available theme updates. */ $submenu['themes.php'][5] = array( sprintf( __( 'Themes %s' ), $count ), $appearance_cap, 'themes.php' ); +if ( wp_is_block_template_theme() ) { + $submenu['themes.php'][6] = array( + sprintf( + /* translators: %s: "beta" label */ + __( 'Editor %s' ), + '' . __( 'beta' ) . '' + ), + 'edit_theme_options', + 'site-editor.php', + ); +} + +// Hide Customize link on block themes unless a plugin or theme is using +// customize_register to add a setting. +if ( ! wp_is_block_template_theme() || has_action( 'customize_register' ) ) { $customize_url = add_query_arg( 'return', urlencode( remove_query_arg( wp_removable_query_args(), wp_unslash( $_SERVER['REQUEST_URI'] ) ) ), 'customize.php' ); - $submenu['themes.php'][6] = array( __( 'Customize' ), 'customize', esc_url( $customize_url ), '', 'hide-if-no-customize' ); + $submenu['themes.php'][7] = array( __( 'Customize' ), 'customize', esc_url( $customize_url ), '', 'hide-if-no-customize' ); +} if ( current_theme_supports( 'menus' ) || current_theme_supports( 'widgets' ) ) { $submenu['themes.php'][10] = array( __( 'Menus' ), 'edit_theme_options', 'nav-menus.php' ); diff --git a/wp-admin/site-editor.php b/wp-admin/site-editor.php new file mode 100644 index 000000000000..e5d149f23515 --- /dev/null +++ b/wp-admin/site-editor.php @@ -0,0 +1,115 @@ +' . __( 'You need a higher level of permission.' ) . '' . + '

' . __( 'Sorry, you are not allowed to edit theme options on this site.' ) . '

', + 403 + ); +} + +if ( ! wp_is_block_template_theme() ) { + wp_die( __( 'The theme you are currently using is not compatible with Full Site Editing.' ) ); +} + +// Used in the HTML title tag. +$title = __( 'Editor (beta)' ); +$parent_file = 'themes.php'; + +// Flag that we're loading the block editor. +$current_screen = get_current_screen(); +$current_screen->is_block_editor( true ); + +$block_editor_context = new WP_Block_Editor_Context(); + +$active_global_styles_id = WP_Theme_JSON_Resolver::get_user_custom_post_type_id(); +$active_theme = wp_get_theme()->get_stylesheet(); +$preload_paths = array( + array( '/wp/v2/media', 'OPTIONS' ), + '/', + '/wp/v2/types?context=edit', + '/wp/v2/taxonomies?context=edit', + '/wp/v2/pages?context=edit', + '/wp/v2/categories?context=edit', + '/wp/v2/posts?context=edit', + '/wp/v2/tags?context=edit', + '/wp/v2/templates?context=edit', + '/wp/v2/template-parts?context=edit', + '/wp/v2/settings', + '/wp/v2/themes?context=edit&status=active', + '/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit', + '/wp/v2/global-styles/' . $active_global_styles_id, + '/wp/v2/themes/' . $active_theme . '/global-styles', +); +block_editor_rest_api_preload( $preload_paths, $block_editor_context ); + +$editor_settings = get_block_editor_settings( + array( + 'siteUrl' => site_url(), + 'postsPerPage' => get_option( 'posts_per_page' ), + 'styles' => get_block_editor_theme_styles(), + 'defaultTemplateTypes' => get_default_block_template_types(), + 'defaultTemplatePartAreas' => get_allowed_block_template_part_areas(), + '__experimentalBlockPatterns' => WP_Block_Patterns_Registry::get_instance()->get_all_registered(), + '__experimentalBlockPatternCategories' => WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(), + ), + $block_editor_context +); + +wp_add_inline_script( + 'wp-edit-site', + sprintf( + 'wp.domReady( function() { + wp.editSite.initialize( "site-editor", %s ); + } );', + wp_json_encode( $editor_settings ) + ) +); + +// Preload server-registered block schemas. +wp_add_inline_script( + 'wp-blocks', + 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' +); + +wp_add_inline_script( + 'wp-blocks', + sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $post ) ) ), + 'after' +); + +wp_enqueue_script( 'wp-edit-site' ); +wp_enqueue_script( 'wp-format-library' ); +wp_enqueue_style( 'wp-edit-site' ); +wp_enqueue_style( 'wp-format-library' ); +wp_enqueue_media(); + +if ( + current_theme_supports( 'wp-block-styles' ) || + ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 ) +) { + wp_enqueue_style( 'wp-block-library-theme' ); +} + +/** This action is documented in wp-admin/edit-form-blocks.php */ +do_action( 'enqueue_block_editor_assets' ); + +require_once ABSPATH . 'wp-admin/admin-header.php'; +?> + +
+ + array('dependencies' => array('wp-dom-ready', 'wp-i18n', 'wp-polyfill'), 'version' => '9c16bbcaf33be354f8441e70889ef026'), 'annotations.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-hooks', 'wp-i18n', 'wp-polyfill', 'wp-rich-text'), 'version' => 'be09e28fc555e4078ceb084abfe19a2a'), 'api-fetch.js' => array('dependencies' => array('wp-i18n', 'wp-polyfill', 'wp-url'), 'version' => 'f698127ce42a94f486d95e237332c934'), 'autop.js' => array('dependencies' => array('wp-polyfill'), 'version' => '9026a2ac95031fd794ea684e4c3d7c98'), 'blob.js' => array('dependencies' => array('wp-polyfill'), 'version' => '4eca38a62df5f0145a5f1a78858581e7'), 'block-directory.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives'), 'version' => '75eaf8dcba3c56a2862d5b5119ccb021'), 'block-editor.js' => array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-shortcode', 'wp-token-list', 'wp-url', 'wp-warning', 'wp-wordcount'), 'version' => 'dcf437c2326ab93ff92b2cd3a31b2f96'), 'block-library.js' => array('dependencies' => array('lodash', 'moment', 'wp-a11y', 'wp-api-fetch', 'wp-autop', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-rich-text', 'wp-server-side-render', 'wp-url', 'wp-viewport'), 'version' => 'f3816a8b894c02a9ae9b415826d6e6a5'), 'block-serialization-default-parser.js' => array('dependencies' => array('wp-polyfill'), 'version' => '2fc6dec19af6d4c5e5fec8f6fdc1a10b'), 'blocks.js' => array('dependencies' => array('lodash', 'wp-autop', 'wp-blob', 'wp-block-serialization-default-parser', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-shortcode'), 'version' => '1d4a5094380871c9d4f040cde2550b7b'), 'components.js' => array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-a11y', 'wp-compose', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-warning'), 'version' => 'd2a3ec343d9115dc64c51106d3febdff'), 'compose.js' => array('dependencies' => array('lodash', 'react', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-is-shallow-equal', 'wp-keycodes', 'wp-polyfill', 'wp-priority-queue'), 'version' => '897f03a74ce499d3aa58130be18a1850'), 'core-data.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blocks', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-url'), 'version' => '0b9a2aee93cc8d3f76b93f2868cc25c8'), 'customize-widgets.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-viewport', 'wp-widgets'), 'version' => '0fc8684e1e4cf76a571add4f68ae8e51'), 'data.js' => array('dependencies' => array('lodash', 'react', 'wp-compose', 'wp-deprecated', 'wp-element', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-priority-queue', 'wp-redux-routine'), 'version' => '77a74002a4c73ebb148c81338d26d31d'), 'data-controls.js' => array('dependencies' => array('wp-api-fetch', 'wp-data', 'wp-deprecated', 'wp-polyfill'), 'version' => '2172a4e883a68f61e2c16cd4c1ab8396'), 'date.js' => array('dependencies' => array('moment', 'wp-polyfill'), 'version' => '3875550ecc1e6622255f5a42e5a159ce'), 'deprecated.js' => array('dependencies' => array('wp-hooks', 'wp-polyfill'), 'version' => '932d8bb37da8bbb396a7a3f754345e08'), 'dom.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '50dc1f3eb0cd526124881848f1e8c3ba'), 'dom-ready.js' => array('dependencies' => array('wp-polyfill'), 'version' => '71883072590656bf22c74c7b887df3dd'), 'edit-post.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport', 'wp-warning'), 'version' => '78fcfbe83d5943f4eaf0f92d1b19d240'), 'edit-widgets.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-url', 'wp-viewport', 'wp-widgets'), 'version' => '8a7a3c1fac16602efa298649c4a3274b'), 'editor.js' => array('dependencies' => array('lodash', 'react', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-date', 'wp-deprecated', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-rich-text', 'wp-server-side-render', 'wp-url', 'wp-wordcount'), 'version' => '99c3c9f04f3d6511eedbe4044cb8ae86'), 'element.js' => array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-escape-html', 'wp-polyfill'), 'version' => 'f806c4534fe0eb31e6a8ae2005c8791a'), 'escape-html.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'dcba9e40e8782c7d5883426934834b3e'), 'format-library.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => 'c79b3840263d0a78c49fe044f2304f2e'), 'hooks.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'a514867ba88be0e33c1b9f4f6920a6a6'), 'html-entities.js' => array('dependencies' => array('wp-polyfill'), 'version' => '26307b6ad1e445fc1a4643f634cb29c6'), 'i18n.js' => array('dependencies' => array('wp-hooks', 'wp-polyfill'), 'version' => '8048667ca088a990a670c0ee3b7d0f81'), 'is-shallow-equal.js' => array('dependencies' => array('wp-polyfill'), 'version' => '9b8d91804cfb3ef5b14e6ef816664072'), 'keyboard-shortcuts.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-element', 'wp-keycodes', 'wp-polyfill'), 'version' => '9fb17ccea196972abc222156880ce7f6'), 'keycodes.js' => array('dependencies' => array('lodash', 'wp-i18n', 'wp-polyfill'), 'version' => '3de88f173774e1e5471c6a402f02f8c8'), 'list-reusable-blocks.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'e5caecd02ce3040a8a44b54206b63308'), 'media-utils.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blob', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '66e70199c167783aa11af451ef27d9a4'), 'notices.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-polyfill'), 'version' => '1e7d4d108d95d5006f9de96adc5d419e'), 'nux.js' => array('dependencies' => array('lodash', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-primitives'), 'version' => '86ae2c7f580732414594894f79e42c5a'), 'plugins.js' => array('dependencies' => array('lodash', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-polyfill', 'wp-primitives'), 'version' => 'bc1633076d28d63ce55d46302f876d7b'), 'primitives.js' => array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'fedf57cf6da174d1eca2875b8b730af3'), 'priority-queue.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'b2e76fb9887a285b5eff38763f2ac2fc'), 'redux-routine.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '526a89dd4077c25f48fcbc20ee0bbb67'), 'reusable-blocks.js' => array('dependencies' => array('lodash', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => 'cf03fd6b5d8fcca4dcc4414ef2ad8965'), 'rich-text.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => 'bbc46a456915705640beaa1847fd7f5e'), 'server-side-render.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-url'), 'version' => 'de6ae82e99879a705ed55113202a3c8c'), 'shortcode.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '4319042e75d48ae14cf0da54ef97155a'), 'token-list.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '7eda0bf0cbf671b2a65b90b4d5a53872'), 'url.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => 'a46d49caececa748df2efad6c13c9c26'), 'viewport.js' => array('dependencies' => array('lodash', 'wp-compose', 'wp-data', 'wp-element', 'wp-polyfill'), 'version' => 'f79e1b909752884d4fc5c7d33e29433f'), 'warning.js' => array('dependencies' => array('wp-polyfill'), 'version' => '7c1e7902e42969a4268289623ad20340'), 'widgets.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-polyfill', 'wp-primitives'), 'version' => '0b75b101ef044a196c2088f5ef446483'), 'wordcount.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '3bba5668869a0468bc75d3f973544db5')); \ No newline at end of file + array('dependencies' => array('wp-dom-ready', 'wp-i18n', 'wp-polyfill'), 'version' => '9c16bbcaf33be354f8441e70889ef026'), 'annotations.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-hooks', 'wp-i18n', 'wp-polyfill', 'wp-rich-text'), 'version' => 'be09e28fc555e4078ceb084abfe19a2a'), 'api-fetch.js' => array('dependencies' => array('wp-i18n', 'wp-polyfill', 'wp-url'), 'version' => 'f65b5121c560404ee27901f6778c0a7f'), 'autop.js' => array('dependencies' => array('wp-polyfill'), 'version' => '9026a2ac95031fd794ea684e4c3d7c98'), 'blob.js' => array('dependencies' => array('wp-polyfill'), 'version' => '4eca38a62df5f0145a5f1a78858581e7'), 'block-directory.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives'), 'version' => '9d9f0668a12d2e31b47b0d7614022bcc'), 'block-editor.js' => array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-shortcode', 'wp-token-list', 'wp-url', 'wp-warning', 'wp-wordcount'), 'version' => '5c661143177a62eecf3461aa5667458d'), 'block-library.js' => array('dependencies' => array('lodash', 'moment', 'wp-a11y', 'wp-api-fetch', 'wp-autop', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-rich-text', 'wp-server-side-render', 'wp-url', 'wp-viewport'), 'version' => '21c41a0843d484e6916f5ef9d6ba0a9b'), 'block-serialization-default-parser.js' => array('dependencies' => array('wp-polyfill'), 'version' => '2fc6dec19af6d4c5e5fec8f6fdc1a10b'), 'blocks.js' => array('dependencies' => array('lodash', 'wp-autop', 'wp-blob', 'wp-block-serialization-default-parser', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-shortcode'), 'version' => '1d4a5094380871c9d4f040cde2550b7b'), 'components.js' => array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-a11y', 'wp-compose', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-warning'), 'version' => 'd2a3ec343d9115dc64c51106d3febdff'), 'compose.js' => array('dependencies' => array('lodash', 'react', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-is-shallow-equal', 'wp-keycodes', 'wp-polyfill', 'wp-priority-queue'), 'version' => '897f03a74ce499d3aa58130be18a1850'), 'core-data.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blocks', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-url'), 'version' => 'd36574090c00c6e21c69d0a6a4c6d08b'), 'customize-widgets.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-viewport', 'wp-widgets'), 'version' => '4b0be21d84184e97dbf52553f27489d8'), 'data.js' => array('dependencies' => array('lodash', 'react', 'wp-compose', 'wp-deprecated', 'wp-element', 'wp-is-shallow-equal', 'wp-polyfill', 'wp-priority-queue', 'wp-redux-routine'), 'version' => '77a74002a4c73ebb148c81338d26d31d'), 'data-controls.js' => array('dependencies' => array('wp-api-fetch', 'wp-data', 'wp-deprecated', 'wp-polyfill'), 'version' => '2172a4e883a68f61e2c16cd4c1ab8396'), 'date.js' => array('dependencies' => array('moment', 'wp-polyfill'), 'version' => '3875550ecc1e6622255f5a42e5a159ce'), 'deprecated.js' => array('dependencies' => array('wp-hooks', 'wp-polyfill'), 'version' => '932d8bb37da8bbb396a7a3f754345e08'), 'dom.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '50dc1f3eb0cd526124881848f1e8c3ba'), 'dom-ready.js' => array('dependencies' => array('wp-polyfill'), 'version' => '71883072590656bf22c74c7b887df3dd'), 'edit-post.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport', 'wp-warning'), 'version' => 'e040d31db6a8a1d57e80f5bd6359ab0d'), 'edit-site.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '8eef25e7a42f9b1cc849535723452cca'), 'edit-widgets.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-block-library', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-url', 'wp-viewport', 'wp-widgets'), 'version' => 'c268f397fd895f6ea901a72798215d68'), 'editor.js' => array('dependencies' => array('lodash', 'react', 'wp-a11y', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-date', 'wp-deprecated', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-media-utils', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-reusable-blocks', 'wp-rich-text', 'wp-server-side-render', 'wp-url', 'wp-wordcount'), 'version' => '758f04204c28e8007ad70198d7ffe8f1'), 'element.js' => array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-escape-html', 'wp-polyfill'), 'version' => '1c1c2ad240717ef0caa95859a0bfe4fd'), 'escape-html.js' => array('dependencies' => array('wp-polyfill'), 'version' => 'ce66e0f9acf6802317399656243ffbc4'), 'format-library.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-url'), 'version' => 'f725438d9f5fb325c48f3bf12d0b5a38'), 'hooks.js' => array('dependencies' => array('wp-polyfill'), 'version' => '2437e192b4f399511760e7dbf29ff1ff'), 'html-entities.js' => array('dependencies' => array('wp-polyfill'), 'version' => '544a76db37139ce991197ce1c0e8a601'), 'i18n.js' => array('dependencies' => array('wp-hooks', 'wp-polyfill'), 'version' => 'bae7db139caad41e39fb25e2e32ea5d8'), 'is-shallow-equal.js' => array('dependencies' => array('wp-polyfill'), 'version' => '77450ab7b4e5185ab453093061332216'), 'keyboard-shortcuts.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-element', 'wp-keycodes', 'wp-polyfill'), 'version' => '6043822924925984ca7724746a3c5a90'), 'keycodes.js' => array('dependencies' => array('lodash', 'wp-i18n', 'wp-polyfill'), 'version' => '072572e1d3daf95406e165e8aa6bae9a'), 'list-reusable-blocks.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'bac2db623e5344b1f1be759637fcb1c6'), 'media-utils.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blob', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'f73b0369f82936335b6f1603bffd44b6'), 'notices.js' => array('dependencies' => array('lodash', 'wp-data', 'wp-polyfill'), 'version' => '8014226ac714bfd6036616e952668706'), 'nux.js' => array('dependencies' => array('lodash', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-primitives'), 'version' => 'e506c576c92097e4e87675a53bfe41f3'), 'plugins.js' => array('dependencies' => array('lodash', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-polyfill', 'wp-primitives'), 'version' => '1bd979add5fda70a5cadf743372802f1'), 'primitives.js' => array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '64f524f98d57bd28a6521ab72f6a1a92'), 'priority-queue.js' => array('dependencies' => array('wp-polyfill'), 'version' => '8800e995455b762f0853c3b3abee6781'), 'redux-routine.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '213d3396514330dffae91fd28113ceaa'), 'reusable-blocks.js' => array('dependencies' => array('lodash', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '9f476c43dc21e01a507ea29d71b8fc1a'), 'rich-text.js' => array('dependencies' => array('lodash', 'wp-a11y', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-keycodes', 'wp-polyfill'), 'version' => 'a5b28047cf5c658c9007bb653b693c28'), 'server-side-render.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-deprecated', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-url'), 'version' => '778cdbb5aca185a5de34d3105d55f957'), 'shortcode.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '2a9aed2fe14dbfef6bfe0e16d7e52877'), 'token-list.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '8b469ac4dbdd98f2e20e65bce5b471db'), 'url.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '2b32cf674084343be5f15426089cc939'), 'viewport.js' => array('dependencies' => array('lodash', 'wp-compose', 'wp-data', 'wp-element', 'wp-polyfill'), 'version' => 'dc5c8745e4f9e59d9468b7bddded981c'), 'warning.js' => array('dependencies' => array('wp-polyfill'), 'version' => '1f17121f9d6d7d4961e1345d847b2122'), 'widgets.js' => array('dependencies' => array('lodash', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-polyfill', 'wp-primitives'), 'version' => '732bd7fc531db1e8836411fb739f1578'), 'wordcount.js' => array('dependencies' => array('lodash', 'wp-polyfill'), 'version' => '7ddc7bd4fd5ec46d67da6bce16f7f00d')); \ No newline at end of file diff --git a/wp-includes/block-patterns/query-medium-posts.php b/wp-includes/block-patterns/query-medium-posts.php index fdcbce323acd..bd564ebe43a2 100644 --- a/wp-includes/block-patterns/query-medium-posts.php +++ b/wp-includes/block-patterns/query-medium-posts.php @@ -9,7 +9,7 @@ 'title' => _x( 'Image at left', 'Block pattern title' ), 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), - 'content' => ' + 'content' => '
diff --git a/wp-includes/block-patterns/query-small-posts.php b/wp-includes/block-patterns/query-small-posts.php index c858f198133c..2f165c1b8ba9 100644 --- a/wp-includes/block-patterns/query-small-posts.php +++ b/wp-includes/block-patterns/query-small-posts.php @@ -9,7 +9,7 @@ 'title' => _x( 'Small image and title', 'Block pattern title' ), 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), - 'content' => ' + 'content' => '
diff --git a/wp-includes/block-patterns/query-standard-posts.php b/wp-includes/block-patterns/query-standard-posts.php index 50fa37d63707..c05ace98db93 100644 --- a/wp-includes/block-patterns/query-standard-posts.php +++ b/wp-includes/block-patterns/query-standard-posts.php @@ -9,7 +9,7 @@ 'title' => _x( 'Standard', 'Block pattern title' ), 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), - 'content' => ' + 'content' => '
diff --git a/wp-includes/block-supports/border.php b/wp-includes/block-supports/border.php index 08f3781ba6b3..ca213cd5dc05 100644 --- a/wp-includes/block-supports/border.php +++ b/wp-includes/block-supports/border.php @@ -63,8 +63,23 @@ function wp_apply_border_support( $block_type, $block_attributes ) { wp_has_border_feature_support( $block_type, 'radius' ) && isset( $block_attributes['style']['border']['radius'] ) ) { - $border_radius = (int) $block_attributes['style']['border']['radius']; - $styles[] = sprintf( 'border-radius: %dpx;', $border_radius ); + $border_radius = $block_attributes['style']['border']['radius']; + + if ( is_array( $border_radius ) ) { + // We have individual border radius corner values. + foreach ( $border_radius as $key => $radius ) { + // Convert CamelCase corner name to kebab-case. + $corner = strtolower( preg_replace( '/(?attributes ) { + $block_type->attributes = array(); + } + + // Check for existing style attribute definition e.g. from block.json. + if ( array_key_exists( 'style', $block_type->attributes ) ) { + return; + } + + $has_dimensions_support = block_has_support( $block_type, array( '__experimentalDimensions' ), false ); + // Future block supports such as height & width will be added here. + + if ( $has_dimensions_support ) { + $block_type->attributes['style'] = array( + 'type' => 'object', + ); + } +} + +/** + * Add CSS classes for block dimensions to the incoming attributes array. + * This will be applied to the block markup in the front-end. + * + * @since 5.9.0 + * @access private + * + * @param WP_Block_Type $block_type Block Type. + * @param array $block_attributes Block attributes. + * + * @return array Block dimensions CSS classes and inline styles. + */ +function wp_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable + if ( wp_skip_dimensions_serialization( $block_type ) ) { + return array(); + } + + $styles = array(); + + // Height support to be added in near future. + // Width support to be added in near future. + + return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); +} + +/** + * Checks whether serialization of the current block's dimensions properties + * should occur. + * + * @since 5.9.0 + * @access private + * + * @param WP_Block_type $block_type Block type. + * + * @return boolean Whether to serialize spacing support styles & classes. + */ +function wp_skip_dimensions_serialization( $block_type ) { + $dimensions_support = _wp_array_get( $block_type->supports, array( '__experimentalDimensions' ), false ); + return is_array( $dimensions_support ) && + array_key_exists( '__experimentalSkipSerialization', $dimensions_support ) && + $dimensions_support['__experimentalSkipSerialization']; +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'dimensions', + array( + 'register_attribute' => 'wp_register_dimensions_support', + 'apply' => 'wp_apply_dimensions_support', + ) +); diff --git a/wp-includes/block-supports/duotone.php b/wp-includes/block-supports/duotone.php index c2f2d5256d67..974aba5133a0 100644 --- a/wp-includes/block-supports/duotone.php +++ b/wp-includes/block-supports/duotone.php @@ -266,7 +266,7 @@ function wp_tinycolor_string_to_rgb( $color_str ) { $hsla_regexp = '/^hsla' . $permissive_match4 . '$/'; if ( preg_match( $hsla_regexp, $color_str, $match ) ) { - return wp_tinycolor_hsl_to_rgb( + $rgb = wp_tinycolor_hsl_to_rgb( array( 'h' => $match[1], 's' => $match[2], @@ -384,13 +384,16 @@ function wp_register_duotone_support( $block_type ) { } } } + /** * Renders the duotone filter SVG and returns the CSS filter property to * reference the rendered SVG. * * @since 5.9.0 - * + * @access private + * @param array $preset Duotone preset value as seen in theme.json. + * * @return string Duotone CSS filter property. */ function wp_render_duotone_filter_preset( $preset ) { @@ -460,13 +463,11 @@ function wp_render_duotone_filter_preset( $preset ) { } add_action( - /* - * Safari doesn't render SVG filters defined in data URIs, - * and SVG filters won't render in the head of a document, - * so the next best place to put the SVG is in the footer. - */ + // Safari doesn't render SVG filters defined in data URIs, + // and SVG filters won't render in the head of a document, + // so the next best place to put the SVG is in the footer. is_admin() ? 'admin_footer' : 'wp_footer', - static function () use ( $svg ) { + function () use ( $svg ) { echo $svg; } ); @@ -502,84 +503,38 @@ function wp_render_duotone_support( $block_content, $block ) { return $block_content; } - $duotone_colors = $block['attrs']['style']['color']['duotone']; - - $duotone_values = array( - 'r' => array(), - 'g' => array(), - 'b' => array(), + $filter_preset = array( + 'slug' => uniqid(), + 'colors' => $block['attrs']['style']['color']['duotone'], ); - foreach ( $duotone_colors as $color_str ) { - $color = wp_tinycolor_string_to_rgb( $color_str ); - - $duotone_values['r'][] = $color['r'] / 255; - $duotone_values['g'][] = $color['g'] / 255; - $duotone_values['b'][] = $color['b'] / 255; + $filter_property = wp_render_duotone_filter_preset( $filter_preset ); + $filter_id = 'wp-duotone-' . $filter_preset['slug']; + + $scope = '.' . $filter_id; + $selectors = explode( ',', $duotone_support ); + $scoped = array(); + foreach ( $selectors as $sel ) { + $scoped[] = $scope . ' ' . trim( $sel ); } + $selector = implode( ', ', $scoped ); - $duotone_id = 'wp-duotone-filter-' . uniqid(); - - $selectors = explode( ',', $duotone_support ); - $selectors_scoped = array_map( - static function ( $selector ) use ( $duotone_id ) { - return '.' . $duotone_id . ' ' . trim( $selector ); - }, - $selectors - ); - $selectors_group = implode( ', ', $selectors_scoped ); - - ob_start(); - - ?> + // !important is needed because these styles render before global styles, + // and they should be overriding the duotone filters set by global styles. + $filter_style = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG + ? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n" + : $selector . '{filter:' . $filter_property . ' !important;}'; - - - - - - - values=".299 .587 .114 0 0 - .299 .587 .114 0 0 - .299 .587 .114 0 0 - 0 0 0 1 0" - - /> - - - - - - - - - - .$class_name a{" . $link_color_declaration . " !important;}\n"; + $style = "\n"; // Like the layout hook this assumes the hook only applies to blocks with a single wrapper. // Retrieve the opening tag of the first HTML element. @@ -64,8 +68,19 @@ function wp_render_elements_support( $block_content, $block ) { $content = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 ); } - return $content . $style; + /* + * Ideally styles should be loaded in the head, but blocks may be parsed + * after that, so loading in the footer for now. + * See https://core.trac.wordpress.org/ticket/53494. + */ + add_action( + 'wp_footer', + static function () use ( $style ) { + echo $style; + } + ); + return $content; } add_filter( 'render_block', 'wp_render_elements_support', 10, 2 ); diff --git a/wp-includes/block-supports/layout.php b/wp-includes/block-supports/layout.php index be1da09899da..88eb2d50f9af 100644 --- a/wp-includes/block-supports/layout.php +++ b/wp-includes/block-supports/layout.php @@ -29,6 +29,106 @@ function wp_register_layout_support( $block_type ) { } } +/** + * Generates the CSS corresponding to the provided layout. + * + * @since 5.9.0 + * @access private + * + * @param string $selector CSS selector. + * @param array $layout Layout object. The one that is passed has already checked the existance of default block layout. + * @param boolean $has_block_gap_support Whether the theme has support for the block gap. + * + * @return string CSS style. + */ +function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ) { + $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default'; + + $style = ''; + if ( 'default' === $layout_type ) { + $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null; + $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null; + + $all_max_width_value = $content_size ? $content_size : $wide_size; + $wide_max_width_value = $wide_size ? $wide_size : $content_size; + + // Make sure there is a single CSS rule, and all tags are stripped for security. + // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched. + $all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] ); + $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] ); + + $style = ''; + if ( $content_size || $wide_size ) { + $style = "$selector > * {"; + $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; + $style .= 'margin-left: auto !important;'; + $style .= 'margin-right: auto !important;'; + $style .= '}'; + + $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; + $style .= "$selector .alignfull { max-width: none; }"; + } + + $style .= "$selector .alignleft { float: left; margin-right: 2em; }"; + $style .= "$selector .alignright { float: right; margin-left: 2em; }"; + if ( $has_block_gap_support ) { + $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }"; + $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }"; + } + } elseif ( 'flex' === $layout_type ) { + $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; + + $justify_content_options = array( + 'left' => 'flex-start', + 'right' => 'flex-end', + 'center' => 'center', + ); + + if ( 'horizontal' === $layout_orientation ) { + $justify_content_options += array( 'space-between' => 'space-between' ); + } + + $flex_wrap_options = array( 'wrap', 'nowrap' ); + $flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ? + $layout['flexWrap'] : + 'wrap'; + + $style = "$selector {"; + $style .= 'display: flex;'; + if ( $has_block_gap_support ) { + $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; + } else { + $style .= 'gap: 0.5em;'; + } + $style .= "flex-wrap: $flex_wrap;"; + $style .= 'align-items: center;'; + if ( 'horizontal' === $layout_orientation ) { + $style .= 'align-items: center;'; + /** + * Add this style only if is not empty for backwards compatibility, + * since we intend to convert blocks that had flex layout implemented + * by custom css. + */ + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; + // --justification-setting allows children to inherit the value regardless or row or column direction. + $style .= "--justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; + } + } else { + $style .= 'flex-direction: column;'; + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; + $style .= "--justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};"; + } + } + $style .= '}'; + + $style .= "$selector > * { margin: 0; }"; + } + + return $style; +} + /** * Renders the layout config to the block wrapper. * @@ -42,47 +142,25 @@ function wp_register_layout_support( $block_type ) { function wp_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false ); - if ( ! $support_layout || ! isset( $block['attrs']['layout'] ) ) { + + if ( ! $support_layout ) { return $block_content; } - $used_layout = $block['attrs']['layout']; + $block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) ); + $default_layout = wp_get_global_settings( array( 'layout' ) ); + $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false; + $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); + $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { - $tree = WP_Theme_JSON_Resolver::get_merged_data(); - $default_layout = _wp_array_get( $tree->get_settings(), array( 'layout' ) ); if ( ! $default_layout ) { return $block_content; } $used_layout = $default_layout; } - $id = uniqid(); - $content_size = isset( $used_layout['contentSize'] ) ? $used_layout['contentSize'] : null; - $wide_size = isset( $used_layout['wideSize'] ) ? $used_layout['wideSize'] : null; - - $all_max_width_value = $content_size ? $content_size : $wide_size; - $wide_max_width_value = $wide_size ? $wide_size : $content_size; - - // Make sure there is a single CSS rule, and all tags are stripped for security. - $all_max_width_value = safecss_filter_attr( explode( ';', $all_max_width_value )[0] ); - $wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] ); - - $style = ''; - if ( $content_size || $wide_size ) { - $style = ".wp-container-$id > * {"; - $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; - $style .= 'margin-left: auto !important;'; - $style .= 'margin-right: auto !important;'; - $style .= '}'; - - $style .= ".wp-container-$id > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - - $style .= ".wp-container-$id .alignfull { max-width: none; }"; - } - - $style .= ".wp-container-$id .alignleft { float: left; margin-right: 2em; }"; - $style .= ".wp-container-$id .alignright { float: right; margin-left: 2em; }"; - + $id = uniqid(); + $style = wp_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support ); // This assumes the hook only applies to blocks with a single wrapper. // I think this is a reasonable limitation for that particular hook. $content = preg_replace( @@ -92,7 +170,19 @@ function wp_render_layout_support_flag( $block_content, $block ) { 1 ); - return $content . ''; + /* + * Ideally styles should be loaded in the head, but blocks may be parsed + * after that, so loading in the footer for now. + * See https://core.trac.wordpress.org/ticket/53494. + */ + add_action( + 'wp_footer', + static function () use ( $style ) { + echo ''; + } + ); + + return $content; } // Register the block support. @@ -123,7 +213,8 @@ function wp_restore_group_inner_container( $block_content, $block ) { if ( 'core/group' !== $block['blockName'] || WP_Theme_JSON_Resolver::theme_has_support() || - 1 === preg_match( $group_with_inner_container_regex, $block_content ) + 1 === preg_match( $group_with_inner_container_regex, $block_content ) || + ( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] ) ) { return $block_content; } diff --git a/wp-includes/block-supports/spacing.php b/wp-includes/block-supports/spacing.php index 69c1b77f2095..8d93d4e1e98c 100644 --- a/wp-includes/block-supports/spacing.php +++ b/wp-includes/block-supports/spacing.php @@ -1,6 +1,9 @@ $value ) { $styles[] = sprintf( 'padding-%s: %s;', $key, $value ); } + } elseif ( null !== $padding_value ) { + $styles[] = sprintf( 'padding: %s;', $padding_value ); } } if ( $has_margin_support ) { $margin_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'margin' ), null ); - if ( null !== $margin_value ) { + if ( is_array( $margin_value ) ) { foreach ( $margin_value as $key => $value ) { $styles[] = sprintf( 'margin-%s: %s;', $key, $value ); } + } elseif ( null !== $margin_value ) { + $styles[] = sprintf( 'margin: %s;', $margin_value ); } } @@ -68,20 +79,75 @@ function wp_apply_spacing_support( $block_type, $block_attributes ) { } /** - * Checks whether the current block type supports the spacing feature requested. + * Checks whether serialization of the current block's spacing properties should + * occur. * - * @since 5.8.0 + * @since 5.9.0 * @access private * - * @param WP_Block_Type $block_type Block type to check for support. - * @param string $feature Name of the feature to check support for. - * @param mixed $default Fallback value for feature support. Default false. - * @return bool Whether the feature is supported. + * @param WP_Block_Type $block_type Block type. + * + * @return boolean Whether to serialize spacing support styles & classes. */ -function wp_has_spacing_feature_support( $block_type, $feature, $default = false ) { - // Check if the specific feature has been opted into individually - // via nested flag under `spacing`. - return block_has_support( $block_type, array( 'spacing', $feature ), $default ); +function wp_skip_spacing_serialization( $block_type ) { + $spacing_support = _wp_array_get( $block_type->supports, array( 'spacing' ), false ); + + return is_array( $spacing_support ) && + array_key_exists( '__experimentalSkipSerialization', $spacing_support ) && + $spacing_support['__experimentalSkipSerialization']; +} + +/** + * Renders the spacing gap support to the block wrapper, to ensure + * that the CSS variable is rendered in all environments. + * + * @since 5.9.0 + * @access private + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function wp_render_spacing_gap_support( $block_content, $block ) { + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $has_gap_support = block_has_support( $block_type, array( 'spacing', 'blockGap' ), false ); + if ( ! $has_gap_support || ! isset( $block['attrs']['style']['spacing']['blockGap'] ) ) { + return $block_content; + } + + $gap_value = $block['attrs']['style']['spacing']['blockGap']; + + // Skip if gap value contains unsupported characters. + // Regex for CSS value borrowed from `safecss_filter_attr`, and used here + // because we only want to match against the value, not the CSS attribute. + if ( preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ) { + return $block_content; + } + + $style = sprintf( + '--wp--style--block-gap: %s', + esc_attr( $gap_value ) + ); + + // Attempt to update an existing style attribute on the wrapper element. + $injected_style = preg_replace( + '/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/', + '$1$2' . $style . '; ', + $block_content, + 1 + ); + + // If there is no existing style attribute, add one to the wrapper element. + if ( $injected_style === $block_content ) { + $injected_style = preg_replace( + '/<([a-zA-Z0-9]+)([ >])/', + '<$1 style="' . $style . '"$2', + $block_content, + 1 + ); + }; + + return $injected_style; } // Register the block support. @@ -92,3 +158,5 @@ function wp_has_spacing_feature_support( $block_type, $feature, $default = false 'apply' => 'wp_apply_spacing_support', ) ); + +add_filter( 'render_block', 'wp_render_spacing_gap_support', 10, 2 ); diff --git a/wp-includes/block-supports/typography.php b/wp-includes/block-supports/typography.php index 2d9f69e773f5..82ee29af676d 100644 --- a/wp-includes/block-supports/typography.php +++ b/wp-includes/block-supports/typography.php @@ -28,6 +28,7 @@ function wp_register_typography_support( $block_type ) { $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false ); @@ -36,6 +37,7 @@ function wp_register_typography_support( $block_type ) { || $has_font_size_support || $has_font_style_support || $has_font_weight_support + || $has_letter_spacing_support || $has_line_height_support || $has_text_decoration_support || $has_text_transform_support; @@ -93,6 +95,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false ); $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false ); @@ -102,24 +105,28 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); if ( $has_named_font_size ) { - $classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] ); + $classes[] = sprintf( 'has-%s-font-size', _wp_to_kebab_case( $block_attributes['fontSize'] ) ); } elseif ( $has_custom_font_size ) { $styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] ); } } if ( $has_font_family_support ) { - $has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); - if ( $has_font_family ) { - $font_family = $block_attributes['style']['typography']['fontFamily']; - if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) { - // Get the name from the string and add proper styles. - $index_to_splice = strrpos( $font_family, '|' ) + 1; - $font_family_name = substr( $font_family, $index_to_splice ); - $styles[] = sprintf( 'font-family: var(--wp--preset--font-family--%s);', $font_family_name ); - } else { - $styles[] = sprintf( 'font-family: %s;', $block_attributes['style']['typography']['fontFamily'] ); + $has_named_font_family = array_key_exists( 'fontFamily', $block_attributes ); + $has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); + + if ( $has_named_font_family ) { + $classes[] = sprintf( 'has-%s-font-family', _wp_to_kebab_case( $block_attributes['fontFamily'] ) ); + } elseif ( $has_custom_font_family ) { + // Before using classes, the value was serialized as a CSS Custom Property. + // We don't need this code path when it lands in core. + $font_family_custom = $block_attributes['style']['typography']['fontFamily']; + if ( strpos( $font_family_custom, 'var:preset|font-family' ) !== false ) { + $index_to_splice = strrpos( $font_family_custom, '|' ) + 1; + $font_family_slug = _wp_to_kebab_case( substr( $font_family_custom, $index_to_splice ) ); + $font_family_custom = sprintf( 'var(--wp--preset--font-family--%s)', $font_family_slug ); } + $styles[] = sprintf( 'font-family: %s;', $font_family_custom ); } } @@ -158,6 +165,13 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { } } + if ( $has_letter_spacing_support ) { + $letter_spacing_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' ); + if ( $letter_spacing_style ) { + $styles[] = $letter_spacing_style; + } + } + if ( ! empty( $classes ) ) { $attributes['class'] = implode( ' ', $classes ); } diff --git a/wp-includes/blocks.php b/wp-includes/blocks.php index f94a60d92150..f5b8b47e5ef2 100644 --- a/wp-includes/blocks.php +++ b/wp-includes/blocks.php @@ -1182,3 +1182,117 @@ function get_query_pagination_arrow( $block, $is_next ) { } return null; } + +/** + * Enqueue a stylesheet for a specific block. + * + * If the theme has opted-in to separate-styles loading, + * then the stylesheet will be enqueued on-render, + * otherwise when the block inits. + * + * @param string $block_name The block-name, including namespace. + * @param array $args An array of arguments [handle,src,deps,ver,media]. + * + * @return void + */ +function wp_enqueue_block_style( $block_name, $args ) { + $args = wp_parse_args( + $args, + array( + 'handle' => '', + 'src' => '', + 'deps' => array(), + 'ver' => false, + 'media' => 'all', + ) + ); + + /** + * Callback function to register and enqueue styles. + * + * @param string $content When the callback is used for the render_block filter, + * the content needs to be returned so the function parameter + * is to ensure the content exists. + * + * @return string + */ + $callback = static function( $content ) use ( $args ) { + // Register the stylesheet. + if ( ! empty( $args['src'] ) ) { + wp_register_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] ); + } + + // Add `path` data if provided. + if ( isset( $args['path'] ) ) { + wp_style_add_data( $args['handle'], 'path', $args['path'] ); + + // Get the RTL file path. + $rtl_file_path = str_replace( '.css', '-rtl.css', $args['path'] ); + + // Add RTL stylesheet. + if ( file_exists( $rtl_file_path ) ) { + wp_style_add_data( $args['hanle'], 'rtl', 'replace' ); + + if ( is_rtl() ) { + wp_style_add_data( $args['handle'], 'path', $rtl_file_path ); + } + } + } + + // Enqueue the stylesheet. + wp_enqueue_style( $args['handle'] ); + + return $content; + }; + + $hook = did_action( 'wp_enqueue_scripts' ) ? 'wp_footer' : 'wp_enqueue_scripts'; + if ( wp_should_load_separate_core_block_assets() ) { + $hook = "render_block_$block_name"; + } + + /* + * The filter's callback here is an anonymous function because + * using a named function in this case is not possible. + * + * The function cannot be unhooked, however, users are still able + * to dequeue the stylesheets registered/enqueued by the callback + * which is why in this case, using an anonymous function + * was deemed acceptable. + */ + add_filter( $hook, $callback ); + + // Enqueue assets in the editor. + add_action( 'enqueue_block_assets', $callback ); +} + +/** + * Allow multiple block styles. + * + * @param array $metadata Metadata for registering a block type. + * + * @return array + */ +function _wp_multiple_block_styles( $metadata ) { + foreach ( array( 'style', 'editorStyle' ) as $key ) { + if ( ! empty( $metadata[ $key ] ) && is_array( $metadata[ $key ] ) ) { + $default_style = array_shift( $metadata[ $key ] ); + foreach ( $metadata[ $key ] as $handle ) { + $args = array( 'handle' => $handle ); + if ( 0 === strpos( $handle, 'file:' ) && isset( $metadata['file'] ) ) { + $style_path = remove_block_asset_path_prefix( $handle ); + $args = array( + 'handle' => sanitize_key( "{$metadata['name']}-{$style_path}" ), + 'src' => plugins_url( $style_path, $metadata['file'] ), + ); + } + + wp_enqueue_block_style( $metadata['name'], $args ); + } + + // Only return the 1st item in the array. + $metadata[ $key ] = $default_style; + } + } + return $metadata; +} +add_filter( 'block_type_metadata', '_wp_multiple_block_styles' ); diff --git a/wp-includes/blocks/index.php b/wp-includes/blocks/index.php index d3aa3f6d7dde..3ff63f5738db 100644 --- a/wp-includes/blocks/index.php +++ b/wp-includes/blocks/index.php @@ -15,29 +15,38 @@ require ABSPATH . WPINC . '/blocks/latest-posts.php'; require ABSPATH . WPINC . '/blocks/legacy-widget.php'; require ABSPATH . WPINC . '/blocks/loginout.php'; +require ABSPATH . WPINC . '/blocks/navigation-area.php'; +require ABSPATH . WPINC . '/blocks/navigation-link.php'; +require ABSPATH . WPINC . '/blocks/navigation-submenu.php'; +require ABSPATH . WPINC . '/blocks/navigation.php'; require ABSPATH . WPINC . '/blocks/page-list.php'; +require ABSPATH . WPINC . '/blocks/pattern.php'; +require ABSPATH . WPINC . '/blocks/post-author.php'; +require ABSPATH . WPINC . '/blocks/post-comments.php'; require ABSPATH . WPINC . '/blocks/post-content.php'; require ABSPATH . WPINC . '/blocks/post-date.php'; require ABSPATH . WPINC . '/blocks/post-excerpt.php'; require ABSPATH . WPINC . '/blocks/post-featured-image.php'; +require ABSPATH . WPINC . '/blocks/post-navigation-link.php'; +require ABSPATH . WPINC . '/blocks/post-template.php'; require ABSPATH . WPINC . '/blocks/post-terms.php'; require ABSPATH . WPINC . '/blocks/post-title.php'; -require ABSPATH . WPINC . '/blocks/post-template.php'; -require ABSPATH . WPINC . '/blocks/query.php'; -require ABSPATH . WPINC . '/blocks/query-pagination.php'; require ABSPATH . WPINC . '/blocks/query-pagination-next.php'; require ABSPATH . WPINC . '/blocks/query-pagination-numbers.php'; require ABSPATH . WPINC . '/blocks/query-pagination-previous.php'; +require ABSPATH . WPINC . '/blocks/query-pagination.php'; require ABSPATH . WPINC . '/blocks/query-title.php'; +require ABSPATH . WPINC . '/blocks/query.php'; require ABSPATH . WPINC . '/blocks/rss.php'; require ABSPATH . WPINC . '/blocks/search.php'; require ABSPATH . WPINC . '/blocks/shortcode.php'; -require ABSPATH . WPINC . '/blocks/site-tagline.php'; require ABSPATH . WPINC . '/blocks/site-logo.php'; +require ABSPATH . WPINC . '/blocks/site-tagline.php'; require ABSPATH . WPINC . '/blocks/site-title.php'; require ABSPATH . WPINC . '/blocks/social-link.php'; require ABSPATH . WPINC . '/blocks/tag-cloud.php'; require ABSPATH . WPINC . '/blocks/template-part.php'; +require ABSPATH . WPINC . '/blocks/term-description.php'; /** * Registers core block types using metadata files. diff --git a/wp-includes/blocks/navigation-area.php b/wp-includes/blocks/navigation-area.php new file mode 100644 index 000000000000..76a2748361c4 --- /dev/null +++ b/wp-includes/blocks/navigation-area.php @@ -0,0 +1,21 @@ + array( + 'navigationArea' => 'area', + ), + ) + ); +} +add_action( 'init', 'register_block_core_navigation_area' ); diff --git a/wp-includes/blocks/navigation-area/block.json b/wp-includes/blocks/navigation-area/block.json new file mode 100644 index 000000000000..95ad0a513e65 --- /dev/null +++ b/wp-includes/blocks/navigation-area/block.json @@ -0,0 +1,27 @@ +{ + "apiVersion": 2, + "name": "core/navigation-area", + "title": "Navigation Area", + "category": "theme", + "description": "Define a navigation area for your theme. The navigation block associated with this area will be automatically displayed.", + "keywords": [ + "menu", + "navigation", + "links", + "location" + ], + "textdomain": "default", + "attributes": { + "area": { + "type": "string", + "default": "primary" + } + }, + "providesContext": { + "navigationArea": "area" + }, + "supports": { + "html": false, + "inserter": true + } +} diff --git a/wp-includes/blocks/navigation-link.php b/wp-includes/blocks/navigation-link.php new file mode 100644 index 000000000000..2f7620ad34f9 --- /dev/null +++ b/wp-includes/blocks/navigation-link.php @@ -0,0 +1,350 @@ + array(), + 'inline_styles' => '', + ); + + $is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false; + + // Text color. + $named_text_color = null; + $custom_text_color = null; + + if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) { + $custom_text_color = $context['customOverlayTextColor']; + } elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) { + $named_text_color = $context['overlayTextColor']; + } elseif ( array_key_exists( 'customTextColor', $context ) ) { + $custom_text_color = $context['customTextColor']; + } elseif ( array_key_exists( 'textColor', $context ) ) { + $named_text_color = $context['textColor']; + } elseif ( isset( $context['style']['color']['text'] ) ) { + $custom_text_color = $context['style']['color']['text']; + } + + // If has text color. + if ( ! is_null( $named_text_color ) ) { + // Add the color class. + array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) ); + } elseif ( ! is_null( $custom_text_color ) ) { + // Add the custom color inline style. + $colors['css_classes'][] = 'has-text-color'; + $colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color ); + } + + // Background color. + $named_background_color = null; + $custom_background_color = null; + + if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) { + $custom_background_color = $context['customOverlayBackgroundColor']; + } elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) { + $named_background_color = $context['overlayBackgroundColor']; + } elseif ( array_key_exists( 'customBackgroundColor', $context ) ) { + $custom_background_color = $context['customBackgroundColor']; + } elseif ( array_key_exists( 'backgroundColor', $context ) ) { + $named_background_color = $context['backgroundColor']; + } elseif ( isset( $context['style']['color']['background'] ) ) { + $custom_background_color = $context['style']['color']['background']; + } + + // If has background color. + if ( ! is_null( $named_background_color ) ) { + // Add the background-color class. + array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) ); + } elseif ( ! is_null( $custom_background_color ) ) { + // Add the custom background-color inline style. + $colors['css_classes'][] = 'has-background'; + $colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color ); + } + + return $colors; +} + +/** + * Build an array with CSS classes and inline styles defining the font sizes + * which will be applied to the navigation markup in the front-end. + * + * @param array $context Navigation block context. + * @return array Font size CSS classes and inline styles. + */ +function block_core_navigation_link_build_css_font_sizes( $context ) { + // CSS classes. + $font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + + $has_named_font_size = array_key_exists( 'fontSize', $context ); + $has_custom_font_size = isset( $context['style']['typography']['fontSize'] ); + + if ( $has_named_font_size ) { + // Add the font size class. + $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] ); + } elseif ( $has_custom_font_size ) { + // Add the custom font size inline style. + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] ); + } + + return $font_sizes; +} + +/** + * Returns the top-level submenu SVG chevron icon. + * + * @return string + */ +function block_core_navigation_link_render_submenu_icon() { + return ''; +} + +/** + * Renders the `core/navigation-link` block. + * + * @param array $attributes The block attributes. + * @param array $content The saved content. + * @param array $block The parsed block. + * + * @return string Returns the post content with the legacy widget added. + */ +function render_block_core_navigation_link( $attributes, $content, $block ) { + $navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] ); + $is_post_type = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind']; + $is_post_type = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] ); + + // Don't render the block's subtree if it is a draft or if the ID does not exist. + if ( $is_post_type && $navigation_link_has_id ) { + $post = get_post( $attributes['id'] ); + if ( ! $post || 'publish' !== $post->post_status ) { + return ''; + } + } + + // Don't render the block's subtree if it has no label. + if ( empty( $attributes['label'] ) ) { + return ''; + } + + $colors = block_core_navigation_link_build_css_colors( $block->context, $attributes ); + $font_sizes = block_core_navigation_link_build_css_font_sizes( $block->context ); + $classes = array_merge( + $colors['css_classes'], + $font_sizes['css_classes'] + ); + $style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] ); + + $css_classes = trim( implode( ' ', $classes ) ); + $has_submenu = count( $block->inner_blocks ) > 0; + $is_active = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] ); + + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) . + ( $is_active ? ' current-menu-item' : '' ), + 'style' => $style_attribute, + ) + ); + $html = '
  • ' . + ''; + + if ( isset( $attributes['label'] ) ) { + $html .= wp_kses( + $attributes['label'], + array( + 'code' => array(), + 'em' => array(), + 'img' => array( + 'scale' => array(), + 'class' => array(), + 'style' => array(), + 'src' => array(), + 'alt' => array(), + ), + 's' => array(), + 'span' => array( + 'style' => array(), + ), + 'strong' => array(), + ) + ); + } + + $html .= ''; + + if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) { + // The submenu icon can be hidden by a CSS rule on the Navigation Block. + $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; + } + + $html .= ''; + // End anchor tag content. + + if ( $has_submenu ) { + $inner_blocks_html = ''; + foreach ( $block->inner_blocks as $inner_block ) { + $inner_blocks_html .= $inner_block->render(); + } + + $html .= sprintf( + '
      %s
    ', + $inner_blocks_html + ); + } + + $html .= '
    • '; + + return $html; +} + +/** + * Returns a navigation link variation + * + * @param WP_Taxonomy|WP_Post_Type $entity post type or taxonomy entity. + * @param string $kind string of value 'taxonomy' or 'post-type'. + * + * @return array + */ +function build_variation_for_navigation_link( $entity, $kind ) { + $title = ''; + $description = ''; + + if ( property_exists( $entity->labels, 'item_link' ) ) { + $title = $entity->labels->item_link; + } + if ( property_exists( $entity->labels, 'item_link_description' ) ) { + $description = $entity->labels->item_link_description; + } + + $variation = array( + 'name' => $entity->name, + 'title' => $title, + 'description' => $description, + 'attributes' => array( + 'type' => $entity->name, + 'kind' => $kind, + ), + ); + + // Tweak some value for the variations. + $variation_overrides = array( + 'post_tag' => array( + 'name' => 'tag', + 'attributes' => array( + 'type' => 'tag', + 'kind' => $kind, + ), + ), + 'post_format' => array( + // The item_link and item_link_description for post formats is the + // same as for tags, so need to be overridden. + 'title' => __( 'Post Format Link' ), + 'description' => __( 'A link to a post format' ), + 'attributes' => array( + 'type' => 'post_format', + 'kind' => $kind, + ), + ), + ); + + if ( array_key_exists( $entity->name, $variation_overrides ) ) { + $variation = array_merge( + $variation, + $variation_overrides[ $entity->name ] + ); + } + + return $variation; +} + +/** + * Register the navigation link block. + * + * @uses render_block_core_navigation() + * @throws WP_Error An WP_Error exception parsing the block definition. + */ +function register_block_core_navigation_link() { + $post_types = get_post_types( array( 'show_in_nav_menus' => true ), 'objects' ); + $taxonomies = get_taxonomies( array( 'show_in_nav_menus' => true ), 'objects' ); + + // Use two separate arrays as a way to order the variations in the UI. + // Known variations (like Post Link and Page Link) are added to the + // `built_ins` array. Variations for custom post types and taxonomies are + // added to the `variations` array and will always appear after `built-ins. + $built_ins = array(); + $variations = array(); + + if ( $post_types ) { + foreach ( $post_types as $post_type ) { + $variation = build_variation_for_navigation_link( $post_type, 'post-type' ); + if ( $post_type->_builtin ) { + $built_ins[] = $variation; + } else { + $variations[] = $variation; + } + } + } + if ( $taxonomies ) { + foreach ( $taxonomies as $taxonomy ) { + $variation = build_variation_for_navigation_link( $taxonomy, 'taxonomy' ); + if ( $taxonomy->_builtin ) { + $built_ins[] = $variation; + } else { + $variations[] = $variation; + } + } + } + + register_block_type_from_metadata( + __DIR__ . '/navigation-link', + array( + 'render_callback' => 'render_block_core_navigation_link', + 'variations' => array_merge( $built_ins, $variations ), + ) + ); +} +add_action( 'init', 'register_block_core_navigation_link' ); diff --git a/wp-includes/blocks/navigation-link/block.json b/wp-includes/blocks/navigation-link/block.json new file mode 100644 index 000000000000..eac8af0cdec6 --- /dev/null +++ b/wp-includes/blocks/navigation-link/block.json @@ -0,0 +1,65 @@ +{ + "apiVersion": 2, + "name": "core/navigation-link", + "title": "Custom Link", + "category": "design", + "parent": [ + "core/navigation" + ], + "description": "Add a page, link, or another item to your navigation.", + "textdomain": "default", + "attributes": { + "label": { + "type": "string" + }, + "type": { + "type": "string" + }, + "description": { + "type": "string" + }, + "rel": { + "type": "string" + }, + "id": { + "type": "number" + }, + "opensInNewTab": { + "type": "boolean", + "default": false + }, + "url": { + "type": "string" + }, + "title": { + "type": "string" + }, + "kind": { + "type": "string" + }, + "isTopLevelLink": { + "type": "boolean" + } + }, + "usesContext": [ + "textColor", + "customTextColor", + "backgroundColor", + "customBackgroundColor", + "overlayTextColor", + "customOverlayTextColor", + "overlayBackgroundColor", + "customOverlayBackgroundColor", + "fontSize", + "customFontSize", + "showSubmenuIcon", + "style" + ], + "supports": { + "reusable": false, + "html": false, + "__experimentalSlashInserter": true + }, + "editorStyle": "wp-block-navigation-link-editor", + "style": "wp-block-navigation-link" +} diff --git a/wp-includes/blocks/navigation-link/editor-rtl.css b/wp-includes/blocks/navigation-link/editor-rtl.css new file mode 100644 index 000000000000..65c0bbfe5e8b --- /dev/null +++ b/wp-includes/blocks/navigation-link/editor-rtl.css @@ -0,0 +1,163 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** +* Submenus. +*/ +.wp-block-navigation .has-child { + cursor: pointer; +} +.wp-block-navigation .has-child .wp-block-navigation__submenu-container { + z-index: 28; +} +.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container { + z-index: 29; +} +.wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container { + visibility: visible !important; + opacity: 1 !important; + min-width: 200px !important; + height: auto !important; + width: auto !important; +} + +/** + * Navigation Items. + */ +.wp-block-navigation-item .wp-block-navigation-item__content { + cursor: text; +} +.wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected { + min-width: 20px; +} +.wp-block-navigation-item .block-list-appender { + margin-top: 16px; + margin-left: auto; + margin-bottom: 16px; + margin-right: 16px; +} + +/** + * Menu item setup state. Is shown when a menu item has no URL configured. + */ +.wp-block-navigation-link__placeholder { + position: relative; + text-decoration: none !important; + box-shadow: none !important; + background-image: none !important; +} +.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span { + --wp-underline-color: var(--wp-admin-theme-color); + background-image: linear-gradient(-45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(-135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%); + background-position: 100% 100%; + background-size: 6px 3px; + background-repeat: repeat-x; + padding-bottom: 0.1em; +} +.is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span { + --wp-underline-color: #fff; +} +.wp-block-navigation-link__placeholder.wp-block-navigation-item__content { + cursor: pointer; +} + +/** +* Link Control Transforms +*/ +.link-control-transform { + border-top: 1px solid #ccc; + padding: 0 16px 8px 16px; +} + +.link-control-transform__subheading { + font-size: 11px; + text-transform: uppercase; + font-weight: 500; + color: #1e1e1e; + margin-bottom: 1.5em; +} + +.link-control-transform__items { + display: flex; + justify-content: space-between; +} + +.link-control-transform__item { + flex-basis: 33%; + flex-direction: column; + gap: 8px; + height: auto; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/editor-rtl.min.css b/wp-includes/blocks/navigation-link/editor-rtl.min.css new file mode 100644 index 000000000000..e6d85d55c4bd --- /dev/null +++ b/wp-includes/blocks/navigation-link/editor-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation .has-child{cursor:pointer}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{z-index:28}.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container{z-index:29}.wp-block-navigation .has-child.has-child-selected>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child.is-selected>.wp-block-navigation__submenu-container{visibility:visible!important;opacity:1!important;min-width:200px!important;height:auto!important;width:auto!important}.wp-block-navigation-item .wp-block-navigation-item__content{cursor:text}.wp-block-navigation-item.is-editing,.wp-block-navigation-item.is-selected{min-width:20px}.wp-block-navigation-item .block-list-appender{margin:16px 16px 16px auto}.wp-block-navigation-link__placeholder{position:relative;text-decoration:none!important;box-shadow:none!important;background-image:none!important}.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span{--wp-underline-color:var(--wp-admin-theme-color);background-image:linear-gradient(-45deg,transparent 20%,var(--wp-underline-color) 30%,var(--wp-underline-color) 36%,transparent 46%),linear-gradient(-135deg,transparent 54%,var(--wp-underline-color) 64%,var(--wp-underline-color) 70%,transparent 80%);background-position:100% 100%;background-size:6px 3px;background-repeat:repeat-x;padding-bottom:.1em}.is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span{--wp-underline-color:#fff}.wp-block-navigation-link__placeholder.wp-block-navigation-item__content{cursor:pointer}.link-control-transform{border-top:1px solid #ccc;padding:0 16px 8px}.link-control-transform__subheading{font-size:11px;text-transform:uppercase;font-weight:500;color:#1e1e1e;margin-bottom:1.5em}.link-control-transform__items{display:flex;justify-content:space-between}.link-control-transform__item{flex-basis:33%;flex-direction:column;gap:8px;height:auto} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/editor.css b/wp-includes/blocks/navigation-link/editor.css new file mode 100644 index 000000000000..8c98bfb2b986 --- /dev/null +++ b/wp-includes/blocks/navigation-link/editor.css @@ -0,0 +1,163 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** +* Submenus. +*/ +.wp-block-navigation .has-child { + cursor: pointer; +} +.wp-block-navigation .has-child .wp-block-navigation__submenu-container { + z-index: 28; +} +.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container { + z-index: 29; +} +.wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container { + visibility: visible !important; + opacity: 1 !important; + min-width: 200px !important; + height: auto !important; + width: auto !important; +} + +/** + * Navigation Items. + */ +.wp-block-navigation-item .wp-block-navigation-item__content { + cursor: text; +} +.wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected { + min-width: 20px; +} +.wp-block-navigation-item .block-list-appender { + margin-top: 16px; + margin-right: auto; + margin-bottom: 16px; + margin-left: 16px; +} + +/** + * Menu item setup state. Is shown when a menu item has no URL configured. + */ +.wp-block-navigation-link__placeholder { + position: relative; + text-decoration: none !important; + box-shadow: none !important; + background-image: none !important; +} +.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span { + --wp-underline-color: var(--wp-admin-theme-color); + background-image: linear-gradient(45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%); + background-position: 0 100%; + background-size: 6px 3px; + background-repeat: repeat-x; + padding-bottom: 0.1em; +} +.is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span { + --wp-underline-color: #fff; +} +.wp-block-navigation-link__placeholder.wp-block-navigation-item__content { + cursor: pointer; +} + +/** +* Link Control Transforms +*/ +.link-control-transform { + border-top: 1px solid #ccc; + padding: 0 16px 8px 16px; +} + +.link-control-transform__subheading { + font-size: 11px; + text-transform: uppercase; + font-weight: 500; + color: #1e1e1e; + margin-bottom: 1.5em; +} + +.link-control-transform__items { + display: flex; + justify-content: space-between; +} + +.link-control-transform__item { + flex-basis: 33%; + flex-direction: column; + gap: 8px; + height: auto; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/editor.min.css b/wp-includes/blocks/navigation-link/editor.min.css new file mode 100644 index 000000000000..7e506847eb47 --- /dev/null +++ b/wp-includes/blocks/navigation-link/editor.min.css @@ -0,0 +1 @@ +.wp-block-navigation .has-child{cursor:pointer}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{z-index:28}.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container{z-index:29}.wp-block-navigation .has-child.has-child-selected>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child.is-selected>.wp-block-navigation__submenu-container{visibility:visible!important;opacity:1!important;min-width:200px!important;height:auto!important;width:auto!important}.wp-block-navigation-item .wp-block-navigation-item__content{cursor:text}.wp-block-navigation-item.is-editing,.wp-block-navigation-item.is-selected{min-width:20px}.wp-block-navigation-item .block-list-appender{margin:16px auto 16px 16px}.wp-block-navigation-link__placeholder{position:relative;text-decoration:none!important;box-shadow:none!important;background-image:none!important}.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span{--wp-underline-color:var(--wp-admin-theme-color);background-image:linear-gradient(45deg,transparent 20%,var(--wp-underline-color) 30%,var(--wp-underline-color) 36%,transparent 46%),linear-gradient(135deg,transparent 54%,var(--wp-underline-color) 64%,var(--wp-underline-color) 70%,transparent 80%);background-position:0 100%;background-size:6px 3px;background-repeat:repeat-x;padding-bottom:.1em}.is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span{--wp-underline-color:#fff}.wp-block-navigation-link__placeholder.wp-block-navigation-item__content{cursor:pointer}.link-control-transform{border-top:1px solid #ccc;padding:0 16px 8px}.link-control-transform__subheading{font-size:11px;text-transform:uppercase;font-weight:500;color:#1e1e1e;margin-bottom:1.5em}.link-control-transform__items{display:flex;justify-content:space-between}.link-control-transform__item{flex-basis:33%;flex-direction:column;gap:8px;height:auto} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/style-rtl.css b/wp-includes/blocks/navigation-link/style-rtl.css new file mode 100644 index 000000000000..ac92f618fb0d --- /dev/null +++ b/wp-includes/blocks/navigation-link/style-rtl.css @@ -0,0 +1,80 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-navigation-item__label { + word-break: normal; + overflow-wrap: break-word; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/style-rtl.min.css b/wp-includes/blocks/navigation-link/style-rtl.min.css new file mode 100644 index 000000000000..9b800624b136 --- /dev/null +++ b/wp-includes/blocks/navigation-link/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-navigation-item__label{word-break:normal;overflow-wrap:break-word} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/style.css b/wp-includes/blocks/navigation-link/style.css new file mode 100644 index 000000000000..ac92f618fb0d --- /dev/null +++ b/wp-includes/blocks/navigation-link/style.css @@ -0,0 +1,80 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation .wp-block-navigation-item__label { + word-break: normal; + overflow-wrap: break-word; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-link/style.min.css b/wp-includes/blocks/navigation-link/style.min.css new file mode 100644 index 000000000000..9b800624b136 --- /dev/null +++ b/wp-includes/blocks/navigation-link/style.min.css @@ -0,0 +1 @@ +.wp-block-navigation .wp-block-navigation-item__label{word-break:normal;overflow-wrap:break-word} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu.php b/wp-includes/blocks/navigation-submenu.php new file mode 100644 index 000000000000..cdb26b93b1b5 --- /dev/null +++ b/wp-includes/blocks/navigation-submenu.php @@ -0,0 +1,300 @@ + array(), + 'inline_styles' => '', + ); + + $is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false; + + // Text color. + $named_text_color = null; + $custom_text_color = null; + + if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) { + $custom_text_color = $context['customOverlayTextColor']; + } elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) { + $named_text_color = $context['overlayTextColor']; + } elseif ( array_key_exists( 'customTextColor', $context ) ) { + $custom_text_color = $context['customTextColor']; + } elseif ( array_key_exists( 'textColor', $context ) ) { + $named_text_color = $context['textColor']; + } elseif ( isset( $context['style']['color']['text'] ) ) { + $custom_text_color = $context['style']['color']['text']; + } + + // If has text color. + if ( ! is_null( $named_text_color ) ) { + // Add the color class. + array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) ); + } elseif ( ! is_null( $custom_text_color ) ) { + // Add the custom color inline style. + $colors['css_classes'][] = 'has-text-color'; + $colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color ); + } + + // Background color. + $named_background_color = null; + $custom_background_color = null; + + if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) { + $custom_background_color = $context['customOverlayBackgroundColor']; + } elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) { + $named_background_color = $context['overlayBackgroundColor']; + } elseif ( array_key_exists( 'customBackgroundColor', $context ) ) { + $custom_background_color = $context['customBackgroundColor']; + } elseif ( array_key_exists( 'backgroundColor', $context ) ) { + $named_background_color = $context['backgroundColor']; + } elseif ( isset( $context['style']['color']['background'] ) ) { + $custom_background_color = $context['style']['color']['background']; + } + + // If has background color. + if ( ! is_null( $named_background_color ) ) { + // Add the background-color class. + array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) ); + } elseif ( ! is_null( $custom_background_color ) ) { + // Add the custom background-color inline style. + $colors['css_classes'][] = 'has-background'; + $colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color ); + } + + return $colors; +} + +/** + * Build an array with CSS classes and inline styles defining the font sizes + * which will be applied to the navigation markup in the front-end. + * + * @param array $context Navigation block context. + * @return array Font size CSS classes and inline styles. + */ +function block_core_navigation_submenu_build_css_font_sizes( $context ) { + // CSS classes. + $font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + + $has_named_font_size = array_key_exists( 'fontSize', $context ); + $has_custom_font_size = isset( $context['style']['typography']['fontSize'] ); + + if ( $has_named_font_size ) { + // Add the font size class. + $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] ); + } elseif ( $has_custom_font_size ) { + // Add the custom font size inline style. + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] ); + } + + return $font_sizes; +} + +/** + * Returns the top-level submenu SVG chevron icon. + * + * @return string + */ +function block_core_navigation_submenu_render_submenu_icon() { + return ''; +} + +/** + * Renders the `core/navigation-submenu` block. + * + * @param array $attributes The block attributes. + * @param string $content The saved content. + * @param object $block The parsed block. + * + * @return string Returns the post content with the legacy widget added. + */ +function render_block_core_navigation_submenu( $attributes, $content, $block ) { + + $navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] ); + $is_post_type = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind']; + $is_post_type = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] ); + + // Don't render the block's subtree if it is a draft. + if ( $is_post_type && $navigation_link_has_id && 'publish' !== get_post_status( $attributes['id'] ) ) { + return ''; + } + + // Don't render the block's subtree if it has no label. + if ( empty( $attributes['label'] ) ) { + return ''; + } + + $colors = block_core_navigation_submenu_build_css_colors( $block->context, $attributes ); + $font_sizes = block_core_navigation_submenu_build_css_font_sizes( $block->context ); + $classes = array_merge( + $colors['css_classes'], + $font_sizes['css_classes'] + ); + $style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] ); + + $css_classes = trim( implode( ' ', $classes ) ); + $has_submenu = count( $block->inner_blocks ) > 0; + $is_active = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] ); + + $class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false; + + if ( false !== $class_name ) { + $css_classes .= ' ' . $class_name; + } + + $show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon']; + $open_on_click = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick']; + $open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] && + $show_submenu_indicators; + + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) . + ( $open_on_click ? ' open-on-click' : '' ) . ( $open_on_hover_and_click ? ' open-on-hover-click' : '' ) . + ( $is_active ? ' current-menu-item' : '' ), + 'style' => $style_attribute, + ) + ); + $html = '
  • '; + + // If Submenus open on hover, we render an anchor tag with attributes. + // If submenu icons are set to show, we also render a submenu button, so the submenu can be opened on click. + if ( ! $open_on_click ) { + $item_url = isset( $attributes['url'] ) ? esc_url( $attributes['url'] ) : ''; + // Start appending HTML attributes to anchor tag. + $html .= ' array(), + 'em' => array(), + 'img' => array( + 'scale' => array(), + 'class' => array(), + 'style' => array(), + 'src' => array(), + 'alt' => array(), + ), + 's' => array(), + 'span' => array( + 'style' => array(), + ), + 'strong' => array(), + ) + ); + } + + $html .= ''; + // End anchor tag content. + + if ( $show_submenu_indicators ) { + // The submenu icon is rendered in a button here + // so that there's a clickable elment to open the submenu. + $html .= ''; + } + } else { + // If menus open on click, we render the parent as a button. + $html .= ''; + + } + + if ( $has_submenu ) { + $inner_blocks_html = ''; + foreach ( $block->inner_blocks as $inner_block ) { + $inner_blocks_html .= $inner_block->render(); + } + + $html .= sprintf( + '
      %s
    ', + $inner_blocks_html + ); + } + + $html .= '
    • '; + + return $html; +} + +/** + * Register the navigation submenu block. + * + * @uses render_block_core_navigation_submenu() + * @throws WP_Error An WP_Error exception parsing the block definition. + */ +function register_block_core_navigation_submenu() { + register_block_type_from_metadata( + __DIR__ . '/navigation-submenu', + array( + 'render_callback' => 'render_block_core_navigation_submenu', + ) + ); +} +add_action( 'init', 'register_block_core_navigation_submenu' ); diff --git a/wp-includes/blocks/navigation-submenu/block.json b/wp-includes/blocks/navigation-submenu/block.json new file mode 100644 index 000000000000..db0791485a8c --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/block.json @@ -0,0 +1,65 @@ +{ + "apiVersion": 2, + "name": "core/navigation-submenu", + "title": "Submenu", + "category": "design", + "parent": [ + "core/navigation" + ], + "description": "Add a submenu to your navigation.", + "textdomain": "default", + "attributes": { + "label": { + "type": "string" + }, + "type": { + "type": "string" + }, + "description": { + "type": "string" + }, + "rel": { + "type": "string" + }, + "id": { + "type": "number" + }, + "opensInNewTab": { + "type": "boolean", + "default": false + }, + "url": { + "type": "string" + }, + "title": { + "type": "string" + }, + "kind": { + "type": "string" + }, + "isTopLevelItem": { + "type": "boolean" + } + }, + "usesContext": [ + "textColor", + "customTextColor", + "backgroundColor", + "customBackgroundColor", + "overlayTextColor", + "customOverlayTextColor", + "overlayBackgroundColor", + "customOverlayBackgroundColor", + "fontSize", + "customFontSize", + "showSubmenuIcon", + "openSubmenusOnClick", + "style" + ], + "supports": { + "reusable": false, + "html": false + }, + "editorStyle": "wp-block-navigation-submenu-editor", + "style": "wp-block-navigation-submenu" +} diff --git a/wp-includes/blocks/navigation-submenu/editor-rtl.css b/wp-includes/blocks/navigation-submenu/editor-rtl.css new file mode 100644 index 000000000000..7398d5d66f42 --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/editor-rtl.css @@ -0,0 +1,107 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation-submenu { + display: block; +} +.wp-block-navigation-submenu .wp-block-navigation__submenu-container { + z-index: 28; +} +.wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container { + visibility: visible !important; + opacity: 1 !important; + min-width: 200px !important; + height: auto !important; + width: auto !important; + position: absolute; + right: -1px; + top: 100%; +} +@media (min-width: 782px) { + .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + right: 100%; + top: -1px; + } + .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before { + content: ""; + position: absolute; + left: 100%; + height: 100%; + display: block; + width: 0.5em; + background: transparent; + } +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/editor-rtl.min.css b/wp-includes/blocks/navigation-submenu/editor-rtl.min.css new file mode 100644 index 000000000000..74941dab9b8f --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/editor-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation-submenu{display:block}.wp-block-navigation-submenu .wp-block-navigation__submenu-container{z-index:28}.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container{visibility:visible!important;opacity:1!important;min-width:200px!important;height:auto!important;width:auto!important;position:absolute;right:-1px;top:100%}@media (min-width:782px){.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{right:100%;top:-1px}.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{content:"";position:absolute;left:100%;height:100%;display:block;width:.5em;background:transparent}} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/editor.css b/wp-includes/blocks/navigation-submenu/editor.css new file mode 100644 index 000000000000..6e81a9be5ceb --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/editor.css @@ -0,0 +1,107 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation-submenu { + display: block; +} +.wp-block-navigation-submenu .wp-block-navigation__submenu-container { + z-index: 28; +} +.wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container { + visibility: visible !important; + opacity: 1 !important; + min-width: 200px !important; + height: auto !important; + width: auto !important; + position: absolute; + left: -1px; + top: 100%; +} +@media (min-width: 782px) { + .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + left: 100%; + top: -1px; + } + .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before { + content: ""; + position: absolute; + right: 100%; + height: 100%; + display: block; + width: 0.5em; + background: transparent; + } +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/editor.min.css b/wp-includes/blocks/navigation-submenu/editor.min.css new file mode 100644 index 000000000000..d97533e6a113 --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/editor.min.css @@ -0,0 +1 @@ +.wp-block-navigation-submenu{display:block}.wp-block-navigation-submenu .wp-block-navigation__submenu-container{z-index:28}.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container{visibility:visible!important;opacity:1!important;min-width:200px!important;height:auto!important;width:auto!important;position:absolute;left:-1px;top:100%}@media (min-width:782px){.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:-1px}.wp-block-navigation-submenu.has-child-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before,.wp-block-navigation-submenu.is-selected>.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{content:"";position:absolute;right:100%;height:100%;display:block;width:.5em;background:transparent}} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/style-rtl.css b/wp-includes/blocks/navigation-submenu/style-rtl.css new file mode 100644 index 000000000000..2a2a5b2bcbcf --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/style-rtl.css @@ -0,0 +1,95 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation-submenu { + position: relative; + display: flex; +} +.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { + stroke: currentColor; +} + +button.wp-block-navigation-item__content { + background-color: transparent; + border: none; + color: currentColor; + font-size: inherit; + font-family: inherit; +} + +.wp-block-navigation-submenu__toggle { + cursor: pointer; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/style-rtl.min.css b/wp-includes/blocks/navigation-submenu/style-rtl.min.css new file mode 100644 index 000000000000..f393fea2a60c --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation-submenu{position:relative;display:flex}.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{stroke:currentColor}button.wp-block-navigation-item__content{background-color:initial;border:none;color:currentColor;font-size:inherit;font-family:inherit}.wp-block-navigation-submenu__toggle{cursor:pointer} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/style.css b/wp-includes/blocks/navigation-submenu/style.css new file mode 100644 index 000000000000..2a2a5b2bcbcf --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/style.css @@ -0,0 +1,95 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation-submenu { + position: relative; + display: flex; +} +.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { + stroke: currentColor; +} + +button.wp-block-navigation-item__content { + background-color: transparent; + border: none; + color: currentColor; + font-size: inherit; + font-family: inherit; +} + +.wp-block-navigation-submenu__toggle { + cursor: pointer; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation-submenu/style.min.css b/wp-includes/blocks/navigation-submenu/style.min.css new file mode 100644 index 000000000000..f393fea2a60c --- /dev/null +++ b/wp-includes/blocks/navigation-submenu/style.min.css @@ -0,0 +1 @@ +.wp-block-navigation-submenu{position:relative;display:flex}.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{stroke:currentColor}button.wp-block-navigation-item__content{background-color:initial;border:none;color:currentColor;font-size:inherit;font-family:inherit}.wp-block-navigation-submenu__toggle{cursor:pointer} \ No newline at end of file diff --git a/wp-includes/blocks/navigation.php b/wp-includes/blocks/navigation.php new file mode 100644 index 000000000000..6f52c41c71d7 --- /dev/null +++ b/wp-includes/blocks/navigation.php @@ -0,0 +1,429 @@ + array(), + 'inline_styles' => '', + ); + + // Text color. + $has_named_text_color = array_key_exists( 'textColor', $attributes ); + $has_custom_text_color = array_key_exists( 'customTextColor', $attributes ); + + // If has text color. + if ( $has_custom_text_color || $has_named_text_color ) { + // Add has-text-color class. + $colors['css_classes'][] = 'has-text-color'; + } + + if ( $has_named_text_color ) { + // Add the color class. + $colors['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] ); + } elseif ( $has_custom_text_color ) { + // Add the custom color inline style. + $colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] ); + } + + // Background color. + $has_named_background_color = array_key_exists( 'backgroundColor', $attributes ); + $has_custom_background_color = array_key_exists( 'customBackgroundColor', $attributes ); + + // If has background color. + if ( $has_custom_background_color || $has_named_background_color ) { + // Add has-background class. + $colors['css_classes'][] = 'has-background'; + } + + if ( $has_named_background_color ) { + // Add the background-color class. + $colors['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); + } elseif ( $has_custom_background_color ) { + // Add the custom background-color inline style. + $colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] ); + } + + return $colors; +} + +/** + * Build an array with CSS classes and inline styles defining the font sizes + * which will be applied to the navigation markup in the front-end. + * + * @param array $attributes Navigation block attributes. + * @return array Font size CSS classes and inline styles. + */ +function block_core_navigation_build_css_font_sizes( $attributes ) { + // CSS classes. + $font_sizes = array( + 'css_classes' => array(), + 'inline_styles' => '', + ); + + $has_named_font_size = array_key_exists( 'fontSize', $attributes ); + $has_custom_font_size = array_key_exists( 'customFontSize', $attributes ); + + if ( $has_named_font_size ) { + // Add the font size class. + $font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] ); + } elseif ( $has_custom_font_size ) { + // Add the custom font size inline style. + $font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $attributes['customFontSize'] ); + } + + return $font_sizes; +} + +/** + * Returns the menu items for a WordPress menu location. + * + * @param string $location The menu location. + * @return array Menu items for the location. + */ +function gutenberg_get_menu_items_at_location( $location ) { + if ( empty( $location ) ) { + return; + } + + // Build menu data. The following approximates the code in + // `wp_nav_menu()` and `gutenberg_output_block_nav_menu`. + + // Find the location in the list of locations, returning early if the + // location can't be found. + $locations = get_nav_menu_locations(); + if ( ! isset( $locations[ $location ] ) ) { + return; + } + + // Get the menu from the location, returning early if there is no + // menu or there was an error. + $menu = wp_get_nav_menu_object( $locations[ $location ] ); + if ( ! $menu || is_wp_error( $menu ) ) { + return; + } + + $menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) ); + _wp_menu_item_classes_by_context( $menu_items ); + + return $menu_items; +} + +/** + * Sorts a standard array of menu items into a nested structure keyed by the + * id of the parent menu. + * + * @param array $menu_items Menu items to sort. + * @return array An array keyed by the id of the parent menu where each element + * is an array of menu items that belong to that parent. + */ +function gutenberg_sort_menu_items_by_parent_id( $menu_items ) { + $sorted_menu_items = array(); + foreach ( (array) $menu_items as $menu_item ) { + $sorted_menu_items[ $menu_item->menu_order ] = $menu_item; + } + unset( $menu_items, $menu_item ); + + $menu_items_by_parent_id = array(); + foreach ( $sorted_menu_items as $menu_item ) { + $menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item; + } + + return $menu_items_by_parent_id; +} + +/** + * Turns menu item data into a nested array of parsed blocks + * + * @param array $menu_items An array of menu items that represent + * an individual level of a menu. + * @param array $menu_items_by_parent_id An array keyed by the id of the + * parent menu where each element is an + * array of menu items that belong to + * that parent. + * @return array An array of parsed block data. + */ +function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) { + if ( empty( $menu_items ) ) { + return array(); + } + + $blocks = array(); + + foreach ( $menu_items as $menu_item ) { + $class_name = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null; + $id = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null; + $opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target; + $rel = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null; + $kind = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom'; + + $block = array( + 'blockName' => 'core/navigation-link', + 'attrs' => array( + 'className' => $class_name, + 'description' => $menu_item->description, + 'id' => $id, + 'kind' => $kind, + 'label' => $menu_item->title, + 'opensInNewTab' => $opens_in_new_tab, + 'rel' => $rel, + 'title' => $menu_item->attr_title, + 'type' => $menu_item->object, + 'url' => $menu_item->url, + ), + ); + + $block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items( + isset( $menu_items_by_parent_id[ $menu_item->ID ] ) + ? $menu_items_by_parent_id[ $menu_item->ID ] + : array(), + $menu_items_by_parent_id + ); + + $blocks[] = $block; + } + + return $blocks; +} + +/** + * Returns the top-level submenu SVG chevron icon. + * + * @return string + */ +function block_core_navigation_render_submenu_icon() { + return ''; +} + +/** + * Renders the `core/navigation` block on server. + * + * @param array $attributes The block attributes. + * @param array $content The saved content. + * @param array $block The parsed block. + * + * @return string Returns the post content with the legacy widget added. + */ +function render_block_core_navigation( $attributes, $content, $block ) { + /** + * Deprecated: + * The rgbTextColor and rgbBackgroundColor attributes + * have been deprecated in favor of + * customTextColor and customBackgroundColor ones. + * Move the values from old attrs to the new ones. + */ + if ( isset( $attributes['rgbTextColor'] ) && empty( $attributes['textColor'] ) ) { + $attributes['customTextColor'] = $attributes['rgbTextColor']; + } + + if ( isset( $attributes['rgbBackgroundColor'] ) && empty( $attributes['backgroundColor'] ) ) { + $attributes['customBackgroundColor'] = $attributes['rgbBackgroundColor']; + } + + unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] ); + + /** + * This is for backwards compatibility after `isResponsive` attribute has been removed. + */ + $has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive']; + $is_responsive_menu = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute; + $should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ); + if ( $should_load_view_script ) { + wp_enqueue_script( 'wp-block-navigation-view' ); + } + + $inner_blocks = $block->inner_blocks; + + // If `__unstableLocation` is defined, create inner blocks from the classic menu assigned to that location. + if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) { + $menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] ); + if ( empty( $menu_items ) ) { + return ''; + } + + $menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items ); + $parsed_blocks = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id ); + $inner_blocks = new WP_Block_List( $parsed_blocks, $attributes ); + } + + if ( ! empty( $block->context['navigationArea'] ) ) { + $area = $block->context['navigationArea']; + $mapping = get_option( 'fse_navigation_areas', array() ); + if ( ! empty( $mapping[ $area ] ) ) { + $attributes['navigationMenuId'] = $mapping[ $area ]; + } + } + + // Load inner blocks from the navigation post. + if ( array_key_exists( 'navigationMenuId', $attributes ) ) { + $navigation_post = get_post( $attributes['navigationMenuId'] ); + if ( ! isset( $navigation_post ) ) { + return ''; + } + + $parsed_blocks = parse_blocks( $navigation_post->post_content ); + + // 'parse_blocks' includes a null block with '\n\n' as the content when + // it encounters whitespace. This code strips it. + $compacted_blocks = array_filter( + $parsed_blocks, + function( $block ) { + return isset( $block['blockName'] ); + } + ); + + // TODO - this uses the full navigation block attributes for the + // context which could be refined. + $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); + } + + if ( empty( $inner_blocks ) ) { + return ''; + } + $colors = block_core_navigation_build_css_colors( $attributes ); + $font_sizes = block_core_navigation_build_css_font_sizes( $attributes ); + $classes = array_merge( + $colors['css_classes'], + $font_sizes['css_classes'], + $is_responsive_menu ? array( 'is-responsive' ) : array() + ); + + $inner_blocks_html = ''; + $is_list_open = false; + foreach ( $inner_blocks as $inner_block ) { + if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) { + $is_list_open = true; + $inner_blocks_html .= '
      '; + } + if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && 'core/site-title' !== $inner_block->name && 'core/site-logo' !== $inner_block->name && 'core/navigation-submenu' !== $inner_block->name && $is_list_open ) { + $is_list_open = false; + $inner_blocks_html .= '
    '; + } + if ( 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name ) { + $inner_blocks_html .= '
  • ' . $inner_block->render() . '
    • '; + } else { + $inner_blocks_html .= $inner_block->render(); + } + } + + if ( $is_list_open ) { + $inner_blocks_html .= ''; + } + + $block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : ''; + + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => implode( ' ', $classes ), + 'style' => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'], + ) + ); + + $modal_unique_id = uniqid(); + + // Determine whether or not navigation elements should be wrapped in the markup required to make it responsive, + // return early if they don't. + if ( ! $is_responsive_menu ) { + return sprintf( + '', + $wrapper_attributes, + $inner_blocks_html + ); + } + + $is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu']; + + $responsive_container_classes = array( + 'wp-block-navigation__responsive-container', + $is_hidden_by_default ? 'hidden-by-default' : '', + ); + $open_button_classes = array( + 'wp-block-navigation__responsive-container-open', + $is_hidden_by_default ? 'always-shown' : '', + ); + + $responsive_container_markup = sprintf( + ' + ', + $modal_unique_id, + $inner_blocks_html, + __( 'Open menu' ), // Open button label. + __( 'Close menu' ), // Close button label. + implode( ' ', $responsive_container_classes ), + implode( ' ', $open_button_classes ) + ); + + return sprintf( + '', + $wrapper_attributes, + $responsive_container_markup + ); +} + +/** + * Register the navigation block. + * + * @uses render_block_core_navigation() + * @throws WP_Error An WP_Error exception parsing the block definition. + */ +function register_block_core_navigation() { + register_block_type_from_metadata( + __DIR__ . '/navigation', + array( + 'render_callback' => 'render_block_core_navigation', + ) + ); +} + +add_action( 'init', 'register_block_core_navigation' ); + +/** + * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly. + * + * @param array $parsed_block The block being rendered. + * @return array The block being rendered without typographic presets. + */ +function block_core_navigation_typographic_presets_backcompatibility( $parsed_block ) { + if ( 'core/navigation' === $parsed_block['blockName'] ) { + $attribute_to_prefix_map = array( + 'fontStyle' => 'var:preset|font-style|', + 'fontWeight' => 'var:preset|font-weight|', + 'textDecoration' => 'var:preset|text-decoration|', + 'textTransform' => 'var:preset|text-transform|', + ); + foreach ( $attribute_to_prefix_map as $style_attribute => $prefix ) { + if ( ! empty( $parsed_block['attrs']['style']['typography'][ $style_attribute ] ) ) { + $prefix_len = strlen( $prefix ); + $attribute_value = &$parsed_block['attrs']['style']['typography'][ $style_attribute ]; + if ( 0 === strncmp( $attribute_value, $prefix, $prefix_len ) ) { + $attribute_value = substr( $attribute_value, $prefix_len ); + } + if ( 'textDecoration' === $style_attribute && 'strikethrough' === $attribute_value ) { + $attribute_value = 'line-through'; + } + } + } + } + return $parsed_block; +} + +add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' ); diff --git a/wp-includes/blocks/navigation/block.json b/wp-includes/blocks/navigation/block.json new file mode 100644 index 000000000000..931010815030 --- /dev/null +++ b/wp-includes/blocks/navigation/block.json @@ -0,0 +1,124 @@ +{ + "apiVersion": 2, + "name": "core/navigation", + "title": "Navigation", + "category": "theme", + "description": "A collection of blocks that allow visitors to get around your site.", + "keywords": [ + "menu", + "navigation", + "links" + ], + "textdomain": "default", + "attributes": { + "navigationMenuId": { + "type": "number" + }, + "textColor": { + "type": "string" + }, + "customTextColor": { + "type": "string" + }, + "rgbTextColor": { + "type": "string" + }, + "backgroundColor": { + "type": "string" + }, + "customBackgroundColor": { + "type": "string" + }, + "rgbBackgroundColor": { + "type": "string" + }, + "showSubmenuIcon": { + "type": "boolean", + "default": true + }, + "openSubmenusOnClick": { + "type": "boolean", + "default": false + }, + "overlayMenu": { + "type": "string", + "default": "mobile" + }, + "__unstableLocation": { + "type": "string" + }, + "overlayBackgroundColor": { + "type": "string" + }, + "customOverlayBackgroundColor": { + "type": "string" + }, + "overlayTextColor": { + "type": "string" + }, + "customOverlayTextColor": { + "type": "string" + } + }, + "usesContext": [ "navigationArea" ], + "providesContext": { + "textColor": "textColor", + "customTextColor": "customTextColor", + "backgroundColor": "backgroundColor", + "customBackgroundColor": "customBackgroundColor", + "overlayTextColor": "overlayTextColor", + "customOverlayTextColor": "customOverlayTextColor", + "overlayBackgroundColor": "overlayBackgroundColor", + "customOverlayBackgroundColor": "customOverlayBackgroundColor", + "fontSize": "fontSize", + "customFontSize": "customFontSize", + "showSubmenuIcon": "showSubmenuIcon", + "openSubmenusOnClick": "openSubmenusOnClick", + "style": "style", + "orientation": "orientation" + }, + "supports": { + "align": [ + "wide", + "full" + ], + "anchor": true, + "html": false, + "inserter": true, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalTextTransform": true, + "__experimentalFontFamily": true, + "__experimentalTextDecoration": true, + "__experimentalDefaultControls": { + "fontSize": true + } + }, + "spacing": { + "blockGap": true, + "units": [ + "px", + "em", + "rem", + "vh", + "vw" + ], + "__experimentalDefaultControls": { + "blockGap": true + } + }, + "__experimentalLayout": { + "allowSwitching": false, + "allowInheriting": false, + "default": { + "type": "flex" + } + } + }, + "viewScript": "file:./view.min.js", + "editorStyle": "wp-block-navigation-editor", + "style": "wp-block-navigation" +} diff --git a/wp-includes/blocks/navigation/editor-rtl.css b/wp-includes/blocks/navigation/editor-rtl.css new file mode 100644 index 000000000000..6b9592990904 --- /dev/null +++ b/wp-includes/blocks/navigation/editor-rtl.css @@ -0,0 +1,491 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** +* Editor only CSS. +*/ +.editor-styles-wrapper .wp-block-navigation ul { + margin-top: 0; + margin-bottom: 0; + margin-right: 0; + padding-right: 0; +} +.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block { + margin-right: revert; + margin-left: revert; +} + +.wp-block-navigation-item__label { + display: inline; +} + +/** + * Submenus. + */ +.wp-block-navigation__container.is-parent-of-selected-block { + visibility: visible; + opacity: 1; +} + +.wp-block-navigation__container, +.wp-block-navigation-item { + background-color: inherit; +} + +.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container { + opacity: 0; + visibility: hidden; +} + +.has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container { + display: flex; + opacity: 1; + visibility: visible; +} + +.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container { + opacity: 1; + visibility: visible; +} + +.is-editing > .wp-block-navigation__container { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; +} + +.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container { + opacity: 1; + visibility: hidden; +} +.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper { + visibility: visible; +} + +/** + * Colors Selector component + */ +.block-library-colors-selector { + width: auto; +} +.block-library-colors-selector .block-library-colors-selector__toggle { + display: block; + margin: 0 auto; + padding: 3px; + width: auto; +} +.block-library-colors-selector .block-library-colors-selector__icon-container { + height: 30px; + position: relative; + margin: 0 auto; + padding: 3px; + display: flex; + align-items: center; + border-radius: 4px; +} +.block-library-colors-selector .block-library-colors-selector__state-selection { + margin-right: auto; + margin-left: auto; + border-radius: 11px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + width: 22px; + min-width: 22px; + height: 22px; + min-height: 22px; + line-height: 20px; + padding: 2px; +} +.block-library-colors-selector .block-library-colors-selector__state-selection > svg { + min-width: auto !important; +} +.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg, +.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path { + color: inherit; +} + +.block-library-colors-selector__popover .color-palette-controller-container { + padding: 16px; +} +.block-library-colors-selector__popover .components-base-control__label { + height: 20px; + line-height: 20px; +} +.block-library-colors-selector__popover .component-color-indicator { + float: left; + margin-top: 2px; +} +.block-library-colors-selector__popover .components-panel__body-title { + display: none; +} + +.wp-block-navigation .block-editor-button-block-appender { + justify-content: flex-start; +} + +/** + * Setup state + */ +.components-placeholder.wp-block-navigation-placeholder { + outline: none; + padding: 0; + box-shadow: none; + background: none; + min-height: 0; + color: inherit; +} +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset { + font-size: inherit; +} +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button { + margin-bottom: 0; +} +.is-selected .components-placeholder.wp-block-navigation-placeholder { + color: #1e1e1e; +} + +.wp-block-navigation-placeholder .components-spinner { + margin-top: -4px; + margin-right: 4px; + vertical-align: middle; + margin-left: 7px; +} + +@keyframes loadingpulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} +.wp-block-navigation-placeholder__preview { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + width: 100%; + overflow: hidden; +} +.wp-block-navigation-placeholder__preview.is-loading { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item { + position: relative; + min-width: 72px; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item::before { + display: block; + content: ""; + border-radius: 2px; + background: currentColor; + height: 16px; + width: 100%; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon { + height: 24px; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg { + fill: currentColor; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item, +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon { + opacity: 0.3; +} +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading) { + display: flex; + opacity: 0; + width: 0; + overflow: hidden; + flex-wrap: nowrap; + flex: 0; +} +.is-vertical.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview:not(.is-loading) { + display: none; +} + +.wp-block-navigation-placeholder__controls { + padding: 8px; + border-radius: 2px; + background-color: #fff; + box-shadow: inset 0 0 0 1px #1e1e1e; + flex-direction: row; + align-items: center; + display: none; + position: relative; + z-index: 1; + float: right; + width: 100%; +} +.is-large .wp-block-navigation-placeholder__controls { + padding: 4px 8px; +} +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls { + display: flex; +} +.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions { + flex-direction: column; +} +.is-selected.is-vertical .wp-block-navigation-placeholder__controls { + display: inline-flex; + padding: 12px; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon { + margin-left: 12px; + height: 36px; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + margin-left: 12px; + padding: 0; + align-items: center; + justify-content: flex-start; + line-height: 0; + margin-right: 5px; + display: none; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg { + margin-left: 4px; +} +.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + margin-bottom: 4px; + margin-right: 0; +} +.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + display: inline-flex; +} + +.is-vertical .wp-block-navigation-placeholder, +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + min-height: 156px; +} + +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + flex-direction: column; + align-items: flex-start; +} + +.wp-block-navigation-placeholder__actions { + display: flex; + font-size: 13px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} +.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon { + padding: 6px 12px 6px 4px; + display: flex; + flex-direction: row-reverse; +} +.wp-block-navigation-placeholder__actions .components-dropdown, +.wp-block-navigation-placeholder__actions > .components-button { + margin-left: 12px; +} + +/** + * Mobile menu. + */ +@media (min-width: 600px) { + .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close { + display: none; + } +} + +.wp-block-navigation__responsive-container.is-menu-open { + position: fixed; + top: 155px; +} +@media (min-width: 782px) { + .wp-block-navigation__responsive-container.is-menu-open { + top: 93px; + } +} +@media (min-width: 782px) { + .wp-block-navigation__responsive-container.is-menu-open { + right: 36px; + } +} +@media (min-width: 960px) { + .wp-block-navigation__responsive-container.is-menu-open { + right: 160px; + } +} + +@media (min-width: 782px) { + .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { + top: 141px; + } +} + +.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, +.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { + top: 141px; +} + +.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open { + left: 280px; +} + +.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { + right: 0; + top: 155px; +} +@media (min-width: 782px) { + .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { + top: 61px; + } +} +@media (min-width: 782px) { + .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { + top: 109px; + } +} +.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, +.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { + top: 109px; +} + +body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open { + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +@media (min-width: 600px) { + .wp-block-navigation__responsive-close { + pointer-events: none; + } + .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close, +.wp-block-navigation__responsive-close .block-editor-block-list__layout * { + pointer-events: all; + } +} +.wp-block-navigation__responsive-close .wp-block-pages-list__item__link { + pointer-events: none; +} + +.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, +.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { + padding: 0; + height: auto; + color: inherit; +} + +.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender { + margin-top: 16px; +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.wp-block-navigation__unsaved-changes { + position: relative; +} +.wp-block-navigation__unsaved-changes .components-spinner { + position: absolute; + top: calc(50% - 18px / 2); + right: calc(50% - 18px / 2); + opacity: 0; + animation: 0.5s linear 2s normal forwards fadein; +} + +@keyframes fadeouthalf { + 0% { + opacity: 1; + } + 100% { + opacity: 0.5; + } +} +.wp-block-navigation__unsaved-changes-overlay.is-saving { + opacity: 1; + animation: 0.5s linear 2s normal forwards fadeouthalf; +} + +.wp-block-navigation-delete-menu-button { + width: 100%; + justify-content: center; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/editor-rtl.min.css b/wp-includes/blocks/navigation/editor-rtl.min.css new file mode 100644 index 000000000000..b481a2df458a --- /dev/null +++ b/wp-includes/blocks/navigation/editor-rtl.min.css @@ -0,0 +1 @@ +.editor-styles-wrapper .wp-block-navigation ul{margin-top:0;margin-bottom:0;margin-right:0;padding-right:0}.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block{margin-right:revert;margin-left:revert}.wp-block-navigation-item__label{display:inline}.wp-block-navigation__container.is-parent-of-selected-block{visibility:visible;opacity:1}.wp-block-navigation-item,.wp-block-navigation__container{background-color:inherit}.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover>.wp-block-navigation__submenu-container{opacity:0;visibility:hidden}.has-child.has-child-selected>.wp-block-navigation__submenu-container,.has-child.is-selected>.wp-block-navigation__submenu-container{display:flex;opacity:1;visibility:visible}.is-dragging-components-draggable .has-child.is-dragging-within>.wp-block-navigation__submenu-container{opacity:1;visibility:visible}.is-editing>.wp-block-navigation__container{visibility:visible;opacity:1;display:flex;flex-direction:column}.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container{opacity:1;visibility:hidden}.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container .block-editor-block-draggable-chip-wrapper{visibility:visible}.block-library-colors-selector{width:auto}.block-library-colors-selector .block-library-colors-selector__toggle{display:block;margin:0 auto;padding:3px;width:auto}.block-library-colors-selector .block-library-colors-selector__icon-container{height:30px;position:relative;margin:0 auto;padding:3px;display:flex;align-items:center;border-radius:4px}.block-library-colors-selector .block-library-colors-selector__state-selection{margin-right:auto;margin-left:auto;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);width:22px;min-width:22px;height:22px;min-height:22px;line-height:20px;padding:2px}.block-library-colors-selector .block-library-colors-selector__state-selection>svg{min-width:auto!important}.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg,.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg path{color:inherit}.block-library-colors-selector__popover .color-palette-controller-container{padding:16px}.block-library-colors-selector__popover .components-base-control__label{height:20px;line-height:20px}.block-library-colors-selector__popover .component-color-indicator{float:left;margin-top:2px}.block-library-colors-selector__popover .components-panel__body-title{display:none}.wp-block-navigation .block-editor-button-block-appender{justify-content:flex-start}.components-placeholder.wp-block-navigation-placeholder{outline:none;padding:0;box-shadow:none;background:none;min-height:0;color:inherit}.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset{font-size:inherit}.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button{margin-bottom:0}.is-selected .components-placeholder.wp-block-navigation-placeholder{color:#1e1e1e}.wp-block-navigation-placeholder .components-spinner{margin-top:-4px;margin-right:4px;vertical-align:middle;margin-left:7px}@keyframes loadingpulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.wp-block-navigation-placeholder__preview{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;overflow:hidden}.wp-block-navigation-placeholder__preview.is-loading{animation:loadingpulse 1s linear infinite;animation-delay:.5s}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item{position:relative;min-width:72px}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item:before{display:block;content:"";border-radius:2px;background:currentColor;height:16px;width:100%}.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon{height:24px}.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg{fill:currentColor}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item,.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon{opacity:.3}.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading){display:flex;opacity:0;width:0;overflow:hidden;flex-wrap:nowrap;flex:0}.is-vertical.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading),.wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview:not(.is-loading),.wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview:not(.is-loading){display:none}.wp-block-navigation-placeholder__controls{padding:8px;border-radius:2px;background-color:#fff;box-shadow:inset 0 0 0 1px #1e1e1e;flex-direction:row;align-items:center;display:none;position:relative;z-index:1;float:right;width:100%}.is-large .wp-block-navigation-placeholder__controls{padding:4px 8px}.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls{display:flex}.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions{flex-direction:column}.is-selected.is-vertical .wp-block-navigation-placeholder__controls{display:inline-flex;padding:12px}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon{margin-left:12px;height:36px}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{margin-left:12px;padding:0;align-items:center;justify-content:flex-start;line-height:0;margin-right:5px;display:none}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg{margin-left:4px}.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{margin-bottom:4px;margin-right:0}.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{display:inline-flex}.is-vertical .wp-block-navigation-placeholder,.is-vertical .wp-block-navigation-placeholder__controls,.is-vertical .wp-block-navigation-placeholder__preview{min-height:156px}.is-vertical .wp-block-navigation-placeholder__controls,.is-vertical .wp-block-navigation-placeholder__preview{flex-direction:column;align-items:flex-start}.wp-block-navigation-placeholder__actions{display:flex;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon{padding:6px 12px 6px 4px;display:flex;flex-direction:row-reverse}.wp-block-navigation-placeholder__actions .components-dropdown,.wp-block-navigation-placeholder__actions>.components-button{margin-left:12px}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close{display:none}}.wp-block-navigation__responsive-container.is-menu-open{position:fixed;top:155px}@media (min-width:782px){.wp-block-navigation__responsive-container.is-menu-open{top:93px;right:36px}}@media (min-width:960px){.wp-block-navigation__responsive-container.is-menu-open{right:160px}}@media (min-width:782px){.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{top:141px}}.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{top:141px}.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open{left:280px}.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{right:0;top:155px}@media (min-width:782px){.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{top:61px}}@media (min-width:782px){.is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{top:109px}}.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{top:109px}body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open{top:0;left:0;bottom:0;right:0}@media (min-width:600px){.wp-block-navigation__responsive-close{pointer-events:none}.wp-block-navigation__responsive-close .block-editor-block-list__layout *,.wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close{pointer-events:all}}.wp-block-navigation__responsive-close .wp-block-pages-list__item__link{pointer-events:none}.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{padding:0;height:auto;color:inherit}.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender{margin-top:16px}@keyframes fadein{0%{opacity:0}to{opacity:1}}.wp-block-navigation__unsaved-changes{position:relative}.wp-block-navigation__unsaved-changes .components-spinner{position:absolute;top:calc(50% - 9px);right:calc(50% - 9px);opacity:0;animation:fadein .5s linear 2s normal forwards}@keyframes fadeouthalf{0%{opacity:1}to{opacity:.5}}.wp-block-navigation__unsaved-changes-overlay.is-saving{opacity:1;animation:fadeouthalf .5s linear 2s normal forwards}.wp-block-navigation-delete-menu-button{width:100%;justify-content:center;margin-bottom:16px} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/editor.css b/wp-includes/blocks/navigation/editor.css new file mode 100644 index 000000000000..a597f3bd71eb --- /dev/null +++ b/wp-includes/blocks/navigation/editor.css @@ -0,0 +1,491 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** +* Editor only CSS. +*/ +.editor-styles-wrapper .wp-block-navigation ul { + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + padding-left: 0; +} +.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block { + margin-left: revert; + margin-right: revert; +} + +.wp-block-navigation-item__label { + display: inline; +} + +/** + * Submenus. + */ +.wp-block-navigation__container.is-parent-of-selected-block { + visibility: visible; + opacity: 1; +} + +.wp-block-navigation__container, +.wp-block-navigation-item { + background-color: inherit; +} + +.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container { + opacity: 0; + visibility: hidden; +} + +.has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container { + display: flex; + opacity: 1; + visibility: visible; +} + +.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container { + opacity: 1; + visibility: visible; +} + +.is-editing > .wp-block-navigation__container { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; +} + +.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container { + opacity: 1; + visibility: hidden; +} +.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper { + visibility: visible; +} + +/** + * Colors Selector component + */ +.block-library-colors-selector { + width: auto; +} +.block-library-colors-selector .block-library-colors-selector__toggle { + display: block; + margin: 0 auto; + padding: 3px; + width: auto; +} +.block-library-colors-selector .block-library-colors-selector__icon-container { + height: 30px; + position: relative; + margin: 0 auto; + padding: 3px; + display: flex; + align-items: center; + border-radius: 4px; +} +.block-library-colors-selector .block-library-colors-selector__state-selection { + margin-left: auto; + margin-right: auto; + border-radius: 11px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + width: 22px; + min-width: 22px; + height: 22px; + min-height: 22px; + line-height: 20px; + padding: 2px; +} +.block-library-colors-selector .block-library-colors-selector__state-selection > svg { + min-width: auto !important; +} +.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg, +.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path { + color: inherit; +} + +.block-library-colors-selector__popover .color-palette-controller-container { + padding: 16px; +} +.block-library-colors-selector__popover .components-base-control__label { + height: 20px; + line-height: 20px; +} +.block-library-colors-selector__popover .component-color-indicator { + float: right; + margin-top: 2px; +} +.block-library-colors-selector__popover .components-panel__body-title { + display: none; +} + +.wp-block-navigation .block-editor-button-block-appender { + justify-content: flex-start; +} + +/** + * Setup state + */ +.components-placeholder.wp-block-navigation-placeholder { + outline: none; + padding: 0; + box-shadow: none; + background: none; + min-height: 0; + color: inherit; +} +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset { + font-size: inherit; +} +.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button { + margin-bottom: 0; +} +.is-selected .components-placeholder.wp-block-navigation-placeholder { + color: #1e1e1e; +} + +.wp-block-navigation-placeholder .components-spinner { + margin-top: -4px; + margin-left: 4px; + vertical-align: middle; + margin-right: 7px; +} + +@keyframes loadingpulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} +.wp-block-navigation-placeholder__preview { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + width: 100%; + overflow: hidden; +} +.wp-block-navigation-placeholder__preview.is-loading { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item { + position: relative; + min-width: 72px; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item::before { + display: block; + content: ""; + border-radius: 2px; + background: currentColor; + height: 16px; + width: 100%; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon { + height: 24px; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg { + fill: currentColor; +} +.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item, +.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon { + opacity: 0.3; +} +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading) { + display: flex; + opacity: 0; + width: 0; + overflow: hidden; + flex-wrap: nowrap; + flex: 0; +} +.is-vertical.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview:not(.is-loading), .wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview:not(.is-loading) { + display: none; +} + +.wp-block-navigation-placeholder__controls { + padding: 8px; + border-radius: 2px; + background-color: #fff; + box-shadow: inset 0 0 0 1px #1e1e1e; + flex-direction: row; + align-items: center; + display: none; + position: relative; + z-index: 1; + float: left; + width: 100%; +} +.is-large .wp-block-navigation-placeholder__controls { + padding: 4px 8px; +} +.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls { + display: flex; +} +.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions { + flex-direction: column; +} +.is-selected.is-vertical .wp-block-navigation-placeholder__controls { + display: inline-flex; + padding: 12px; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon { + margin-right: 12px; + height: 36px; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + margin-right: 12px; + padding: 0; + align-items: center; + justify-content: flex-start; + line-height: 0; + margin-left: 5px; + display: none; +} +.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg { + margin-right: 4px; +} +.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + margin-bottom: 4px; + margin-left: 0; +} +.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator { + display: inline-flex; +} + +.is-vertical .wp-block-navigation-placeholder, +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + min-height: 156px; +} + +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + flex-direction: column; + align-items: flex-start; +} + +.wp-block-navigation-placeholder__actions { + display: flex; + font-size: 13px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} +.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon { + padding: 6px 4px 6px 12px; + display: flex; + flex-direction: row-reverse; +} +.wp-block-navigation-placeholder__actions .components-dropdown, +.wp-block-navigation-placeholder__actions > .components-button { + margin-right: 12px; +} + +/** + * Mobile menu. + */ +@media (min-width: 600px) { + .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close { + display: none; + } +} + +.wp-block-navigation__responsive-container.is-menu-open { + position: fixed; + top: 155px; +} +@media (min-width: 782px) { + .wp-block-navigation__responsive-container.is-menu-open { + top: 93px; + } +} +@media (min-width: 782px) { + .wp-block-navigation__responsive-container.is-menu-open { + left: 36px; + } +} +@media (min-width: 960px) { + .wp-block-navigation__responsive-container.is-menu-open { + left: 160px; + } +} + +@media (min-width: 782px) { + .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { + top: 141px; + } +} + +.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, +.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { + top: 141px; +} + +.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open { + right: 280px; +} + +.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { + left: 0; + top: 155px; +} +@media (min-width: 782px) { + .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { + top: 61px; + } +} +@media (min-width: 782px) { + .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { + top: 109px; + } +} +.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, +.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { + top: 109px; +} + +body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media (min-width: 600px) { + .wp-block-navigation__responsive-close { + pointer-events: none; + } + .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close, +.wp-block-navigation__responsive-close .block-editor-block-list__layout * { + pointer-events: all; + } +} +.wp-block-navigation__responsive-close .wp-block-pages-list__item__link { + pointer-events: none; +} + +.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, +.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { + padding: 0; + height: auto; + color: inherit; +} + +.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender { + margin-top: 16px; +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.wp-block-navigation__unsaved-changes { + position: relative; +} +.wp-block-navigation__unsaved-changes .components-spinner { + position: absolute; + top: calc(50% - 18px / 2); + left: calc(50% - 18px / 2); + opacity: 0; + animation: 0.5s linear 2s normal forwards fadein; +} + +@keyframes fadeouthalf { + 0% { + opacity: 1; + } + 100% { + opacity: 0.5; + } +} +.wp-block-navigation__unsaved-changes-overlay.is-saving { + opacity: 1; + animation: 0.5s linear 2s normal forwards fadeouthalf; +} + +.wp-block-navigation-delete-menu-button { + width: 100%; + justify-content: center; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/editor.min.css b/wp-includes/blocks/navigation/editor.min.css new file mode 100644 index 000000000000..05cb1d34d470 --- /dev/null +++ b/wp-includes/blocks/navigation/editor.min.css @@ -0,0 +1 @@ +.editor-styles-wrapper .wp-block-navigation ul{margin-top:0;margin-bottom:0;margin-left:0;padding-left:0}.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block{margin-left:revert;margin-right:revert}.wp-block-navigation-item__label{display:inline}.wp-block-navigation__container.is-parent-of-selected-block{visibility:visible;opacity:1}.wp-block-navigation-item,.wp-block-navigation__container{background-color:inherit}.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover>.wp-block-navigation__submenu-container{opacity:0;visibility:hidden}.has-child.has-child-selected>.wp-block-navigation__submenu-container,.has-child.is-selected>.wp-block-navigation__submenu-container{display:flex;opacity:1;visibility:visible}.is-dragging-components-draggable .has-child.is-dragging-within>.wp-block-navigation__submenu-container{opacity:1;visibility:visible}.is-editing>.wp-block-navigation__container{visibility:visible;opacity:1;display:flex;flex-direction:column}.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container{opacity:1;visibility:hidden}.is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container .block-editor-block-draggable-chip-wrapper{visibility:visible}.block-library-colors-selector{width:auto}.block-library-colors-selector .block-library-colors-selector__toggle{display:block;margin:0 auto;padding:3px;width:auto}.block-library-colors-selector .block-library-colors-selector__icon-container{height:30px;position:relative;margin:0 auto;padding:3px;display:flex;align-items:center;border-radius:4px}.block-library-colors-selector .block-library-colors-selector__state-selection{margin-left:auto;margin-right:auto;border-radius:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);width:22px;min-width:22px;height:22px;min-height:22px;line-height:20px;padding:2px}.block-library-colors-selector .block-library-colors-selector__state-selection>svg{min-width:auto!important}.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg,.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg path{color:inherit}.block-library-colors-selector__popover .color-palette-controller-container{padding:16px}.block-library-colors-selector__popover .components-base-control__label{height:20px;line-height:20px}.block-library-colors-selector__popover .component-color-indicator{float:right;margin-top:2px}.block-library-colors-selector__popover .components-panel__body-title{display:none}.wp-block-navigation .block-editor-button-block-appender{justify-content:flex-start}.components-placeholder.wp-block-navigation-placeholder{outline:none;padding:0;box-shadow:none;background:none;min-height:0;color:inherit}.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset{font-size:inherit}.components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button{margin-bottom:0}.is-selected .components-placeholder.wp-block-navigation-placeholder{color:#1e1e1e}.wp-block-navigation-placeholder .components-spinner{margin-top:-4px;margin-left:4px;vertical-align:middle;margin-right:7px}@keyframes loadingpulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.wp-block-navigation-placeholder__preview{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;overflow:hidden}.wp-block-navigation-placeholder__preview.is-loading{animation:loadingpulse 1s linear infinite;animation-delay:.5s}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item{position:relative;min-width:72px}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item:before{display:block;content:"";border-radius:2px;background:currentColor;height:16px;width:100%}.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon{height:24px}.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg{fill:currentColor}.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item,.wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon{opacity:.3}.wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading){display:flex;opacity:0;width:0;overflow:hidden;flex-wrap:nowrap;flex:0}.is-vertical.is-selected .wp-block-navigation-placeholder__preview:not(.is-loading),.wp-block-navigation.is-selected .is-medium .wp-block-navigation-placeholder__preview:not(.is-loading),.wp-block-navigation.is-selected .is-small .wp-block-navigation-placeholder__preview:not(.is-loading){display:none}.wp-block-navigation-placeholder__controls{padding:8px;border-radius:2px;background-color:#fff;box-shadow:inset 0 0 0 1px #1e1e1e;flex-direction:row;align-items:center;display:none;position:relative;z-index:1;float:left;width:100%}.is-large .wp-block-navigation-placeholder__controls{padding:4px 8px}.wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls{display:flex}.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions{flex-direction:column}.is-selected.is-vertical .wp-block-navigation-placeholder__controls{display:inline-flex;padding:12px}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon{margin-right:12px;height:36px}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{margin-right:12px;padding:0;align-items:center;justify-content:flex-start;line-height:0;margin-left:5px;display:none}.wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator svg{margin-right:4px}.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{margin-bottom:4px;margin-left:0}.is-large .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator{display:inline-flex}.is-vertical .wp-block-navigation-placeholder,.is-vertical .wp-block-navigation-placeholder__controls,.is-vertical .wp-block-navigation-placeholder__preview{min-height:156px}.is-vertical .wp-block-navigation-placeholder__controls,.is-vertical .wp-block-navigation-placeholder__preview{flex-direction:column;align-items:flex-start}.wp-block-navigation-placeholder__actions{display:flex;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.wp-block-navigation-placeholder__actions .components-button.components-dropdown-menu__toggle.has-icon{padding:6px 4px 6px 12px;display:flex;flex-direction:row-reverse}.wp-block-navigation-placeholder__actions .components-dropdown,.wp-block-navigation-placeholder__actions>.components-button{margin-right:12px}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close{display:none}}.wp-block-navigation__responsive-container.is-menu-open{position:fixed;top:155px}@media (min-width:782px){.wp-block-navigation__responsive-container.is-menu-open{top:93px;left:36px}}@media (min-width:960px){.wp-block-navigation__responsive-container.is-menu-open{left:160px}}@media (min-width:782px){.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{top:141px}}.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{top:141px}.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open{right:280px}.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{left:0;top:155px}@media (min-width:782px){.is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{top:61px}}@media (min-width:782px){.is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{top:109px}}.is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{top:109px}body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open{top:0;right:0;bottom:0;left:0}@media (min-width:600px){.wp-block-navigation__responsive-close{pointer-events:none}.wp-block-navigation__responsive-close .block-editor-block-list__layout *,.wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close{pointer-events:all}}.wp-block-navigation__responsive-close .wp-block-pages-list__item__link{pointer-events:none}.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{padding:0;height:auto;color:inherit}.is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender{margin-top:16px}@keyframes fadein{0%{opacity:0}to{opacity:1}}.wp-block-navigation__unsaved-changes{position:relative}.wp-block-navigation__unsaved-changes .components-spinner{position:absolute;top:calc(50% - 9px);left:calc(50% - 9px);opacity:0;animation:fadein .5s linear 2s normal forwards}@keyframes fadeouthalf{0%{opacity:1}to{opacity:.5}}.wp-block-navigation__unsaved-changes-overlay.is-saving{opacity:1;animation:fadeouthalf .5s linear 2s normal forwards}.wp-block-navigation-delete-menu-button{width:100%;justify-content:center;margin-bottom:16px} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/style-rtl.css b/wp-includes/blocks/navigation/style-rtl.css new file mode 100644 index 000000000000..02a39cc21c97 --- /dev/null +++ b/wp-includes/blocks/navigation/style-rtl.css @@ -0,0 +1,430 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation { + position: relative; +} +.wp-block-navigation ul { + margin-top: 0; + margin-bottom: 0; + margin-right: 0; + padding-right: 0; +} +.wp-block-navigation ul, +.wp-block-navigation ul li { + list-style: none; + padding: 0; +} +.wp-block-navigation .wp-block-navigation-item { + display: flex; + align-items: center; + position: relative; +} +.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty { + display: none; +} +.wp-block-navigation .wp-block-navigation-item__content { + color: inherit; + display: block; + padding: 0; +} +.wp-block-navigation[style*=text-decoration] .wp-block-navigation-item, +.wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container { + text-decoration: inherit; +} +.wp-block-navigation[style*=text-decoration] a { + text-decoration: inherit; +} +.wp-block-navigation[style*=text-decoration] a:focus, .wp-block-navigation[style*=text-decoration] a:active { + text-decoration: inherit; +} +.wp-block-navigation:not([style*=text-decoration]) a { + text-decoration: none; +} +.wp-block-navigation:not([style*=text-decoration]) a:focus, .wp-block-navigation:not([style*=text-decoration]) a:active { + text-decoration: none; +} +.wp-block-navigation .wp-block-navigation__submenu-icon { + align-self: center; + height: inherit; + line-height: 0; + margin-right: 6px; + padding: 0; + background-color: inherit; + color: currentColor; + border: none; +} +.wp-block-navigation .wp-block-navigation__submenu-icon svg { + display: inline-block; + stroke: currentColor; +} + +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) { + background-color: inherit; + color: inherit; + position: absolute; + z-index: 2; + display: flex; + flex-direction: column; + align-items: normal; + opacity: 0; + transition: opacity 0.1s linear; + visibility: hidden; + width: 0; + height: 0; + right: -1px; + top: 100%; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content { + display: flex; + flex-grow: 1; + white-space: nowrap; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { + margin-left: 0; + margin-right: auto; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { + margin: 0; +} +@media (min-width: 782px) { + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container { + right: 100%; + top: -1px; + } + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before { + content: ""; + position: absolute; + left: 100%; + height: 100%; + display: block; + width: 0.5em; + background: transparent; + } + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg { + transform: rotate(90deg); + } +} +.wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} +.wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} +.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} + +.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { + right: 0; + top: 100%; +} +@media (min-width: 782px) { + .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + right: 100%; + top: 0; + } +} + +/** + * Margins + */ +.wp-block-navigation, +.wp-block-navigation .wp-block-page-list, +.wp-block-navigation__container, +.wp-block-navigation__responsive-container-content { + gap: var(--wp--style--block-gap, 2em); +} + +.wp-block-navigation:where(.has-background), +.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list, +.wp-block-navigation:where(.has-background) .wp-block-navigation__container { + gap: var(--wp--style--block-gap, 0.5em); +} + +/** + * Paddings + */ +.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content { + padding: 0.5em 1em; +} + +.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { + padding: 0.5em 1em; +} + +/** + * Justifications. + */ +@media (min-width: 782px) { + .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { + right: auto; + left: 0; + } + .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + right: auto; + left: 100%; + } +} +.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { + background-color: #fff; + color: #000; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +.wp-block-navigation__container { + list-style: none; + margin: 0; + padding-right: 0; +} +.wp-block-navigation__container .is-responsive { + display: none; +} + +/** + * Mobile menu. + */ +.wp-block-navigation__responsive-container { + display: none; + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; +} +.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { + display: contents; +} +.wp-block-navigation__responsive-container.is-menu-open { + display: flex; + flex-direction: column; + overflow: auto; + z-index: 100000; + padding: 72px 24px 24px 24px; + background-color: inherit; + align-items: inherit; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { + display: flex; + flex-direction: column; + align-items: var(--justification-setting, inherit); + overflow: auto; + padding: 0; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { + display: none; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { + opacity: 1; + visibility: visible; + height: auto; + width: auto; + overflow: initial; + min-width: 200px; + position: static; + border: none; + padding-right: 32px; + padding-left: 32px; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { + gap: var(--wp--style--block-gap, 2em); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container { + padding-top: var(--wp--style--block-gap, 2em); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { + padding: 0; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { + display: flex; + flex-direction: column; + align-items: var(--justification-setting, inherit); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { + color: inherit !important; + background: transparent !important; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + left: auto; + right: auto; +} +@media (min-width: 600px) { + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { + display: contents; + width: 100%; + position: relative; + z-index: 2; + background-color: inherit; + } + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { + display: none; + } + .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + right: 0; + } +} + +.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { + background-color: #fff; + color: #000; +} + +.wp-block-navigation__responsive-container-open, +.wp-block-navigation__responsive-container-close { + vertical-align: middle; + cursor: pointer; + color: currentColor; + background: transparent; + border: none; + margin: 0; + padding: 0; +} +.wp-block-navigation__responsive-container-open svg, +.wp-block-navigation__responsive-container-close svg { + fill: currentColor; + pointer-events: none; + display: block; + width: 24px; + height: 24px; +} + +.wp-block-navigation__responsive-container-open { + display: flex; +} +@media (min-width: 600px) { + .wp-block-navigation__responsive-container-open:not(.always-shown) { + display: none; + } +} + +.wp-block-navigation__responsive-container-close { + position: absolute; + top: 24px; + left: 24px; + z-index: 2; +} + +.wp-block-navigation__responsive-close { + width: 100%; +} + +.is-menu-open .wp-block-navigation__responsive-close, +.is-menu-open .wp-block-navigation__responsive-dialog, +.is-menu-open .wp-block-navigation__responsive-container-content { + width: 100%; + height: 100%; +} + +html.has-modal-open { + overflow: hidden; +} + +.wp-block-navigation__responsive-close, +.wp-block-navigation__responsive-dialog, +.wp-block-navigation__container { + display: contents; +} +.is-menu-open .wp-block-navigation__responsive-close, +.is-menu-open .wp-block-navigation__responsive-dialog, +.is-menu-open .wp-block-navigation__container { + align-items: inherit; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/style-rtl.min.css b/wp-includes/blocks/navigation/style-rtl.min.css new file mode 100644 index 000000000000..95710daa2ed5 --- /dev/null +++ b/wp-includes/blocks/navigation/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-navigation{position:relative}.wp-block-navigation ul{margin-top:0;margin-bottom:0;margin-right:0;padding-right:0}.wp-block-navigation ul,.wp-block-navigation ul li{list-style:none;padding:0}.wp-block-navigation .wp-block-navigation-item{display:flex;align-items:center;position:relative}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{display:none}.wp-block-navigation .wp-block-navigation-item__content{color:inherit;display:block;padding:0}.wp-block-navigation[style*=text-decoration] .wp-block-navigation-item,.wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container,.wp-block-navigation[style*=text-decoration] a,.wp-block-navigation[style*=text-decoration] a:active,.wp-block-navigation[style*=text-decoration] a:focus{text-decoration:inherit}.wp-block-navigation:not([style*=text-decoration]) a,.wp-block-navigation:not([style*=text-decoration]) a:active,.wp-block-navigation:not([style*=text-decoration]) a:focus{text-decoration:none}.wp-block-navigation .wp-block-navigation__submenu-icon{align-self:center;height:inherit;line-height:0;margin-right:6px;padding:0;background-color:inherit;color:currentColor;border:none}.wp-block-navigation .wp-block-navigation__submenu-icon svg{display:inline-block;stroke:currentColor}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container){background-color:inherit;color:inherit;position:absolute;z-index:2;display:flex;flex-direction:column;align-items:normal;opacity:0;transition:opacity .1s linear;visibility:hidden;width:0;height:0;right:-1px;top:100%}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container)>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;flex-grow:1;white-space:nowrap}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container)>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{margin-left:0;margin-right:auto}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content{margin:0}@media (min-width:782px){.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container{right:100%;top:-1px}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container:before{content:"";position:absolute;left:100%;height:100%;display:block;width:.5em;background:transparent}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg{transform:rotate(90deg)}}.wp-block-navigation .has-child:where(:not(.open-on-click)):hover>.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within>.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{right:0;top:100%}@media (min-width:782px){.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{right:100%;top:0}}.wp-block-navigation,.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-container-content{gap:var(--wp--style--block-gap,2em)}.wp-block-navigation:where(.has-background),.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list,.wp-block-navigation:where(.has-background) .wp-block-navigation__container{gap:var(--wp--style--block-gap,.5em)}.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content,.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content{padding:.5em 1em}@media (min-width:782px){.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{right:auto;left:0}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{right:auto;left:100%}}.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff;color:#000;border:1px solid rgba(0,0,0,.15)}.wp-block-navigation__container{list-style:none;margin:0;padding-right:0}.wp-block-navigation__container .is-responsive{display:none}.wp-block-navigation__responsive-container{display:none;position:fixed;top:0;right:0;left:0;bottom:0}.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{display:contents}.wp-block-navigation__responsive-container.is-menu-open{display:flex;flex-direction:column;overflow:auto;z-index:100000;padding:72px 24px 24px;background-color:inherit;align-items:inherit}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:flex;flex-direction:column;align-items:var(--justification-setting,inherit);overflow:auto;padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{opacity:1;visibility:visible;height:auto;width:auto;overflow:initial;min-width:200px;position:static;border:none;padding-right:32px;padding-left:32px}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{gap:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{padding-top:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{display:flex;flex-direction:column;align-items:var(--justification-setting,inherit)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{color:inherit!important;background:transparent!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:auto;right:auto}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:contents;width:100%;position:relative;z-index:2;background-color:inherit}.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{right:0}}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{background-color:#fff;color:#000}.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{vertical-align:middle;cursor:pointer;color:currentColor;background:transparent;border:none;margin:0;padding:0}.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{fill:currentColor;pointer-events:none;display:block;width:24px;height:24px}.wp-block-navigation__responsive-container-open{display:flex}@media (min-width:600px){.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}}.wp-block-navigation__responsive-container-close{position:absolute;top:24px;left:24px;z-index:2}.wp-block-navigation__responsive-close{width:100%}.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{width:100%;height:100%}html.has-modal-open{overflow:hidden}.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-dialog{display:contents}.is-menu-open .wp-block-navigation__container,.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-dialog{align-items:inherit} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/style.css b/wp-includes/blocks/navigation/style.css new file mode 100644 index 000000000000..f1d004f0af87 --- /dev/null +++ b/wp-includes/blocks/navigation/style.css @@ -0,0 +1,430 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-navigation { + position: relative; +} +.wp-block-navigation ul { + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + padding-left: 0; +} +.wp-block-navigation ul, +.wp-block-navigation ul li { + list-style: none; + padding: 0; +} +.wp-block-navigation .wp-block-navigation-item { + display: flex; + align-items: center; + position: relative; +} +.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty { + display: none; +} +.wp-block-navigation .wp-block-navigation-item__content { + color: inherit; + display: block; + padding: 0; +} +.wp-block-navigation[style*=text-decoration] .wp-block-navigation-item, +.wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container { + text-decoration: inherit; +} +.wp-block-navigation[style*=text-decoration] a { + text-decoration: inherit; +} +.wp-block-navigation[style*=text-decoration] a:focus, .wp-block-navigation[style*=text-decoration] a:active { + text-decoration: inherit; +} +.wp-block-navigation:not([style*=text-decoration]) a { + text-decoration: none; +} +.wp-block-navigation:not([style*=text-decoration]) a:focus, .wp-block-navigation:not([style*=text-decoration]) a:active { + text-decoration: none; +} +.wp-block-navigation .wp-block-navigation__submenu-icon { + align-self: center; + height: inherit; + line-height: 0; + margin-left: 6px; + padding: 0; + background-color: inherit; + color: currentColor; + border: none; +} +.wp-block-navigation .wp-block-navigation__submenu-icon svg { + display: inline-block; + stroke: currentColor; +} + +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) { + background-color: inherit; + color: inherit; + position: absolute; + z-index: 2; + display: flex; + flex-direction: column; + align-items: normal; + opacity: 0; + transition: opacity 0.1s linear; + visibility: hidden; + width: 0; + height: 0; + left: -1px; + top: 100%; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content { + display: flex; + flex-grow: 1; + white-space: nowrap; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { + margin-right: 0; + margin-left: auto; +} +.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { + margin: 0; +} +@media (min-width: 782px) { + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container { + left: 100%; + top: -1px; + } + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before { + content: ""; + position: absolute; + right: 100%; + height: 100%; + display: block; + width: 0.5em; + background: transparent; + } + .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg { + transform: rotate(-90deg); + } +} +.wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} +.wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} +.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-container { + visibility: visible; + opacity: 1; + width: auto; + height: auto; + min-width: 200px; +} + +.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { + left: 0; + top: 100%; +} +@media (min-width: 782px) { + .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + left: 100%; + top: 0; + } +} + +/** + * Margins + */ +.wp-block-navigation, +.wp-block-navigation .wp-block-page-list, +.wp-block-navigation__container, +.wp-block-navigation__responsive-container-content { + gap: var(--wp--style--block-gap, 2em); +} + +.wp-block-navigation:where(.has-background), +.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list, +.wp-block-navigation:where(.has-background) .wp-block-navigation__container { + gap: var(--wp--style--block-gap, 0.5em); +} + +/** + * Paddings + */ +.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content { + padding: 0.5em 1em; +} + +.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { + padding: 0.5em 1em; +} + +/** + * Justifications. + */ +@media (min-width: 782px) { + .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { + left: auto; + right: 0; + } + .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { + left: auto; + right: 100%; + } +} +.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { + background-color: #fff; + color: #000; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +.wp-block-navigation__container { + list-style: none; + margin: 0; + padding-left: 0; +} +.wp-block-navigation__container .is-responsive { + display: none; +} + +/** + * Mobile menu. + */ +.wp-block-navigation__responsive-container { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { + display: contents; +} +.wp-block-navigation__responsive-container.is-menu-open { + display: flex; + flex-direction: column; + overflow: auto; + z-index: 100000; + padding: 72px 24px 24px 24px; + background-color: inherit; + align-items: inherit; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { + display: flex; + flex-direction: column; + align-items: var(--justification-setting, inherit); + overflow: auto; + padding: 0; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { + display: none; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { + opacity: 1; + visibility: visible; + height: auto; + width: auto; + overflow: initial; + min-width: 200px; + position: static; + border: none; + padding-left: 32px; + padding-right: 32px; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { + gap: var(--wp--style--block-gap, 2em); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container { + padding-top: var(--wp--style--block-gap, 2em); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { + padding: 0; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { + display: flex; + flex-direction: column; + align-items: var(--justification-setting, inherit); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container, +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { + color: inherit !important; + background: transparent !important; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + right: auto; + left: auto; +} +@media (min-width: 600px) { + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { + display: contents; + width: 100%; + position: relative; + z-index: 2; + background-color: inherit; + } + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { + display: none; + } + .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + left: 0; + } +} + +.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { + background-color: #fff; + color: #000; +} + +.wp-block-navigation__responsive-container-open, +.wp-block-navigation__responsive-container-close { + vertical-align: middle; + cursor: pointer; + color: currentColor; + background: transparent; + border: none; + margin: 0; + padding: 0; +} +.wp-block-navigation__responsive-container-open svg, +.wp-block-navigation__responsive-container-close svg { + fill: currentColor; + pointer-events: none; + display: block; + width: 24px; + height: 24px; +} + +.wp-block-navigation__responsive-container-open { + display: flex; +} +@media (min-width: 600px) { + .wp-block-navigation__responsive-container-open:not(.always-shown) { + display: none; + } +} + +.wp-block-navigation__responsive-container-close { + position: absolute; + top: 24px; + right: 24px; + z-index: 2; +} + +.wp-block-navigation__responsive-close { + width: 100%; +} + +.is-menu-open .wp-block-navigation__responsive-close, +.is-menu-open .wp-block-navigation__responsive-dialog, +.is-menu-open .wp-block-navigation__responsive-container-content { + width: 100%; + height: 100%; +} + +html.has-modal-open { + overflow: hidden; +} + +.wp-block-navigation__responsive-close, +.wp-block-navigation__responsive-dialog, +.wp-block-navigation__container { + display: contents; +} +.is-menu-open .wp-block-navigation__responsive-close, +.is-menu-open .wp-block-navigation__responsive-dialog, +.is-menu-open .wp-block-navigation__container { + align-items: inherit; +} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/style.min.css b/wp-includes/blocks/navigation/style.min.css new file mode 100644 index 000000000000..9bffb1654c81 --- /dev/null +++ b/wp-includes/blocks/navigation/style.min.css @@ -0,0 +1 @@ +.wp-block-navigation{position:relative}.wp-block-navigation ul{margin-top:0;margin-bottom:0;margin-left:0;padding-left:0}.wp-block-navigation ul,.wp-block-navigation ul li{list-style:none;padding:0}.wp-block-navigation .wp-block-navigation-item{display:flex;align-items:center;position:relative}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{display:none}.wp-block-navigation .wp-block-navigation-item__content{color:inherit;display:block;padding:0}.wp-block-navigation[style*=text-decoration] .wp-block-navigation-item,.wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container,.wp-block-navigation[style*=text-decoration] a,.wp-block-navigation[style*=text-decoration] a:active,.wp-block-navigation[style*=text-decoration] a:focus{text-decoration:inherit}.wp-block-navigation:not([style*=text-decoration]) a,.wp-block-navigation:not([style*=text-decoration]) a:active,.wp-block-navigation:not([style*=text-decoration]) a:focus{text-decoration:none}.wp-block-navigation .wp-block-navigation__submenu-icon{align-self:center;height:inherit;line-height:0;margin-left:6px;padding:0;background-color:inherit;color:currentColor;border:none}.wp-block-navigation .wp-block-navigation__submenu-icon svg{display:inline-block;stroke:currentColor}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container){background-color:inherit;color:inherit;position:absolute;z-index:2;display:flex;flex-direction:column;align-items:normal;opacity:0;transition:opacity .1s linear;visibility:hidden;width:0;height:0;left:-1px;top:100%}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container)>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;flex-grow:1;white-space:nowrap}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container)>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{margin-right:0;margin-left:auto}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content{margin:0}@media (min-width:782px){.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container{left:100%;top:-1px}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container:before{content:"";position:absolute;right:100%;height:100%;display:block;width:.5em;background:transparent}.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg{transform:rotate(-90deg)}}.wp-block-navigation .has-child:where(:not(.open-on-click)):hover>.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within>.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-container{visibility:visible;opacity:1;width:auto;height:auto;min-width:200px}.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{left:0;top:100%}@media (min-width:782px){.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:0}}.wp-block-navigation,.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-container-content{gap:var(--wp--style--block-gap,2em)}.wp-block-navigation:where(.has-background),.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list,.wp-block-navigation:where(.has-background) .wp-block-navigation__container{gap:var(--wp--style--block-gap,.5em)}.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content,.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content{padding:.5em 1em}@media (min-width:782px){.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{left:auto;right:0}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:auto;right:100%}}.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff;color:#000;border:1px solid rgba(0,0,0,.15)}.wp-block-navigation__container{list-style:none;margin:0;padding-left:0}.wp-block-navigation__container .is-responsive{display:none}.wp-block-navigation__responsive-container{display:none;position:fixed;top:0;left:0;right:0;bottom:0}.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{display:contents}.wp-block-navigation__responsive-container.is-menu-open{display:flex;flex-direction:column;overflow:auto;z-index:100000;padding:72px 24px 24px;background-color:inherit;align-items:inherit}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:flex;flex-direction:column;align-items:var(--justification-setting,inherit);overflow:auto;padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{opacity:1;visibility:visible;height:auto;width:auto;overflow:initial;min-width:200px;position:static;border:none;padding-left:32px;padding-right:32px}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{gap:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{padding-top:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{display:flex;flex-direction:column;align-items:var(--justification-setting,inherit)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{color:inherit!important;background:transparent!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{right:auto;left:auto}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:contents;width:100%;position:relative;z-index:2;background-color:inherit}.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:0}}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{background-color:#fff;color:#000}.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{vertical-align:middle;cursor:pointer;color:currentColor;background:transparent;border:none;margin:0;padding:0}.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{fill:currentColor;pointer-events:none;display:block;width:24px;height:24px}.wp-block-navigation__responsive-container-open{display:flex}@media (min-width:600px){.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}}.wp-block-navigation__responsive-container-close{position:absolute;top:24px;right:24px;z-index:2}.wp-block-navigation__responsive-close{width:100%}.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{width:100%;height:100%}html.has-modal-open{overflow:hidden}.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-dialog{display:contents}.is-menu-open .wp-block-navigation__container,.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-dialog{align-items:inherit} \ No newline at end of file diff --git a/wp-includes/blocks/navigation/view.asset.php b/wp-includes/blocks/navigation/view.asset.php new file mode 100644 index 000000000000..8f38312697f1 --- /dev/null +++ b/wp-includes/blocks/navigation/view.asset.php @@ -0,0 +1 @@ + array(), 'version' => 'f63141a5a5be0a629c2580a2c4b8e4f8'); \ No newline at end of file diff --git a/wp-includes/blocks/navigation/view.js b/wp-includes/blocks/navigation/view.js new file mode 100644 index 000000000000..42aba176bc29 --- /dev/null +++ b/wp-includes/blocks/navigation/view.js @@ -0,0 +1,619 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "kVj6"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "kVj6": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +// ESM COMPAT FLAG +__webpack_require__.r(__webpack_exports__); + +// CONCATENATED MODULE: ./node_modules/micromodal/dist/micromodal.es.js +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); +} + +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return _arrayLikeToArray(arr); +} + +function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(n); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + + return arr2; +} + +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +var MicroModal = function () { + + var FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])']; + + var Modal = /*#__PURE__*/function () { + function Modal(_ref) { + var targetModal = _ref.targetModal, + _ref$triggers = _ref.triggers, + triggers = _ref$triggers === void 0 ? [] : _ref$triggers, + _ref$onShow = _ref.onShow, + onShow = _ref$onShow === void 0 ? function () {} : _ref$onShow, + _ref$onClose = _ref.onClose, + onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose, + _ref$openTrigger = _ref.openTrigger, + openTrigger = _ref$openTrigger === void 0 ? 'data-micromodal-trigger' : _ref$openTrigger, + _ref$closeTrigger = _ref.closeTrigger, + closeTrigger = _ref$closeTrigger === void 0 ? 'data-micromodal-close' : _ref$closeTrigger, + _ref$openClass = _ref.openClass, + openClass = _ref$openClass === void 0 ? 'is-open' : _ref$openClass, + _ref$disableScroll = _ref.disableScroll, + disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll, + _ref$disableFocus = _ref.disableFocus, + disableFocus = _ref$disableFocus === void 0 ? false : _ref$disableFocus, + _ref$awaitCloseAnimat = _ref.awaitCloseAnimation, + awaitCloseAnimation = _ref$awaitCloseAnimat === void 0 ? false : _ref$awaitCloseAnimat, + _ref$awaitOpenAnimati = _ref.awaitOpenAnimation, + awaitOpenAnimation = _ref$awaitOpenAnimati === void 0 ? false : _ref$awaitOpenAnimati, + _ref$debugMode = _ref.debugMode, + debugMode = _ref$debugMode === void 0 ? false : _ref$debugMode; + + _classCallCheck(this, Modal); + + // Save a reference of the modal + this.modal = document.getElementById(targetModal); // Save a reference to the passed config + + this.config = { + debugMode: debugMode, + disableScroll: disableScroll, + openTrigger: openTrigger, + closeTrigger: closeTrigger, + openClass: openClass, + onShow: onShow, + onClose: onClose, + awaitCloseAnimation: awaitCloseAnimation, + awaitOpenAnimation: awaitOpenAnimation, + disableFocus: disableFocus + }; // Register click events only if pre binding eventListeners + + if (triggers.length > 0) this.registerTriggers.apply(this, _toConsumableArray(triggers)); // pre bind functions for event listeners + + this.onClick = this.onClick.bind(this); + this.onKeydown = this.onKeydown.bind(this); + } + /** + * Loops through all openTriggers and binds click event + * @param {array} triggers [Array of node elements] + * @return {void} + */ + + + _createClass(Modal, [{ + key: "registerTriggers", + value: function registerTriggers() { + var _this = this; + + for (var _len = arguments.length, triggers = new Array(_len), _key = 0; _key < _len; _key++) { + triggers[_key] = arguments[_key]; + } + + triggers.filter(Boolean).forEach(function (trigger) { + trigger.addEventListener('click', function (event) { + return _this.showModal(event); + }); + }); + } + }, { + key: "showModal", + value: function showModal() { + var _this2 = this; + + var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + this.activeElement = document.activeElement; + this.modal.setAttribute('aria-hidden', 'false'); + this.modal.classList.add(this.config.openClass); + this.scrollBehaviour('disable'); + this.addEventListeners(); + + if (this.config.awaitOpenAnimation) { + var handler = function handler() { + _this2.modal.removeEventListener('animationend', handler, false); + + _this2.setFocusToFirstNode(); + }; + + this.modal.addEventListener('animationend', handler, false); + } else { + this.setFocusToFirstNode(); + } + + this.config.onShow(this.modal, this.activeElement, event); + } + }, { + key: "closeModal", + value: function closeModal() { + var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var modal = this.modal; + this.modal.setAttribute('aria-hidden', 'true'); + this.removeEventListeners(); + this.scrollBehaviour('enable'); + + if (this.activeElement && this.activeElement.focus) { + this.activeElement.focus(); + } + + this.config.onClose(this.modal, this.activeElement, event); + + if (this.config.awaitCloseAnimation) { + var openClass = this.config.openClass; // <- old school ftw + + this.modal.addEventListener('animationend', function handler() { + modal.classList.remove(openClass); + modal.removeEventListener('animationend', handler, false); + }, false); + } else { + modal.classList.remove(this.config.openClass); + } + } + }, { + key: "closeModalById", + value: function closeModalById(targetModal) { + this.modal = document.getElementById(targetModal); + if (this.modal) this.closeModal(); + } + }, { + key: "scrollBehaviour", + value: function scrollBehaviour(toggle) { + if (!this.config.disableScroll) return; + var body = document.querySelector('body'); + + switch (toggle) { + case 'enable': + Object.assign(body.style, { + overflow: '' + }); + break; + + case 'disable': + Object.assign(body.style, { + overflow: 'hidden' + }); + break; + } + } + }, { + key: "addEventListeners", + value: function addEventListeners() { + this.modal.addEventListener('touchstart', this.onClick); + this.modal.addEventListener('click', this.onClick); + document.addEventListener('keydown', this.onKeydown); + } + }, { + key: "removeEventListeners", + value: function removeEventListeners() { + this.modal.removeEventListener('touchstart', this.onClick); + this.modal.removeEventListener('click', this.onClick); + document.removeEventListener('keydown', this.onKeydown); + } + }, { + key: "onClick", + value: function onClick(event) { + if (event.target.hasAttribute(this.config.closeTrigger)) { + this.closeModal(event); + } + } + }, { + key: "onKeydown", + value: function onKeydown(event) { + if (event.keyCode === 27) this.closeModal(event); // esc + + if (event.keyCode === 9) this.retainFocus(event); // tab + } + }, { + key: "getFocusableNodes", + value: function getFocusableNodes() { + var nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS); + return Array.apply(void 0, _toConsumableArray(nodes)); + } + /** + * Tries to set focus on a node which is not a close trigger + * if no other nodes exist then focuses on first close trigger + */ + + }, { + key: "setFocusToFirstNode", + value: function setFocusToFirstNode() { + var _this3 = this; + + if (this.config.disableFocus) return; + var focusableNodes = this.getFocusableNodes(); // no focusable nodes + + if (focusableNodes.length === 0) return; // remove nodes on whose click, the modal closes + // could not think of a better name :( + + var nodesWhichAreNotCloseTargets = focusableNodes.filter(function (node) { + return !node.hasAttribute(_this3.config.closeTrigger); + }); + if (nodesWhichAreNotCloseTargets.length > 0) nodesWhichAreNotCloseTargets[0].focus(); + if (nodesWhichAreNotCloseTargets.length === 0) focusableNodes[0].focus(); + } + }, { + key: "retainFocus", + value: function retainFocus(event) { + var focusableNodes = this.getFocusableNodes(); // no focusable nodes + + if (focusableNodes.length === 0) return; + /** + * Filters nodes which are hidden to prevent + * focus leak outside modal + */ + + focusableNodes = focusableNodes.filter(function (node) { + return node.offsetParent !== null; + }); // if disableFocus is true + + if (!this.modal.contains(document.activeElement)) { + focusableNodes[0].focus(); + } else { + var focusedItemIndex = focusableNodes.indexOf(document.activeElement); + + if (event.shiftKey && focusedItemIndex === 0) { + focusableNodes[focusableNodes.length - 1].focus(); + event.preventDefault(); + } + + if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) { + focusableNodes[0].focus(); + event.preventDefault(); + } + } + } + }]); + + return Modal; + }(); + /** + * Modal prototype ends. + * Here on code is responsible for detecting and + * auto binding event handlers on modal triggers + */ + // Keep a reference to the opened modal + + + var activeModal = null; + /** + * Generates an associative array of modals and it's + * respective triggers + * @param {array} triggers An array of all triggers + * @param {string} triggerAttr The data-attribute which triggers the module + * @return {array} + */ + + var generateTriggerMap = function generateTriggerMap(triggers, triggerAttr) { + var triggerMap = []; + triggers.forEach(function (trigger) { + var targetModal = trigger.attributes[triggerAttr].value; + if (triggerMap[targetModal] === undefined) triggerMap[targetModal] = []; + triggerMap[targetModal].push(trigger); + }); + return triggerMap; + }; + /** + * Validates whether a modal of the given id exists + * in the DOM + * @param {number} id The id of the modal + * @return {boolean} + */ + + + var validateModalPresence = function validateModalPresence(id) { + if (!document.getElementById(id)) { + console.warn("MicroModal: \u2757Seems like you have missed %c'".concat(id, "'"), 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'ID somewhere in your code. Refer example below to resolve it.'); + console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', "
    ")); + return false; + } + }; + /** + * Validates if there are modal triggers present + * in the DOM + * @param {array} triggers An array of data-triggers + * @return {boolean} + */ + + + var validateTriggerPresence = function validateTriggerPresence(triggers) { + if (triggers.length <= 0) { + console.warn("MicroModal: \u2757Please specify at least one %c'micromodal-trigger'", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'data attribute.'); + console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', ""); + return false; + } + }; + /** + * Checks if triggers and their corresponding modals + * are present in the DOM + * @param {array} triggers Array of DOM nodes which have data-triggers + * @param {array} triggerMap Associative array of modals and their triggers + * @return {boolean} + */ + + + var validateArgs = function validateArgs(triggers, triggerMap) { + validateTriggerPresence(triggers); + if (!triggerMap) return true; + + for (var id in triggerMap) { + validateModalPresence(id); + } + + return true; + }; + /** + * Binds click handlers to all modal triggers + * @param {object} config [description] + * @return void + */ + + + var init = function init(config) { + // Create an config object with default openTrigger + var options = Object.assign({}, { + openTrigger: 'data-micromodal-trigger' + }, config); // Collects all the nodes with the trigger + + var triggers = _toConsumableArray(document.querySelectorAll("[".concat(options.openTrigger, "]"))); // Makes a mappings of modals with their trigger nodes + + + var triggerMap = generateTriggerMap(triggers, options.openTrigger); // Checks if modals and triggers exist in dom + + if (options.debugMode === true && validateArgs(triggers, triggerMap) === false) return; // For every target modal creates a new instance + + for (var key in triggerMap) { + var value = triggerMap[key]; + options.targetModal = key; + options.triggers = _toConsumableArray(value); + activeModal = new Modal(options); // eslint-disable-line no-new + } + }; + /** + * Shows a particular modal + * @param {string} targetModal [The id of the modal to display] + * @param {object} config [The configuration object to pass] + * @return {void} + */ + + + var show = function show(targetModal, config) { + var options = config || {}; + options.targetModal = targetModal; // Checks if modals and triggers exist in dom + + if (options.debugMode === true && validateModalPresence(targetModal) === false) return; // clear events in case previous modal wasn't close + + if (activeModal) activeModal.removeEventListeners(); // stores reference to active modal + + activeModal = new Modal(options); // eslint-disable-line no-new + + activeModal.showModal(); + }; + /** + * Closes the active modal + * @param {string} targetModal [The id of the modal to close] + * @return {void} + */ + + + var close = function close(targetModal) { + targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal(); + }; + + return { + init: init, + show: show, + close: close + }; +}(); +window.MicroModal = MicroModal; + +/* harmony default export */ var micromodal_es = (MicroModal); + +// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/view.js +/** + * External dependencies + */ + // Responsive navigation toggle. + +function navigationToggleModal(modal) { + const triggerButton = document.querySelector(`button[data-micromodal-trigger="${modal.id}"]`); + const closeButton = modal.querySelector('button[data-micromodal-close]'); // Use aria-hidden to determine the status of the modal, as this attribute is + // managed by micromodal. + + const isHidden = 'true' === modal.getAttribute('aria-hidden'); + triggerButton.setAttribute('aria-expanded', !isHidden); + closeButton.setAttribute('aria-expanded', !isHidden); + modal.classList.toggle('has-modal-open', !isHidden); // Add a class to indicate the modal is open. + + const htmlElement = document.documentElement; + htmlElement.classList.toggle('has-modal-open'); +} // Open on click functionality. + + +function closeSubmenus(element) { + element.querySelectorAll('[aria-expanded="true"]').forEach(function (toggle) { + toggle.setAttribute('aria-expanded', 'false'); + }); +} + +function toggleSubmenuOnClick(event) { + const buttonToggle = event.target.closest('[aria-expanded]'); + const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded'); + + if (isSubmenuOpen === 'true') { + closeSubmenus(buttonToggle.closest('.wp-block-navigation-item')); + } else { + // Close all sibling submenus. + const parentElement = buttonToggle.closest('.wp-block-navigation-item'); + const navigationParent = buttonToggle.closest('.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'); + navigationParent.querySelectorAll('.wp-block-navigation-item').forEach(function (child) { + if (child !== parentElement) { + closeSubmenus(child); + } + }); // Open submenu. + + buttonToggle.setAttribute('aria-expanded', 'true'); + } +} + +const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle'); +submenuButtons.forEach(function (button) { + button.addEventListener('click', toggleSubmenuOnClick); +}); // Close on click outside. + +document.addEventListener('click', function (event) { + const navigationBlocks = document.querySelectorAll('.wp-block-navigation'); + navigationBlocks.forEach(function (block) { + if (!block.contains(event.target)) { + closeSubmenus(block); + } + }); +}); // Close on focus outside. + +document.addEventListener('keyup', function (event) { + const submenuBlocks = document.querySelectorAll('.wp-block-navigation-item.has-child'); + submenuBlocks.forEach(function (block) { + if (!block.contains(event.target)) { + closeSubmenus(block); + } + }); +}); // Necessary for some themes such as TT1 Blocks, where +// scripts could be loaded before the body. + +window.onload = () => micromodal_es.init({ + onShow: navigationToggleModal, + onClose: navigationToggleModal, + openClass: 'is-menu-open' +}); + + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/wp-includes/blocks/navigation/view.min.asset.php b/wp-includes/blocks/navigation/view.min.asset.php new file mode 100644 index 000000000000..444bff68672d --- /dev/null +++ b/wp-includes/blocks/navigation/view.min.asset.php @@ -0,0 +1 @@ + array(), 'version' => '7b2c5174a07c417dc3db6f1d9a9c3f78'); \ No newline at end of file diff --git a/wp-includes/blocks/navigation/view.min.js b/wp-includes/blocks/navigation/view.min.js new file mode 100644 index 000000000000..846a30e24207 --- /dev/null +++ b/wp-includes/blocks/navigation/view.min.js @@ -0,0 +1 @@ +!function(e){var t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s="kVj6")}({kVj6:function(e,t,o){"use strict";function n(e,t){for(var o=0;oe.length)&&(t=e.length);for(var o=0,n=new Array(t);o0&&this.registerTriggers.apply(this,i(r)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var t,o,r;return t=e,(o=[{key:"registerTriggers",value:function(){for(var e=this,t=arguments.length,o=new Array(t),n=0;n0&&void 0!==arguments[0]?arguments[0]:null;if(this.activeElement=document.activeElement,this.modal.setAttribute("aria-hidden","false"),this.modal.classList.add(this.config.openClass),this.scrollBehaviour("disable"),this.addEventListeners(),this.config.awaitOpenAnimation){var o=function t(){e.modal.removeEventListener("animationend",t,!1),e.setFocusToFirstNode()};this.modal.addEventListener("animationend",o,!1)}else this.setFocusToFirstNode();this.config.onShow(this.modal,this.activeElement,t)}},{key:"closeModal",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=this.modal;if(this.modal.setAttribute("aria-hidden","true"),this.removeEventListeners(),this.scrollBehaviour("enable"),this.activeElement&&this.activeElement.focus&&this.activeElement.focus(),this.config.onClose(this.modal,this.activeElement,e),this.config.awaitCloseAnimation){var o=this.config.openClass;this.modal.addEventListener("animationend",(function e(){t.classList.remove(o),t.removeEventListener("animationend",e,!1)}),!1)}else t.classList.remove(this.config.openClass)}},{key:"closeModalById",value:function(e){this.modal=document.getElementById(e),this.modal&&this.closeModal()}},{key:"scrollBehaviour",value:function(e){if(this.config.disableScroll){var t=document.querySelector("body");switch(e){case"enable":Object.assign(t.style,{overflow:""});break;case"disable":Object.assign(t.style,{overflow:"hidden"})}}}},{key:"addEventListeners",value:function(){this.modal.addEventListener("touchstart",this.onClick),this.modal.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(){this.modal.removeEventListener("touchstart",this.onClick),this.modal.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeydown)}},{key:"onClick",value:function(e){e.target.hasAttribute(this.config.closeTrigger)&&this.closeModal(e)}},{key:"onKeydown",value:function(e){27===e.keyCode&&this.closeModal(e),9===e.keyCode&&this.retainFocus(e)}},{key:"getFocusableNodes",value:function(){var e=this.modal.querySelectorAll(a);return Array.apply(void 0,i(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var t=this.getFocusableNodes();if(0!==t.length){var o=t.filter((function(t){return!t.hasAttribute(e.config.closeTrigger)}));o.length>0&&o[0].focus(),0===o.length&&t[0].focus()}}}},{key:"retainFocus",value:function(e){var t=this.getFocusableNodes();if(0!==t.length)if(t=t.filter((function(e){return null!==e.offsetParent})),this.modal.contains(document.activeElement)){var o=t.indexOf(document.activeElement);e.shiftKey&&0===o&&(t[t.length-1].focus(),e.preventDefault()),!e.shiftKey&&t.length>0&&o===t.length-1&&(t[0].focus(),e.preventDefault())}else t[0].focus()}}])&&n(t.prototype,o),r&&n(t,r),e}(),s=null,c=function(e){if(!document.getElementById(e))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(e,"'"),"background-color: #f8f9fa;color: #50596c;font-weight: bold;","ID somewhere in your code. Refer example below to resolve it."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'')),!1},d=function(e,t){if(function(e){e.length<=0&&(console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'","background-color: #f8f9fa;color: #50596c;font-weight: bold;","data attribute."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",''))}(e),!t)return!0;for(var o in t)c(o);return!0},{init:function(e){var t=Object.assign({},{openTrigger:"data-micromodal-trigger"},e),o=i(document.querySelectorAll("[".concat(t.openTrigger,"]"))),n=function(e,t){var o=[];return e.forEach((function(e){var n=e.attributes[t].value;void 0===o[n]&&(o[n]=[]),o[n].push(e)})),o}(o,t.openTrigger);if(!0!==t.debugMode||!1!==d(o,n))for(var r in n){var a=n[r];t.targetModal=r,t.triggers=i(a),s=new l(t)}},show:function(e,t){var o=t||{};o.targetModal=e,!0===o.debugMode&&!1===c(e)||(s&&s.removeEventListeners(),(s=new l(o)).showModal())},close:function(e){e?s.closeModalById(e):s.closeModal()}});window.MicroModal=u;var f=u;function h(e){const t=document.querySelector(`button[data-micromodal-trigger="${e.id}"]`),o=e.querySelector("button[data-micromodal-close]"),n="true"===e.getAttribute("aria-hidden");t.setAttribute("aria-expanded",!n),o.setAttribute("aria-expanded",!n),e.classList.toggle("has-modal-open",!n);document.documentElement.classList.toggle("has-modal-open")}function v(e){e.querySelectorAll('[aria-expanded="true"]').forEach((function(e){e.setAttribute("aria-expanded","false")}))}function m(e){const t=e.target.closest("[aria-expanded]");if("true"===t.getAttribute("aria-expanded"))v(t.closest(".wp-block-navigation-item"));else{const e=t.closest(".wp-block-navigation-item");t.closest(".wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list").querySelectorAll(".wp-block-navigation-item").forEach((function(t){t!==e&&v(t)})),t.setAttribute("aria-expanded","true")}}document.querySelectorAll(".wp-block-navigation-submenu__toggle").forEach((function(e){e.addEventListener("click",m)})),document.addEventListener("click",(function(e){document.querySelectorAll(".wp-block-navigation").forEach((function(t){t.contains(e.target)||v(t)}))})),document.addEventListener("keyup",(function(e){document.querySelectorAll(".wp-block-navigation-item.has-child").forEach((function(t){t.contains(e.target)||v(t)}))})),window.onload=()=>f.init({onShow:h,onClose:h,openClass:"is-menu-open"})}}); \ No newline at end of file diff --git a/wp-includes/blocks/pattern.php b/wp-includes/blocks/pattern.php new file mode 100644 index 000000000000..32a08601ca80 --- /dev/null +++ b/wp-includes/blocks/pattern.php @@ -0,0 +1,44 @@ + 'render_block_core_pattern', + ) + ); +} + +/** + * Renders the `core/pattern` block on the server. + * + * @param array $attributes Block attributes. + * + * @return string Returns the output of the pattern. + */ +function render_block_core_pattern( $attributes ) { + if ( empty( $attributes['slug'] ) ) { + return ''; + } + + $slug = $attributes['slug']; + $registry = WP_Block_Patterns_Registry::get_instance(); + if ( ! $registry->is_registered( $slug ) ) { + return ''; + } + + $pattern = $registry->get_registered( $slug ); + return do_blocks( $pattern['content'] ); +} + +add_action( 'init', 'register_block_core_pattern' ); diff --git a/wp-includes/blocks/pattern/block.json b/wp-includes/blocks/pattern/block.json new file mode 100644 index 000000000000..78423e8d4912 --- /dev/null +++ b/wp-includes/blocks/pattern/block.json @@ -0,0 +1,17 @@ +{ + "apiVersion": 2, + "name": "core/pattern", + "title": "Pattern", + "category": "design", + "description": "Show a block pattern.", + "supports": { + "html": false, + "inserter": false + }, + "textdomain": "default", + "attributes": { + "slug": { + "type": "string" + } + } +} diff --git a/wp-includes/blocks/post-author.php b/wp-includes/blocks/post-author.php new file mode 100644 index 000000000000..e31be65f7099 --- /dev/null +++ b/wp-includes/blocks/post-author.php @@ -0,0 +1,61 @@ +context['postId'] ) ) { + return ''; + } + + $author_id = get_post_field( 'post_author', $block->context['postId'] ); + if ( empty( $author_id ) ) { + return ''; + } + + $avatar = ! empty( $attributes['avatarSize'] ) ? get_avatar( + $author_id, + $attributes['avatarSize'] + ) : null; + + $byline = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false; + $classes = array_merge( + isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(), + isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(), + isset( $attributes['textAlign'] ) ? array( 'has-text-align-' . $attributes['textAlign'] ) : array() + ); + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) ); + + return sprintf( '
    ', $wrapper_attributes ) . + ( ! empty( $attributes['showAvatar'] ) ? '
    ' . $avatar . '
    ' : '' ) . + '
    ' . + ( ! empty( $byline ) ? '

    ' . $byline . '

    ' : '' ) . + '

    ' . get_the_author_meta( 'display_name', $author_id ) . '

    ' . + ( ! empty( $attributes['showBio'] ) ? '

    ' . get_the_author_meta( 'user_description', $author_id ) . '

    ' : '' ) . + '
    ' . + '
    '; +} + +/** + * Registers the `core/post-author` block on the server. + */ +function register_block_core_post_author() { + register_block_type_from_metadata( + __DIR__ . '/post-author', + array( + 'render_callback' => 'render_block_core_post_author', + ) + ); +} +add_action( 'init', 'register_block_core_post_author' ); diff --git a/wp-includes/blocks/post-author/block.json b/wp-includes/blocks/post-author/block.json new file mode 100644 index 000000000000..d46c8df69da2 --- /dev/null +++ b/wp-includes/blocks/post-author/block.json @@ -0,0 +1,53 @@ +{ + "apiVersion": 2, + "name": "core/post-author", + "title": "Post Author", + "category": "theme", + "description": "Add the author of this post.", + "textdomain": "default", + "attributes": { + "textAlign": { + "type": "string" + }, + "avatarSize": { + "type": "number", + "default": 48 + }, + "showAvatar": { + "type": "boolean", + "default": true + }, + "showBio": { + "type": "boolean" + }, + "byline": { + "type": "string" + } + }, + "usesContext": [ "postType", "postId", "queryId" ], + "supports": { + "html": false, + "spacing": { + "margin": true, + "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + }, + "color": { + "gradients": true, + "link": true, + "__experimentalDuotone": ".wp-block-post-author__avatar img" + } + }, + "editorStyle": "wp-block-post-author-editor", + "style": "wp-block-post-author" +} diff --git a/wp-includes/blocks/post-author/style-rtl.css b/wp-includes/blocks/post-author/style-rtl.css new file mode 100644 index 000000000000..f5f136e5247d --- /dev/null +++ b/wp-includes/blocks/post-author/style-rtl.css @@ -0,0 +1,100 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-post-author { + display: flex; + flex-wrap: wrap; +} +.wp-block-post-author__byline { + width: 100%; + margin-top: 0; + margin-bottom: 0; + font-size: 0.5em; +} +.wp-block-post-author__avatar { + margin-left: 1em; +} +.wp-block-post-author__bio { + margin-bottom: 0.7em; + font-size: 0.7em; +} +.wp-block-post-author__content { + flex-grow: 1; + flex-basis: 0; +} +.wp-block-post-author__name { + margin: 0; +} \ No newline at end of file diff --git a/wp-includes/blocks/post-author/style-rtl.min.css b/wp-includes/blocks/post-author/style-rtl.min.css new file mode 100644 index 000000000000..2cf62fd791d9 --- /dev/null +++ b/wp-includes/blocks/post-author/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-post-author{display:flex;flex-wrap:wrap}.wp-block-post-author__byline{width:100%;margin-top:0;margin-bottom:0;font-size:.5em}.wp-block-post-author__avatar{margin-left:1em}.wp-block-post-author__bio{margin-bottom:.7em;font-size:.7em}.wp-block-post-author__content{flex-grow:1;flex-basis:0}.wp-block-post-author__name{margin:0} \ No newline at end of file diff --git a/wp-includes/blocks/post-author/style.css b/wp-includes/blocks/post-author/style.css new file mode 100644 index 000000000000..822f69286d6b --- /dev/null +++ b/wp-includes/blocks/post-author/style.css @@ -0,0 +1,100 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-post-author { + display: flex; + flex-wrap: wrap; +} +.wp-block-post-author__byline { + width: 100%; + margin-top: 0; + margin-bottom: 0; + font-size: 0.5em; +} +.wp-block-post-author__avatar { + margin-right: 1em; +} +.wp-block-post-author__bio { + margin-bottom: 0.7em; + font-size: 0.7em; +} +.wp-block-post-author__content { + flex-grow: 1; + flex-basis: 0; +} +.wp-block-post-author__name { + margin: 0; +} \ No newline at end of file diff --git a/wp-includes/blocks/post-author/style.min.css b/wp-includes/blocks/post-author/style.min.css new file mode 100644 index 000000000000..256a74f56903 --- /dev/null +++ b/wp-includes/blocks/post-author/style.min.css @@ -0,0 +1 @@ +.wp-block-post-author{display:flex;flex-wrap:wrap}.wp-block-post-author__byline{width:100%;margin-top:0;margin-bottom:0;font-size:.5em}.wp-block-post-author__avatar{margin-right:1em}.wp-block-post-author__bio{margin-bottom:.7em;font-size:.7em}.wp-block-post-author__content{flex-grow:1;flex-basis:0}.wp-block-post-author__name{margin:0} \ No newline at end of file diff --git a/wp-includes/blocks/post-comments.php b/wp-includes/blocks/post-comments.php new file mode 100644 index 000000000000..42f9a8d60d94 --- /dev/null +++ b/wp-includes/blocks/post-comments.php @@ -0,0 +1,68 @@ +context['postId']; + if ( ! isset( $post_id ) ) { + return ''; + } + + $comment_args = array( + 'post_id' => $post_id, + 'count' => true, + ); + // Return early if there are no comments and comments are closed. + if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) { + return ''; + } + + $post_before = $post; + $post = get_post( $post_id ); + setup_postdata( $post ); + + ob_start(); + // There's a deprecation warning generated by WP Core. + // Ideally this deprecation is removed from Core. + // In the meantime, this removes it from the output. + add_filter( 'deprecated_file_trigger_error', '__return_false' ); + comments_template(); + remove_filter( 'deprecated_file_trigger_error', '__return_false' ); + $post = $post_before; + + $classes = ''; + if ( isset( $attributes['textAlign'] ) ) { + $classes .= 'has-text-align-' . $attributes['textAlign']; + } + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); + $output = ob_get_clean(); + + return sprintf( '
    %2$s
    ', $wrapper_attributes, $output ); +} + +/** + * Registers the `core/post-comments` block on the server. + */ +function register_block_core_post_comments() { + register_block_type_from_metadata( + __DIR__ . '/post-comments', + array( + 'render_callback' => 'render_block_core_post_comments', + ) + ); +} +add_action( 'init', 'register_block_core_post_comments' ); diff --git a/wp-includes/blocks/post-comments/block.json b/wp-includes/blocks/post-comments/block.json new file mode 100644 index 000000000000..2aab1d09f990 --- /dev/null +++ b/wp-includes/blocks/post-comments/block.json @@ -0,0 +1,34 @@ +{ + "apiVersion": 2, + "name": "core/post-comments", + "title": "Post Comments", + "category": "theme", + "description": "Display a post's comments.", + "textdomain": "default", + "attributes": { + "textAlign": { + "type": "string" + } + }, + "usesContext": [ "postId", "postType" ], + "supports": { + "html": false, + "align": [ "wide", "full" ], + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + }, + "color": { + "gradients": true, + "link": true + } + }, + "style": "wp-block-post-comments" +} diff --git a/wp-includes/blocks/post-comments/style-rtl.css b/wp-includes/blocks/post-comments/style-rtl.css new file mode 100644 index 000000000000..57685bebb35a --- /dev/null +++ b/wp-includes/blocks/post-comments/style-rtl.css @@ -0,0 +1,155 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-post-comments > h3:first-of-type { + margin-top: 0; +} +.wp-block-post-comments .commentlist { + list-style: none; + margin: 0; + padding: 0; +} +.wp-block-post-comments .commentlist .comment { + min-height: 2.25em; + padding-right: 3.25em; +} +.wp-block-post-comments .commentlist .comment p { + font-size: 0.875em; + line-height: 1.8; + margin: 0.36em 0 1.4em; +} +.wp-block-post-comments .commentlist .children { + list-style: none; + margin: 0; + padding: 0; +} +.wp-block-post-comments .comment-author { + line-height: 1.5; + margin-right: -3.25em; +} +.wp-block-post-comments .comment-author .avatar { + border-radius: 1.5em; + display: block; + float: right; + height: 2.5em; + margin-left: 0.75em; + width: 2.5em; +} +.wp-block-post-comments .comment-author cite { + font-style: normal; +} +.wp-block-post-comments .comment-meta { + line-height: 1.5; + margin-right: -3.25em; +} +.wp-block-post-comments .comment-body .commentmetadata { + font-size: 0.75em; +} +.wp-block-post-comments .comment-form-comment label, +.wp-block-post-comments .comment-form-author label, +.wp-block-post-comments .comment-form-email label, +.wp-block-post-comments .comment-form-url label { + display: block; + margin-bottom: 0.25em; +} +.wp-block-post-comments .comment-form-comment textarea { + box-sizing: border-box; + width: 100%; +} +.wp-block-post-comments .comment-form-cookies-consent { + display: flex; + gap: 0.25em; +} +.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent { + margin-top: 0.35em; +} +.wp-block-post-comments .reply { + font-size: 0.75em; + margin-bottom: 1.4em; +} +.wp-block-post-comments textarea, +.wp-block-post-comments input:not([type=submit]) { + border: 1px solid #949494; + font-size: 1em; + font-family: inherit; +} +.wp-block-post-comments textarea, +.wp-block-post-comments input:not([type=submit]):not([type=checkbox]) { + padding: calc(0.667em + 2px); +} +.wp-block-post-comments input[type=submit] { + border: none; +} \ No newline at end of file diff --git a/wp-includes/blocks/post-comments/style-rtl.min.css b/wp-includes/blocks/post-comments/style-rtl.min.css new file mode 100644 index 000000000000..b3c0d05f2355 --- /dev/null +++ b/wp-includes/blocks/post-comments/style-rtl.min.css @@ -0,0 +1 @@ +.wp-block-post-comments>h3:first-of-type{margin-top:0}.wp-block-post-comments .commentlist{list-style:none;margin:0;padding:0}.wp-block-post-comments .commentlist .comment{min-height:2.25em;padding-right:3.25em}.wp-block-post-comments .commentlist .comment p{font-size:.875em;line-height:1.8;margin:.36em 0 1.4em}.wp-block-post-comments .commentlist .children{list-style:none;margin:0;padding:0}.wp-block-post-comments .comment-author{line-height:1.5;margin-right:-3.25em}.wp-block-post-comments .comment-author .avatar{border-radius:1.5em;display:block;float:right;height:2.5em;margin-left:.75em;width:2.5em}.wp-block-post-comments .comment-author cite{font-style:normal}.wp-block-post-comments .comment-meta{line-height:1.5;margin-right:-3.25em}.wp-block-post-comments .comment-body .commentmetadata{font-size:.75em}.wp-block-post-comments .comment-form-author label,.wp-block-post-comments .comment-form-comment label,.wp-block-post-comments .comment-form-email label,.wp-block-post-comments .comment-form-url label{display:block;margin-bottom:.25em}.wp-block-post-comments .comment-form-comment textarea{box-sizing:border-box;width:100%}.wp-block-post-comments .comment-form-cookies-consent{display:flex;gap:.25em}.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent{margin-top:.35em}.wp-block-post-comments .reply{font-size:.75em;margin-bottom:1.4em}.wp-block-post-comments input:not([type=submit]),.wp-block-post-comments textarea{border:1px solid #949494;font-size:1em;font-family:inherit}.wp-block-post-comments input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments textarea{padding:calc(.667em + 2px)}.wp-block-post-comments input[type=submit]{border:none} \ No newline at end of file diff --git a/wp-includes/blocks/post-comments/style.css b/wp-includes/blocks/post-comments/style.css new file mode 100644 index 000000000000..cea8c60e7cc7 --- /dev/null +++ b/wp-includes/blocks/post-comments/style.css @@ -0,0 +1,155 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-post-comments > h3:first-of-type { + margin-top: 0; +} +.wp-block-post-comments .commentlist { + list-style: none; + margin: 0; + padding: 0; +} +.wp-block-post-comments .commentlist .comment { + min-height: 2.25em; + padding-left: 3.25em; +} +.wp-block-post-comments .commentlist .comment p { + font-size: 0.875em; + line-height: 1.8; + margin: 0.36em 0 1.4em; +} +.wp-block-post-comments .commentlist .children { + list-style: none; + margin: 0; + padding: 0; +} +.wp-block-post-comments .comment-author { + line-height: 1.5; + margin-left: -3.25em; +} +.wp-block-post-comments .comment-author .avatar { + border-radius: 1.5em; + display: block; + float: left; + height: 2.5em; + margin-right: 0.75em; + width: 2.5em; +} +.wp-block-post-comments .comment-author cite { + font-style: normal; +} +.wp-block-post-comments .comment-meta { + line-height: 1.5; + margin-left: -3.25em; +} +.wp-block-post-comments .comment-body .commentmetadata { + font-size: 0.75em; +} +.wp-block-post-comments .comment-form-comment label, +.wp-block-post-comments .comment-form-author label, +.wp-block-post-comments .comment-form-email label, +.wp-block-post-comments .comment-form-url label { + display: block; + margin-bottom: 0.25em; +} +.wp-block-post-comments .comment-form-comment textarea { + box-sizing: border-box; + width: 100%; +} +.wp-block-post-comments .comment-form-cookies-consent { + display: flex; + gap: 0.25em; +} +.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent { + margin-top: 0.35em; +} +.wp-block-post-comments .reply { + font-size: 0.75em; + margin-bottom: 1.4em; +} +.wp-block-post-comments textarea, +.wp-block-post-comments input:not([type=submit]) { + border: 1px solid #949494; + font-size: 1em; + font-family: inherit; +} +.wp-block-post-comments textarea, +.wp-block-post-comments input:not([type=submit]):not([type=checkbox]) { + padding: calc(0.667em + 2px); +} +.wp-block-post-comments input[type=submit] { + border: none; +} \ No newline at end of file diff --git a/wp-includes/blocks/post-comments/style.min.css b/wp-includes/blocks/post-comments/style.min.css new file mode 100644 index 000000000000..363bd45bbe2b --- /dev/null +++ b/wp-includes/blocks/post-comments/style.min.css @@ -0,0 +1 @@ +.wp-block-post-comments>h3:first-of-type{margin-top:0}.wp-block-post-comments .commentlist{list-style:none;margin:0;padding:0}.wp-block-post-comments .commentlist .comment{min-height:2.25em;padding-left:3.25em}.wp-block-post-comments .commentlist .comment p{font-size:.875em;line-height:1.8;margin:.36em 0 1.4em}.wp-block-post-comments .commentlist .children{list-style:none;margin:0;padding:0}.wp-block-post-comments .comment-author{line-height:1.5;margin-left:-3.25em}.wp-block-post-comments .comment-author .avatar{border-radius:1.5em;display:block;float:left;height:2.5em;margin-right:.75em;width:2.5em}.wp-block-post-comments .comment-author cite{font-style:normal}.wp-block-post-comments .comment-meta{line-height:1.5;margin-left:-3.25em}.wp-block-post-comments .comment-body .commentmetadata{font-size:.75em}.wp-block-post-comments .comment-form-author label,.wp-block-post-comments .comment-form-comment label,.wp-block-post-comments .comment-form-email label,.wp-block-post-comments .comment-form-url label{display:block;margin-bottom:.25em}.wp-block-post-comments .comment-form-comment textarea{box-sizing:border-box;width:100%}.wp-block-post-comments .comment-form-cookies-consent{display:flex;gap:.25em}.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent{margin-top:.35em}.wp-block-post-comments .reply{font-size:.75em;margin-bottom:1.4em}.wp-block-post-comments input:not([type=submit]),.wp-block-post-comments textarea{border:1px solid #949494;font-size:1em;font-family:inherit}.wp-block-post-comments input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments textarea{padding:calc(.667em + 2px)}.wp-block-post-comments input[type=submit]{border:none} \ No newline at end of file diff --git a/wp-includes/blocks/post-navigation-link.php b/wp-includes/blocks/post-navigation-link.php new file mode 100644 index 000000000000..9fedf38d6fa1 --- /dev/null +++ b/wp-includes/blocks/post-navigation-link.php @@ -0,0 +1,96 @@ + $classes ) ); + // Set default values. + $format = '%link'; + $link = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' ); + $label = ''; + + // If a custom label is provided, make this a link. + // `$label` is used to prepend the provided label, if we want to show the page title as well. + if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) { + $label = "{$attributes['label']}"; + $link = $label; + } + + // If we want to also show the page title, make the page title a link and prepend the label. + if ( isset( $attributes['showTitle'] ) && $attributes['showTitle'] ) { + /* + * If the label link option is not enabled but there is a custom label, + * display the custom label as text before the linked title. + */ + if ( ! $attributes['linkLabel'] ) { + if ( $label ) { + $format = '' . $label . ' %link'; + } + $link = '%title'; + } elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) { + // If the label link option is enabled and there is a custom label, display it before the title. + if ( $label ) { + $link = '' . $label . ' %title'; + } else { + /* + * If the label link option is enabled and there is no custom label, + * add a colon between the label and the post title. + */ + $label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' ); + $link = sprintf( + '%1$s %2$s', + $label, + '%title' + ); + } + } + } + + // The dynamic portion of the function name, `$navigation_type`, + // refers to the type of adjacency, 'next' or 'previous'. + $get_link_function = "get_{$navigation_type}_post_link"; + $content = $get_link_function( $format, $link ); + return sprintf( + '
    %2$s
    ', + $wrapper_attributes, + $content + ); +} + +/** + * Registers the `core/post-navigation-link` block on the server. + */ +function register_block_core_post_navigation_link() { + register_block_type_from_metadata( + __DIR__ . '/post-navigation-link', + array( + 'render_callback' => 'render_block_core_post_navigation_link', + ) + ); +} +add_action( 'init', 'register_block_core_post_navigation_link' ); diff --git a/wp-includes/blocks/post-navigation-link/block.json b/wp-includes/blocks/post-navigation-link/block.json new file mode 100644 index 000000000000..ec983b6b57a6 --- /dev/null +++ b/wp-includes/blocks/post-navigation-link/block.json @@ -0,0 +1,43 @@ +{ + "apiVersion": 2, + "name": "core/post-navigation-link", + "title": "Post Navigation Link", + "category": "theme", + "description": "Displays the next or previous post link that is adjacent to the current post.", + "textdomain": "default", + "attributes": { + "textAlign": { + "type": "string" + }, + "type": { + "type": "string", + "default": "next" + }, + "label": { + "type": "string" + }, + "showTitle": { + "type": "boolean", + "default": false + }, + "linkLabel": { + "type": "boolean", + "default": false + } + }, + "supports": { + "reusable": false, + "html": false, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + } +} diff --git a/wp-includes/blocks/term-description.php b/wp-includes/blocks/term-description.php new file mode 100644 index 000000000000..4f1cd7e518d1 --- /dev/null +++ b/wp-includes/blocks/term-description.php @@ -0,0 +1,45 @@ + 'has-text-align-' . $attributes['textAlign'] ) + : array(); + $wrapper_attributes = get_block_wrapper_attributes( $extra_attributes ); + + return '
    ' . $term_description . '
    '; +} + +/** + * Registers the `core/term-description` block on the server. + */ +function register_block_core_term_description() { + register_block_type_from_metadata( + __DIR__ . '/term-description', + array( + 'render_callback' => 'render_block_core_term_description', + ) + ); +} +add_action( 'init', 'register_block_core_term_description' ); diff --git a/wp-includes/blocks/term-description/block.json b/wp-includes/blocks/term-description/block.json new file mode 100644 index 000000000000..608ae1a24234 --- /dev/null +++ b/wp-includes/blocks/term-description/block.json @@ -0,0 +1,28 @@ +{ + "apiVersion": 2, + "name": "core/term-description", + "title": "Term Description", + "category": "theme", + "description": "Display the description of categories, tags and custom taxonomies when viewing an archive.", + "textdomain": "default", + "attributes": { + "textAlign": { + "type": "string" + } + }, + "supports": { + "align": [ "wide", "full" ], + "html": false, + "color": { + "link": true + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "editorStyle": "wp-block-term-description-editor" +} diff --git a/wp-includes/blocks/widget-group.php b/wp-includes/blocks/widget-group.php new file mode 100644 index 000000000000..6cf6442346a3 --- /dev/null +++ b/wp-includes/blocks/widget-group.php @@ -0,0 +1,78 @@ +'; + $after_title = ''; + } + + $html = ''; + + if ( ! empty( $attributes['title'] ) ) { + $html .= $before_title . $attributes['title'] . $after_title; + } + + $html .= '
    '; + foreach ( $block->inner_blocks as $inner_block ) { + $html .= $inner_block->render(); + } + $html .= '
    '; + + return $html; +} + +/** + * Registers the 'core/widget-group' block. + */ +function register_block_core_widget_group() { + register_block_type_from_metadata( + __DIR__ . '/widget-group', + array( + 'render_callback' => 'render_block_core_widget_group', + ) + ); +} + +add_action( 'init', 'register_block_core_widget_group' ); + +/** + * Make a note of the sidebar being rendered before WordPress starts rendering + * it. This lets us get to the current sidebar in + * render_block_core_widget_group(). + * + * @param int|string $index Index, name, or ID of the dynamic sidebar. + */ +function note_sidebar_being_rendered( $index ) { + global $_sidebar_being_rendered; + $_sidebar_being_rendered = $index; +} +add_action( 'dynamic_sidebar_before', 'note_sidebar_being_rendered' ); + +/** + * Clear whatever we set in note_sidebar_being_rendered() after WordPress + * finishes rendering a sidebar. + */ +function discard_sidebar_being_rendered() { + global $_sidebar_being_rendered; + unset( $_sidebar_being_rendered ); +} +add_action( 'dynamic_sidebar_after', 'discard_sidebar_being_rendered' ); diff --git a/wp-includes/blocks/widget-group/block.json b/wp-includes/blocks/widget-group/block.json new file mode 100644 index 000000000000..ec48d90eda5c --- /dev/null +++ b/wp-includes/blocks/widget-group/block.json @@ -0,0 +1,18 @@ +{ + "apiVersion": 2, + "name": "core/widget-group", + "category": "widgets", + "attributes": { + "title": { + "type": "string" + } + }, + "supports": { + "html": false, + "inserter": true, + "customClassName": true, + "reusable": false + }, + "editorStyle": "wp-block-widget-group-editor", + "style": "wp-block-widget-group" +} diff --git a/wp-includes/css/dist/edit-site/style-rtl.css b/wp-includes/css/dist/edit-site/style-rtl.css new file mode 100644 index 000000000000..91f4ffa4bad5 --- /dev/null +++ b/wp-includes/css/dist/edit-site/style-rtl.css @@ -0,0 +1,1523 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +:root { + --wp-admin-theme-color: #007cba; + --wp-admin-theme-color--rgb: 0, 124, 186; + --wp-admin-theme-color-darker-10: #006ba1; + --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; + --wp-admin-theme-color-darker-20: #005a87; + --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + :root { + --wp-admin-border-width-focus: 1.5px; + } +} + +.components-panel__header.interface-complementary-area-header__small { + background: #fff; + padding-left: 4px; +} +.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} +@media (min-width: 782px) { + .components-panel__header.interface-complementary-area-header__small { + display: none; + } +} + +.interface-complementary-area-header { + background: #fff; + padding-left: 4px; +} +.interface-complementary-area-header .components-button.has-icon { + display: none; + margin-right: auto; +} +.interface-complementary-area-header .components-button.has-icon ~ .components-button { + margin-right: 0; +} +@media (min-width: 782px) { + .interface-complementary-area-header .components-button.has-icon { + display: flex; + } +} + +@media (min-width: 782px) { + .components-panel__header + .interface-complementary-area-header { + margin-top: 0; + } +} + +.interface-complementary-area { + background: #fff; + color: #1e1e1e; +} +@media (min-width: 600px) { + .interface-complementary-area { + -webkit-overflow-scrolling: touch; + } +} +@media (min-width: 782px) { + .interface-complementary-area { + width: 280px; + } +} +.interface-complementary-area .components-panel { + border: none; + position: relative; + z-index: 0; +} +.interface-complementary-area .components-panel__header { + position: sticky; + top: 0; + z-index: 1; +} +.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { + top: 48px; +} +@media (min-width: 782px) { + .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { + top: 0; + } +} +.interface-complementary-area p { + margin-top: 0; +} +.interface-complementary-area h2 { + font-size: 13px; + color: #1e1e1e; + margin-bottom: 1.5em; +} +.interface-complementary-area h3 { + font-size: 11px; + text-transform: uppercase; + font-weight: 500; + color: #1e1e1e; + margin-bottom: 1.5em; +} +.interface-complementary-area hr { + border-top: none; + border-bottom: 1px solid #f0f0f0; + margin: 1.5em 0; +} +.interface-complementary-area div.components-toolbar-group, +.interface-complementary-area div.components-toolbar { + box-shadow: none; + margin-bottom: 1.5em; +} +.interface-complementary-area div.components-toolbar-group:last-child, +.interface-complementary-area div.components-toolbar:last-child { + margin-bottom: 0; +} +.interface-complementary-area .block-editor-skip-to-selected-block:focus { + top: auto; + left: 10px; + bottom: 10px; + right: auto; +} + +@media (min-width: 782px) { + body.js.is-fullscreen-mode { + margin-top: -32px; + height: calc(100% + 32px); + } + body.js.is-fullscreen-mode #adminmenumain, +body.js.is-fullscreen-mode #wpadminbar { + display: none; + } + body.js.is-fullscreen-mode #wpcontent, +body.js.is-fullscreen-mode #wpfooter { + margin-right: 0; + } +} + +html.interface-interface-skeleton__html-container { + position: fixed; + width: 100%; +} +@media (min-width: 782px) { + html.interface-interface-skeleton__html-container { + position: initial; + width: initial; + } +} + +.interface-interface-skeleton { + display: flex; + flex-direction: row; + height: auto; + max-height: 100%; + position: fixed; + top: 46px; + right: 0; + left: 0; + bottom: 0; +} +@media (min-width: 783px) { + .interface-interface-skeleton { + top: 32px; + } + .is-fullscreen-mode .interface-interface-skeleton { + top: 0; + } +} + +.interface-interface-skeleton__editor { + display: flex; + flex-direction: column; + flex: 0 1 100%; + overflow: hidden; +} + +.interface-interface-skeleton { + /* Set left position when auto-fold is not on the body element. */ + right: 0; +} +@media (min-width: 783px) { + .interface-interface-skeleton { + right: 160px; + } +} + +.auto-fold .interface-interface-skeleton { + /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ +} +@media (min-width: 783px) { + .auto-fold .interface-interface-skeleton { + right: 36px; + } +} +@media (min-width: 961px) { + .auto-fold .interface-interface-skeleton { + right: 160px; + } +} + +/* Sidebar manually collapsed. */ +.folded .interface-interface-skeleton { + right: 0; +} +@media (min-width: 783px) { + .folded .interface-interface-skeleton { + right: 36px; + } +} + +body.is-fullscreen-mode .interface-interface-skeleton { + right: 0 !important; +} + +.interface-interface-skeleton__body { + flex-grow: 1; + display: flex; + overflow: auto; + overscroll-behavior-y: none; +} +@media (min-width: 782px) { + .has-footer .interface-interface-skeleton__body { + padding-bottom: 25px; + } +} + +.interface-interface-skeleton__content { + flex-grow: 1; + display: flex; + flex-direction: column; + overflow: auto; + z-index: 20; +} + +.interface-interface-skeleton__secondary-sidebar, +.interface-interface-skeleton__sidebar { + display: block; + flex-shrink: 0; + position: absolute; + z-index: 100000; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: #fff; + color: #1e1e1e; +} +@media (min-width: 782px) { + .interface-interface-skeleton__secondary-sidebar, +.interface-interface-skeleton__sidebar { + position: relative !important; + z-index: 90; + width: auto; + } +} + +.interface-interface-skeleton__sidebar { + overflow: auto; +} +@media (min-width: 782px) { + .interface-interface-skeleton__sidebar { + border-right: 1px solid #e0e0e0; + } +} + +@media (min-width: 782px) { + .interface-interface-skeleton__secondary-sidebar { + border-left: 1px solid #e0e0e0; + } +} + +.interface-interface-skeleton__header { + flex-shrink: 0; + height: auto; + border-bottom: 1px solid #e0e0e0; + z-index: 30; + color: #1e1e1e; +} + +.interface-interface-skeleton__footer { + height: auto; + flex-shrink: 0; + border-top: 1px solid #e0e0e0; + color: #1e1e1e; + position: absolute; + bottom: 0; + right: 0; + width: 100%; + background-color: #fff; + z-index: 90; + display: none; +} +@media (min-width: 782px) { + .interface-interface-skeleton__footer { + display: flex; + } +} +.interface-interface-skeleton__footer .block-editor-block-breadcrumb { + z-index: 30; + display: flex; + background: #fff; + height: 24px; + align-items: center; + font-size: 13px; + padding: 0 18px; +} + +.interface-interface-skeleton__actions { + z-index: 100000; + position: fixed !important; + top: -9999em; + bottom: auto; + right: auto; + left: 0; + width: 280px; + color: #1e1e1e; +} +.interface-interface-skeleton__actions:focus { + top: auto; + bottom: 0; +} + +.interface-more-menu-dropdown { + margin-right: -4px; +} +.interface-more-menu-dropdown .components-button { + width: auto; + padding: 0 2px; +} +@media (min-width: 600px) { + .interface-more-menu-dropdown { + margin-right: 0; + } + .interface-more-menu-dropdown .components-button { + padding: 0 4px; + } +} + +.interface-more-menu-dropdown__content .components-popover__content { + min-width: 280px; +} +@media (min-width: 480px) { + .interface-more-menu-dropdown__content .components-popover__content { + width: auto; + max-width: 480px; + } +} +.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu { + padding: 0; +} + +.components-popover.interface-more-menu-dropdown__content { + z-index: 99998; +} + +.interface-pinned-items { + display: flex; +} +.interface-pinned-items .components-button:not(:first-child) { + display: none; +} +@media (min-width: 600px) { + .interface-pinned-items .components-button:not(:first-child) { + display: flex; + } +} +.interface-pinned-items .components-button { + margin-right: 4px; +} +.interface-pinned-items .components-button svg { + max-width: 24px; + max-height: 24px; +} + +.edit-site-block-editor__editor-styles-wrapper .components-button { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + padding: 6px 12px; +} +.edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary, .edit-site-block-editor__editor-styles-wrapper .components-button.has-icon { + padding: 6px; +} + +.edit-site-visual-editor { + position: relative; + background-color: #2f2f2f; + align-items: center; +} +.edit-site-visual-editor.is-focus-mode { + padding: 48px; +} +.edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas { + border-radius: 2px; +} + +.edit-site-visual-editor__editor-canvas { + border-radius: 2px 2px 0 0; +} + +.edit-site-visual-editor__back-button { + position: absolute; + top: 8px; + right: 8px; + color: #fff; +} +.edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover { + color: #f0f0f0; +} + +.components-resizable-box__container { + margin: 0 auto; +} + +.resizable-editor__drag-handle { + position: absolute; + top: 0; + bottom: 0; + padding: 0; + margin: auto 0; + width: 8px; + height: 100px; + -webkit-appearance: none; + appearance: none; + cursor: grab; + outline: none; + background: #757575; + border-radius: 4px; + border: 0; +} +.resizable-editor__drag-handle.is-left { + right: -28px; +} +.resizable-editor__drag-handle.is-right { + left: -28px; +} +.resizable-editor__drag-handle:hover { + background: #949494; +} +.resizable-editor__drag-handle:active { + cursor: grabbing; + background: #949494; +} +.resizable-editor__drag-handle:focus { + box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color); +} + +.edit-site-global-styles-preview { + display: flex; + align-items: center; + justify-content: center; + min-height: 152px; + line-height: 1; +} +.edit-site-global-styles-preview .component-color-indicator { + border-radius: 50%; + border: 0; + height: 36px; + width: 36px; + margin-right: 0; + padding: 0; +} + +.edit-site-global-styles-screen-colors { + margin: 16px; +} +.edit-site-global-styles-screen-colors .component-color-indicator { + margin-right: 0; + display: block; + border-radius: 50%; + border: 0; + height: 24px; + width: 24px; + padding: 0; + background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); + background-position: 100% 0, 25px 25px; + background-size: calc(2 * 5px) calc(2 * 5px); +} + +.edit-site-global-styles-header__description { + padding: 0 16px; +} + +.edit-site-global-styles-subtitle { + margin-bottom: 0 !important; + text-transform: uppercase; + font-weight: 500; +} + +.edit-site-header { + align-items: center; + background-color: #fff; + display: flex; + height: 60px; + box-sizing: border-box; + width: 100%; + justify-content: space-between; +} +body.is-fullscreen-mode .edit-site-header { + padding-right: 60px; + transition: padding-right 20ms linear; + transition-delay: 80ms; +} +@media (prefers-reduced-motion: reduce) { + body.is-fullscreen-mode .edit-site-header { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-header .edit-site-header_start, +.edit-site-header .edit-site-header_end { + display: flex; +} +.edit-site-header .edit-site-header_center { + display: flex; + align-items: center; + height: 100%; + min-width: 0; +} +.edit-site-header .edit-site-header_end { + justify-content: flex-end; +} + +body.is-navigation-sidebar-open .edit-site-header { + padding-right: 0; + transition: padding-right 20ms linear; + transition-delay: 0ms; +} +@media (prefers-reduced-motion: reduce) { + body.is-navigation-sidebar-open .edit-site-header { + transition-duration: 0s; + transition-delay: 0s; + } +} + +@media (max-width: 959px) { + body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button, +body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) { + display: none; + } + body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button { + margin-left: 0; + } +} +.edit-site-header__toolbar { + display: flex; + align-items: center; + padding-right: 8px; +} +@media (min-width: 600px) { + .edit-site-header__toolbar { + padding-right: 24px; + } +} +@media (min-width: 1280px) { + .edit-site-header__toolbar { + padding-left: 8px; + } +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle { + margin-left: 8px; + min-width: 32px; + width: 32px; + height: 32px; + padding: 0; +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg { + transform: rotate(-45deg); +} + +.edit-site-header__toolbar-switchers { + align-items: center; + display: flex; +} + +.edit-site-header__toolbar-switchers-separator { + margin: 0 -6px 0; +} + +/** + * Buttons in the Toolbar + */ +.edit-site-header__actions { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + padding-left: 4px; +} +.edit-site-header__actions .interface-pinned-items { + display: none; +} +@media (min-width: 782px) { + .edit-site-header__actions .interface-pinned-items { + display: inline-flex; + } +} +.edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.components-button { + margin-left: 4px; +} +@media (min-width: 600px) { + .edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.components-button { + margin-left: 12px; + } +} +.edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.is-tertiary { + padding: 0 6px; +} +.edit-site-header__actions .edit-site-more-menu .components-button, +.edit-site-header__actions .interface-pinned-items .components-button { + margin-left: 0; +} +@media (min-width: 600px) { + .edit-site-header__actions { + padding-left: 16px; + } +} + +.edit-site-header__actions-more-menu { + margin-right: -4px; +} +.edit-site-header__actions-more-menu .components-icon-button { + padding: 8px 2px; + width: auto; +} +@media (min-width: 600px) { + .edit-site-header__actions-more-menu { + margin-right: 4px; + } + .edit-site-header__actions-more-menu .components-icon-button { + padding: 8px 4px; + } +} + +.edit-site-document-actions { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown { + display: inline-flex; + margin-right: 4px; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button { + min-width: 0; + padding: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper > h1 { + margin: 0; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; +} +@media (min-width: 782px) { + .edit-site-document-actions .edit-site-document-actions__title { + max-width: 75px; + } +} +@media (min-width: 1080px) { + .edit-site-document-actions .edit-site-document-actions__title { + max-width: 180px; + } +} +.edit-site-document-actions .edit-site-document-actions__secondary-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 0; + opacity: 0; + padding: 0; + transition: all ease 0.2s; + background: #e0e0e0; + border-radius: 2px; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-document-actions .edit-site-document-actions__secondary-item { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item { + opacity: 1; + padding: 0 4px; + max-width: 180px; + margin-right: 6px; +} + +.edit-site-document-actions__info-dropdown > .components-popover__content > div { + padding: 0; + min-width: 240px; +} + +.edit-site-more-menu { + margin-right: -4px; +} +.edit-site-more-menu .components-button { + width: auto; + padding: 0 2px; +} +@media (min-width: 600px) { + .edit-site-more-menu { + margin-right: 4px; + } + .edit-site-more-menu .components-button { + padding: 0 4px; + } +} + +.edit-site-more-menu__content .components-popover__content { + min-width: 260px; +} +.edit-site-more-menu__content .components-popover__content .components-dropdown-menu__menu { + padding: 0; +} + +.components-popover.edit-site-more-menu__content { + z-index: 99998; +} + +.edit-site-navigation-link { + align-items: center; + background: #1e1e1e; + border-radius: 0; + display: flex; + position: absolute; + top: 0; + right: 0; + z-index: 31; + height: 60px; + width: 60px; +} + +.edit-site-navigation-link__button { + align-items: center; + background: #1e1e1e; + border-radius: 0; + color: #fff; + height: 61px; + width: 60px; + z-index: 1; + margin-bottom: -1px; +} +.edit-site-navigation-link__button.has-icon { + min-width: 60px; +} +.edit-site-navigation-link__button.has-icon:hover, .edit-site-navigation-link__button.has-icon:active, .edit-site-navigation-link__button.has-icon:focus { + color: #fff; +} +.edit-site-navigation-link__button.has-icon:focus { + box-shadow: none; +} +.edit-site-navigation-link__button.has-icon::before { + transition: box-shadow 0.1s ease; + content: ""; + display: block; + position: absolute; + top: 9px; + left: 9px; + bottom: 9px; + right: 9px; + border-radius: 4px; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-navigation-link__button.has-icon::before { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-navigation-link__button.has-icon:hover::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575; +} +.edit-site-navigation-link__button.has-icon:focus::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} + +.edit-site-navigation-link__site-icon { + width: 36px; + border-radius: 2px; +} + +.edit-site-sidebar { + width: 280px; +} +.edit-site-sidebar > .components-panel { + border-right: 0; + border-left: 0; + margin-bottom: -1px; + margin-top: -1px; +} +.edit-site-sidebar > .components-panel > .components-panel__header { + background: #f0f0f0; +} +.edit-site-sidebar .block-editor-block-inspector__card { + margin: 0; +} + +.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { + margin-right: 0; +} + +.edit-site-global-styles-sidebar__reset-button.components-button { + margin-right: auto; +} + +.edit-site-global-styles-sidebar__border-controls-row { + display: flex; + justify-content: space-between; + margin-bottom: 12px; +} +.edit-site-global-styles-sidebar__border-controls-row > * { + width: calc(50% - 8px); +} +.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons { + margin-bottom: 0; +} + +.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { + font-size: 15.6px; + font-weight: 500; +} + +.edit-site-global-styles-sidebar .components-navigation__item > button span { + font-weight: 500; +} + +.edit-site-typography-panel, +.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { + border: 0; +} + +.edit-site-global-styles-sidebar__blocks-group { + padding-top: 24px; + border-top: 1px solid #e0e0e0; +} + +.edit-site-global-styles-sidebar__blocks-group-help { + padding: 0 16px; +} + +.edit-site-global-styles-color-palette-panel { + padding: 16px; +} + +.edit-site-global-styles-sidebar__beta { + display: inline-flex; + margin-right: 8px; + padding: 0 8px; + height: 24px; + border-radius: 2px; + background-color: #000; + color: #fff; + align-items: center; + font-size: 12px; + line-height: 1; +} + +.components-panel__header.edit-site-sidebar__panel-tabs { + justify-content: flex-start; + padding-right: 0; + padding-left: 16px; + border-top: 0; + margin-top: 0; +} +.components-panel__header.edit-site-sidebar__panel-tabs ul { + display: flex; +} +.components-panel__header.edit-site-sidebar__panel-tabs li { + margin: 0; +} +.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { + display: none; + margin: 0 auto 0 0; + padding: 0; + min-width: 24px; + height: 24px; +} +@media (min-width: 782px) { + .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { + display: flex; + } +} + +.components-button.edit-site-sidebar__panel-tab { + border-radius: 0; + height: 48px; + background: transparent; + border: none; + box-shadow: none; + cursor: pointer; + display: inline-block; + padding: 3px 15px; + margin-right: 0; + font-weight: 500; +} +.components-button.edit-site-sidebar__panel-tab::after { + content: attr(data-label); + display: block; + font-weight: 600; + height: 0; + overflow: hidden; + speak: none; + visibility: hidden; +} +.components-button.edit-site-sidebar__panel-tab.is-active { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); + position: relative; + z-index: 1; +} +.components-button.edit-site-sidebar__panel-tab.is-active::before { + content: ""; + position: absolute; + top: 0; + bottom: 1px; + left: 0; + right: 0; + border-bottom: 4px solid transparent; +} +.components-button.edit-site-sidebar__panel-tab:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + position: relative; + z-index: 1; +} +.components-button.edit-site-sidebar__panel-tab.is-active:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); +} + +.edit-site-template-card { + display: flex; + align-items: flex-start; +} + +.edit-site-template-card__content { + flex-grow: 1; + margin-bottom: 4px; +} + +.edit-site-template-card__title { + font-weight: 500; + line-height: 24px; +} +.edit-site-template-card__title.edit-site-template-card__title { + margin: 0 0 4px; +} + +.edit-site-template-card__description { + font-size: 13px; + margin: 0 0 16px; +} + +.edit-site-template-card__icon { + flex: 0 0 24px; + margin-left: 12px; + width: 24px; + height: 24px; +} + +h3.edit-site-template-card__template-areas-title { + font-weight: 500; + margin: 0 0 8px; +} + +.edit-site-template-card__template-areas-list { + margin: 0; +} +.edit-site-template-card__template-areas-list > li { + margin: 0; +} + +.edit-site-template-card__template-areas-item { + width: 100%; +} +.edit-site-template-card__template-areas-item.components-button.has-icon { + padding: 0; +} + +.edit-site-editor__toggle-save-panel { + z-index: 100000; + position: fixed !important; + top: -9999em; + bottom: auto; + right: auto; + left: 0; + width: 280px; + background-color: #fff; + border: 1px dotted #ddd; + height: auto !important; + padding: 24px; + display: flex; + justify-content: center; +} +.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel { + top: auto; + bottom: 0; +} + +.edit-site-visual-editor { + position: relative; + height: 100%; + display: block; + overflow: hidden; +} +.edit-site-visual-editor iframe { + display: block; + width: 100%; + height: 100%; + background-color: #fff; +} + +.edit-site .components-editor-notices__snackbar { + position: fixed; + left: 0; + bottom: 40px; + padding-right: 16px; + padding-left: 16px; +} + +.edit-site .components-editor-notices__snackbar { + /* Set left position when auto-fold is not on the body element. */ + right: 0; +} +@media (min-width: 783px) { + .edit-site .components-editor-notices__snackbar { + right: 160px; + } +} + +.auto-fold .edit-site .components-editor-notices__snackbar { + /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ +} +@media (min-width: 783px) { + .auto-fold .edit-site .components-editor-notices__snackbar { + right: 36px; + } +} +@media (min-width: 961px) { + .auto-fold .edit-site .components-editor-notices__snackbar { + right: 160px; + } +} + +/* Sidebar manually collapsed. */ +.folded .edit-site .components-editor-notices__snackbar { + right: 0; +} +@media (min-width: 783px) { + .folded .edit-site .components-editor-notices__snackbar { + right: 36px; + } +} + +body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar { + right: 0 !important; +} + +.edit-site-template-details .edit-site-template-details__group { + margin: 0; + padding: 16px; +} +.edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group { + border-top: 1px solid #ccc; +} +.edit-site-template-details .edit-site-template-details__title { + margin: 0; +} +.edit-site-template-details .edit-site-template-details__description { + margin: 12px 0 0; + color: #757575; +} +.edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas { + padding: 8px; +} +.edit-site-template-details .edit-site-template-details__template-areas-item { + position: relative; +} +.edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more { + position: absolute; + left: 0; + top: 0; + bottom: 0; + margin: auto 0; +} +.edit-site-template-details .edit-site-template-details__revert { + padding: 12px 8px; +} +.edit-site-template-details .edit-site-template-details__revert-button { + height: auto; + padding: 4px 8px; + text-align: right; +} +.edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button { + display: flex; + justify-content: center; + background: #1e1e1e; + color: #fff; + width: 100%; + height: 44px; + border-radius: 0; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover { + color: #fff; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:active { + color: #ccc; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; +} + +.edit-site-template-part-converter__modal { + z-index: 1000001; +} +@media (min-width: 600px) { + .edit-site-template-part-converter__modal .components-modal__frame { + max-width: 500px; + } +} + +.edit-site-template-part-converter__convert-modal-actions { + padding-top: 12px; +} + +.edit-site-template-part-converter__area-base-control .components-base-control__label { + margin: 16px 0 8px; + cursor: auto; +} + +.edit-site-template-part-converter__area-radio-group { + width: 100%; + border: 1px solid #757575; + border-radius: 2px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio { + display: block; + width: 100%; + height: 100%; + text-align: right; + padding: 12px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover { + margin: 0; + background-color: inherit; + border-bottom: 1px solid #757575; + border-radius: 0; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:focus), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:not(:focus), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:not(:focus) { + box-shadow: none; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:focus, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:focus, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:focus { + border-bottom: 1px solid #fff; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:last-of-type, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:last-of-type, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:last-of-type { + border-bottom: none; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] { + color: #1e1e1e; + cursor: auto; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover) .edit-site-template-part-converter__option-label div, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] .edit-site-template-part-converter__option-label div { + color: #949494; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label { + padding-top: 4px; + white-space: normal; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label div { + padding-top: 4px; + font-size: 12px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__checkbox { + margin-right: auto; + min-width: 24px; +} + +.edit-site-editor__inserter-panel, +.edit-site-editor__list-view-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-site-editor__list-view-panel { + min-width: 350px; +} + +.edit-site-editor__inserter-panel-header { + padding-top: 8px; + padding-left: 8px; + display: flex; + justify-content: flex-end; +} +@media (min-width: 782px) { + .edit-site-editor__inserter-panel-header { + display: none; + } +} + +.edit-site-editor__inserter-panel-content, +.edit-site-editor__list-view-panel-content { + height: calc(100% - 36px - 8px); +} + +@media (min-width: 782px) { + .edit-site-editor__inserter-panel-content { + height: 100%; + } +} + +.edit-site-editor__list-view-panel-header { + align-items: center; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + height: 48px; + padding-right: 16px; + padding-left: 4px; +} + +.edit-site-editor__list-view-panel-content { + overflow-y: auto; + padding: 8px; +} + +html.wp-toolbar { + background: #fff; +} + +body.appearance_page_gutenberg-edit-site { + background: #fff; + /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. + Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ +} +body.appearance_page_gutenberg-edit-site #wpcontent { + padding-right: 0; +} +body.appearance_page_gutenberg-edit-site #wpbody-content { + padding-bottom: 0; +} +body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta) { + display: none; +} +body.appearance_page_gutenberg-edit-site #wpfooter { + display: none; +} +body.appearance_page_gutenberg-edit-site .a11y-speak-region { + right: -1px; + top: -1px; +} +body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after, +body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after { + border-left-color: #fff; +} +body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type { + width: auto; + max-width: 100%; +} + +.edit-site, +.components-modal__frame { + box-sizing: border-box; +} +.edit-site *, +.edit-site *::before, +.edit-site *::after, +.components-modal__frame *, +.components-modal__frame *::before, +.components-modal__frame *::after { + box-sizing: inherit; +} + +@media (min-width: 600px) { + .edit-site { + bottom: 0; + right: 0; + min-height: calc(100vh - 46px); + position: absolute; + left: 0; + top: 0; + } +} +@media (min-width: 782px) { + .edit-site { + min-height: calc(100vh - 32px); + } +} +.edit-site .interface-complementary-area__pin-unpin-item.components-button { + display: none; +} +.edit-site .interface-interface-skeleton__content { + background-color: #2f2f2f; +} + +/** + * Animations + */ +@keyframes edit-post__fade-in-animation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +body.admin-color-light { + --wp-admin-theme-color: #0085ba; + --wp-admin-theme-color--rgb: 0, 133, 186; + --wp-admin-theme-color-darker-10: #0073a1; + --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; + --wp-admin-theme-color-darker-20: #006187; + --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-light { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-modern { + --wp-admin-theme-color: #3858e9; + --wp-admin-theme-color--rgb: 56, 88, 233; + --wp-admin-theme-color-darker-10: #2145e6; + --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; + --wp-admin-theme-color-darker-20: #183ad6; + --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-modern { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-blue { + --wp-admin-theme-color: #096484; + --wp-admin-theme-color--rgb: 9, 100, 132; + --wp-admin-theme-color-darker-10: #07526c; + --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; + --wp-admin-theme-color-darker-20: #064054; + --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-blue { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-coffee { + --wp-admin-theme-color: #46403c; + --wp-admin-theme-color--rgb: 70, 64, 60; + --wp-admin-theme-color-darker-10: #383330; + --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; + --wp-admin-theme-color-darker-20: #2b2724; + --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-coffee { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-ectoplasm { + --wp-admin-theme-color: #523f6d; + --wp-admin-theme-color--rgb: 82, 63, 109; + --wp-admin-theme-color-darker-10: #46365d; + --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; + --wp-admin-theme-color-darker-20: #3a2c4d; + --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ectoplasm { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-midnight { + --wp-admin-theme-color: #e14d43; + --wp-admin-theme-color--rgb: 225, 77, 67; + --wp-admin-theme-color-darker-10: #dd382d; + --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; + --wp-admin-theme-color-darker-20: #d02c21; + --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-midnight { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-ocean { + --wp-admin-theme-color: #627c83; + --wp-admin-theme-color--rgb: 98, 124, 131; + --wp-admin-theme-color-darker-10: #576e74; + --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; + --wp-admin-theme-color-darker-20: #4c6066; + --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ocean { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-sunrise { + --wp-admin-theme-color: #dd823b; + --wp-admin-theme-color--rgb: 221, 130, 59; + --wp-admin-theme-color-darker-10: #d97426; + --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; + --wp-admin-theme-color-darker-20: #c36922; + --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-sunrise { + --wp-admin-border-width-focus: 1.5px; + } +} \ No newline at end of file diff --git a/wp-includes/css/dist/edit-site/style-rtl.min.css b/wp-includes/css/dist/edit-site/style-rtl.min.css new file mode 100644 index 000000000000..e228aa86fb6a --- /dev/null +++ b/wp-includes/css/dist/edit-site/style-rtl.min.css @@ -0,0 +1 @@ +:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.components-panel__header.interface-complementary-area-header__small{background:#fff;padding-left:4px}.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}@media (min-width:782px){.components-panel__header.interface-complementary-area-header__small{display:none}}.interface-complementary-area-header{background:#fff;padding-left:4px}.interface-complementary-area-header .components-button.has-icon{display:none;margin-right:auto}.interface-complementary-area-header .components-button.has-icon~.components-button{margin-right:0}@media (min-width:782px){.interface-complementary-area-header .components-button.has-icon{display:flex}}@media (min-width:782px){.components-panel__header+.interface-complementary-area-header{margin-top:0}}.interface-complementary-area{background:#fff;color:#1e1e1e}@media (min-width:600px){.interface-complementary-area{-webkit-overflow-scrolling:touch}}@media (min-width:782px){.interface-complementary-area{width:280px}}.interface-complementary-area .components-panel{border:none;position:relative;z-index:0}.interface-complementary-area .components-panel__header{position:sticky;top:0;z-index:1}.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{top:48px}@media (min-width:782px){.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{top:0}}.interface-complementary-area p{margin-top:0}.interface-complementary-area h2{font-size:13px;color:#1e1e1e;margin-bottom:1.5em}.interface-complementary-area h3{font-size:11px;text-transform:uppercase;font-weight:500;color:#1e1e1e;margin-bottom:1.5em}.interface-complementary-area hr{border-top:none;border-bottom:1px solid #f0f0f0;margin:1.5em 0}.interface-complementary-area div.components-toolbar,.interface-complementary-area div.components-toolbar-group{box-shadow:none;margin-bottom:1.5em}.interface-complementary-area div.components-toolbar-group:last-child,.interface-complementary-area div.components-toolbar:last-child{margin-bottom:0}.interface-complementary-area .block-editor-skip-to-selected-block:focus{top:auto;left:10px;bottom:10px;right:auto}@media (min-width:782px){body.js.is-fullscreen-mode{margin-top:-32px;height:calc(100% + 32px)}body.js.is-fullscreen-mode #adminmenumain,body.js.is-fullscreen-mode #wpadminbar{display:none}body.js.is-fullscreen-mode #wpcontent,body.js.is-fullscreen-mode #wpfooter{margin-right:0}}html.interface-interface-skeleton__html-container{position:fixed;width:100%}@media (min-width:782px){html.interface-interface-skeleton__html-container{position:static;width:auto}}.interface-interface-skeleton{display:flex;flex-direction:row;height:auto;max-height:100%;position:fixed;top:46px;left:0;bottom:0}@media (min-width:783px){.interface-interface-skeleton{top:32px}.is-fullscreen-mode .interface-interface-skeleton{top:0}}.interface-interface-skeleton__editor{display:flex;flex-direction:column;flex:0 1 100%;overflow:hidden}.interface-interface-skeleton{right:0}@media (min-width:783px){.interface-interface-skeleton{right:160px}}@media (min-width:783px){.auto-fold .interface-interface-skeleton{right:36px}}@media (min-width:961px){.auto-fold .interface-interface-skeleton{right:160px}}.folded .interface-interface-skeleton{right:0}@media (min-width:783px){.folded .interface-interface-skeleton{right:36px}}body.is-fullscreen-mode .interface-interface-skeleton{right:0!important}.interface-interface-skeleton__body{flex-grow:1;display:flex;overflow:auto;overscroll-behavior-y:none}@media (min-width:782px){.has-footer .interface-interface-skeleton__body{padding-bottom:25px}}.interface-interface-skeleton__content{flex-grow:1;display:flex;flex-direction:column;overflow:auto;z-index:20}.interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{display:block;flex-shrink:0;position:absolute;z-index:100000;top:0;left:0;bottom:0;right:0;background:#fff;color:#1e1e1e}@media (min-width:782px){.interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{position:relative!important;z-index:90;width:auto}}.interface-interface-skeleton__sidebar{overflow:auto}@media (min-width:782px){.interface-interface-skeleton__sidebar{border-right:1px solid #e0e0e0}}@media (min-width:782px){.interface-interface-skeleton__secondary-sidebar{border-left:1px solid #e0e0e0}}.interface-interface-skeleton__header{flex-shrink:0;height:auto;border-bottom:1px solid #e0e0e0;z-index:30;color:#1e1e1e}.interface-interface-skeleton__footer{height:auto;flex-shrink:0;border-top:1px solid #e0e0e0;color:#1e1e1e;position:absolute;bottom:0;right:0;width:100%;background-color:#fff;z-index:90;display:none}@media (min-width:782px){.interface-interface-skeleton__footer{display:flex}}.interface-interface-skeleton__footer .block-editor-block-breadcrumb{z-index:30;display:flex;background:#fff;height:24px;align-items:center;font-size:13px;padding:0 18px}.interface-interface-skeleton__actions{z-index:100000;position:fixed!important;top:-9999em;bottom:auto;right:auto;left:0;width:280px;color:#1e1e1e}.interface-interface-skeleton__actions:focus{top:auto;bottom:0}.interface-more-menu-dropdown{margin-right:-4px}.interface-more-menu-dropdown .components-button{width:auto;padding:0 2px}@media (min-width:600px){.interface-more-menu-dropdown{margin-right:0}.interface-more-menu-dropdown .components-button{padding:0 4px}}.interface-more-menu-dropdown__content .components-popover__content{min-width:280px}@media (min-width:480px){.interface-more-menu-dropdown__content .components-popover__content{width:auto;max-width:480px}}.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu{padding:0}.components-popover.interface-more-menu-dropdown__content{z-index:99998}.interface-pinned-items{display:flex}.interface-pinned-items .components-button:not(:first-child){display:none}@media (min-width:600px){.interface-pinned-items .components-button:not(:first-child){display:flex}}.interface-pinned-items .components-button{margin-right:4px}.interface-pinned-items .components-button svg{max-width:24px;max-height:24px}.edit-site-block-editor__editor-styles-wrapper .components-button{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:6px 12px}.edit-site-block-editor__editor-styles-wrapper .components-button.has-icon,.edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary{padding:6px}.edit-site-visual-editor{background-color:#2f2f2f;align-items:center}.edit-site-visual-editor.is-focus-mode{padding:48px}.edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas{border-radius:2px}.edit-site-visual-editor__editor-canvas{border-radius:2px 2px 0 0}.edit-site-visual-editor__back-button{position:absolute;top:8px;right:8px;color:#fff}.edit-site-visual-editor__back-button:active:not([aria-disabled=true]),.edit-site-visual-editor__back-button:focus:not([aria-disabled=true]),.edit-site-visual-editor__back-button:hover{color:#f0f0f0}.components-resizable-box__container{margin:0 auto}.resizable-editor__drag-handle{position:absolute;top:0;bottom:0;padding:0;margin:auto 0;width:8px;height:100px;-webkit-appearance:none;appearance:none;cursor:grab;outline:none;background:#757575;border-radius:4px;border:0}.resizable-editor__drag-handle.is-left{right:-28px}.resizable-editor__drag-handle.is-right{left:-28px}.resizable-editor__drag-handle:hover{background:#949494}.resizable-editor__drag-handle:active{cursor:grabbing;background:#949494}.resizable-editor__drag-handle:focus{box-shadow:0 0 0 1px #2f2f2f,0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color)}.edit-site-global-styles-preview{display:flex;align-items:center;justify-content:center;min-height:152px;line-height:1}.edit-site-global-styles-preview .component-color-indicator{border-radius:50%;border:0;height:36px;width:36px;margin-right:0;padding:0}.edit-site-global-styles-screen-colors{margin:16px}.edit-site-global-styles-screen-colors .component-color-indicator{margin-right:0;display:block;border-radius:50%;border:0;height:24px;width:24px;padding:0;background-image:repeating-linear-gradient(-45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0),repeating-linear-gradient(-45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0);background-position:100% 0,25px 25px;background-size:10px 10px}.edit-site-global-styles-header__description{padding:0 16px}.edit-site-global-styles-subtitle{margin-bottom:0!important;text-transform:uppercase;font-weight:500}.edit-site-header{align-items:center;background-color:#fff;display:flex;height:60px;box-sizing:border-box;width:100%;justify-content:space-between}body.is-fullscreen-mode .edit-site-header{padding-right:60px;transition:padding-right 20ms linear;transition-delay:80ms}@media (prefers-reduced-motion:reduce){body.is-fullscreen-mode .edit-site-header{transition-duration:0s;transition-delay:0s}}.edit-site-header .edit-site-header_end,.edit-site-header .edit-site-header_start{display:flex}.edit-site-header .edit-site-header_center{display:flex;align-items:center;height:100%;min-width:0}.edit-site-header .edit-site-header_end{justify-content:flex-end}body.is-navigation-sidebar-open .edit-site-header{padding-right:0;transition:padding-right 20ms linear;transition-delay:0ms}@media (prefers-reduced-motion:reduce){body.is-navigation-sidebar-open .edit-site-header{transition-duration:0s;transition-delay:0s}}@media (max-width:959px){body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle~.components-button,body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary){display:none}body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button{margin-left:0}}.edit-site-header__toolbar{display:flex;align-items:center;padding-right:8px}@media (min-width:600px){.edit-site-header__toolbar{padding-right:24px}}@media (min-width:1280px){.edit-site-header__toolbar{padding-left:8px}}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle{margin-left:8px;min-width:32px;width:32px;height:32px;padding:0}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg{transition:transform .2s cubic-bezier(.165,.84,.44,1)}@media (prefers-reduced-motion:reduce){.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg{transition-duration:0s;transition-delay:0s}}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg{transform:rotate(-45deg)}.edit-site-header__toolbar-switchers{align-items:center;display:flex}.edit-site-header__toolbar-switchers-separator{margin:0 -6px}.edit-site-header__actions{display:inline-flex;align-items:center;flex-wrap:wrap;padding-left:4px}.edit-site-header__actions .interface-pinned-items{display:none}@media (min-width:782px){.edit-site-header__actions .interface-pinned-items{display:inline-flex}}.edit-site-header__actions .components-button.components-button,.edit-site-header__actions .editor-post-saved-state{margin-left:4px}@media (min-width:600px){.edit-site-header__actions .components-button.components-button,.edit-site-header__actions .editor-post-saved-state{margin-left:12px}}.edit-site-header__actions .components-button.is-tertiary,.edit-site-header__actions .editor-post-saved-state{padding:0 6px}.edit-site-header__actions .edit-site-more-menu .components-button,.edit-site-header__actions .interface-pinned-items .components-button{margin-left:0}@media (min-width:600px){.edit-site-header__actions{padding-left:16px}}.edit-site-header__actions-more-menu{margin-right:-4px}.edit-site-header__actions-more-menu .components-icon-button{padding:8px 2px;width:auto}@media (min-width:600px){.edit-site-header__actions-more-menu{margin-right:4px}.edit-site-header__actions-more-menu .components-icon-button{padding:8px 4px}}.edit-site-document-actions{display:flex;flex-direction:column;justify-content:center;height:100%;min-width:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;min-width:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown{display:inline-flex;margin-right:4px}.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button{min-width:0;padding:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper>h1{margin:0;min-width:0}.edit-site-document-actions .edit-site-document-actions__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}@media (min-width:782px){.edit-site-document-actions .edit-site-document-actions__title{max-width:75px}}@media (min-width:1080px){.edit-site-document-actions .edit-site-document-actions__title{max-width:180px}}.edit-site-document-actions .edit-site-document-actions__secondary-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;opacity:0;padding:0;transition:all .2s ease;background:#e0e0e0;border-radius:2px}@media (prefers-reduced-motion:reduce){.edit-site-document-actions .edit-site-document-actions__secondary-item{transition-duration:0s;transition-delay:0s}}.edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item{opacity:1;padding:0 4px;max-width:180px;margin-right:6px}.edit-site-document-actions__info-dropdown>.components-popover__content>div{padding:0;min-width:240px}.edit-site-more-menu{margin-right:-4px}.edit-site-more-menu .components-button{width:auto;padding:0 2px}@media (min-width:600px){.edit-site-more-menu{margin-right:4px}.edit-site-more-menu .components-button{padding:0 4px}}.edit-site-more-menu__content .components-popover__content{min-width:260px}.edit-site-more-menu__content .components-popover__content .components-dropdown-menu__menu{padding:0}.components-popover.edit-site-more-menu__content{z-index:99998}.edit-site-navigation-link{display:flex;position:absolute;top:0;right:0;z-index:31;height:60px}.edit-site-navigation-link,.edit-site-navigation-link__button{align-items:center;background:#1e1e1e;border-radius:0;width:60px}.edit-site-navigation-link__button{color:#fff;height:61px;z-index:1;margin-bottom:-1px}.edit-site-navigation-link__button.has-icon{min-width:60px}.edit-site-navigation-link__button.has-icon:active,.edit-site-navigation-link__button.has-icon:focus,.edit-site-navigation-link__button.has-icon:hover{color:#fff}.edit-site-navigation-link__button.has-icon:focus{box-shadow:none}.edit-site-navigation-link__button.has-icon:before{transition:box-shadow .1s ease;content:"";display:block;position:absolute;top:9px;left:9px;bottom:9px;right:9px;border-radius:4px;box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e}@media (prefers-reduced-motion:reduce){.edit-site-navigation-link__button.has-icon:before{transition-duration:0s;transition-delay:0s}}.edit-site-navigation-link__button.has-icon:hover:before{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #757575}.edit-site-navigation-link__button.has-icon:focus:before{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) hsla(0,0%,100%,.1),inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color)}.edit-site-navigation-link__site-icon{width:36px;border-radius:2px}.edit-site-sidebar{width:280px}.edit-site-sidebar>.components-panel{border-right:0;border-left:0;margin-bottom:-1px;margin-top:-1px}.edit-site-sidebar>.components-panel>.components-panel__header{background:#f0f0f0}.edit-site-sidebar .block-editor-block-inspector__card{margin:0}.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon{margin-right:0}.edit-site-global-styles-sidebar__reset-button.components-button{margin-right:auto}.edit-site-global-styles-sidebar__border-controls-row{display:flex;justify-content:space-between;margin-bottom:12px}.edit-site-global-styles-sidebar__border-controls-row>*{width:calc(50% - 8px)}.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons{margin-bottom:0}.edit-site-global-styles-sidebar .components-navigation__menu-title-heading{font-size:15.6px;font-weight:500}.edit-site-global-styles-sidebar .components-navigation__item>button span{font-weight:500}.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings,.edit-site-typography-panel{border:0}.edit-site-global-styles-sidebar__blocks-group{padding-top:24px;border-top:1px solid #e0e0e0}.edit-site-global-styles-sidebar__blocks-group-help{padding:0 16px}.edit-site-global-styles-color-palette-panel{padding:16px}.edit-site-global-styles-sidebar__beta{display:inline-flex;margin-right:8px;padding:0 8px;height:24px;border-radius:2px;background-color:#000;color:#fff;align-items:center;font-size:12px;line-height:1}.components-panel__header.edit-site-sidebar__panel-tabs{justify-content:flex-start;padding-right:0;padding-left:16px;border-top:0;margin-top:0}.components-panel__header.edit-site-sidebar__panel-tabs ul{display:flex}.components-panel__header.edit-site-sidebar__panel-tabs li{margin:0}.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon{display:none;margin:0 auto 0 0;padding:0;min-width:24px;height:24px}@media (min-width:782px){.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon{display:flex}}.components-button.edit-site-sidebar__panel-tab{border-radius:0;height:48px;background:transparent;border:none;box-shadow:none;cursor:pointer;display:inline-block;padding:3px 15px;margin-right:0;font-weight:500}.components-button.edit-site-sidebar__panel-tab:after{content:attr(data-label);display:block;font-weight:600;height:0;overflow:hidden;speak:none;visibility:hidden}.components-button.edit-site-sidebar__panel-tab.is-active{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) transparent,inset 0 -4px 0 0 var(--wp-admin-theme-color);position:relative;z-index:1}.components-button.edit-site-sidebar__panel-tab.is-active:before{content:"";position:absolute;top:0;bottom:1px;left:0;right:0;border-bottom:4px solid transparent}.components-button.edit-site-sidebar__panel-tab:focus{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);position:relative;z-index:1}.components-button.edit-site-sidebar__panel-tab.is-active:focus{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 -4px 0 0 var(--wp-admin-theme-color)}.edit-site-template-card{display:flex;align-items:flex-start}.edit-site-template-card__content{flex-grow:1;margin-bottom:4px}.edit-site-template-card__title{font-weight:500;line-height:24px}.edit-site-template-card__title.edit-site-template-card__title{margin:0 0 4px}.edit-site-template-card__description{font-size:13px;margin:0 0 16px}.edit-site-template-card__icon{flex:0 0 24px;margin-left:12px;width:24px;height:24px}h3.edit-site-template-card__template-areas-title{font-weight:500;margin:0 0 8px}.edit-site-template-card__template-areas-list,.edit-site-template-card__template-areas-list>li{margin:0}.edit-site-template-card__template-areas-item{width:100%}.edit-site-template-card__template-areas-item.components-button.has-icon{padding:0}.edit-site-editor__toggle-save-panel{z-index:100000;position:fixed!important;top:-9999em;bottom:auto;right:auto;left:0;width:280px;background-color:#fff;border:1px dotted #ddd;height:auto!important;padding:24px;display:flex;justify-content:center}.interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel,.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel{top:auto;bottom:0}.edit-site-visual-editor{position:relative;height:100%;display:block;overflow:hidden}.edit-site-visual-editor iframe{display:block;width:100%;height:100%;background-color:#fff}.edit-site .components-editor-notices__snackbar{position:fixed;left:0;bottom:40px;padding-right:16px;padding-left:16px;right:0}@media (min-width:783px){.edit-site .components-editor-notices__snackbar{right:160px}}@media (min-width:783px){.auto-fold .edit-site .components-editor-notices__snackbar{right:36px}}@media (min-width:961px){.auto-fold .edit-site .components-editor-notices__snackbar{right:160px}}.folded .edit-site .components-editor-notices__snackbar{right:0}@media (min-width:783px){.folded .edit-site .components-editor-notices__snackbar{right:36px}}body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar{right:0!important}.edit-site-template-details .edit-site-template-details__group{margin:0;padding:16px}.edit-site-template-details .edit-site-template-details__group+.edit-site-template-details__group{border-top:1px solid #ccc}.edit-site-template-details .edit-site-template-details__title{margin:0}.edit-site-template-details .edit-site-template-details__description{margin:12px 0 0;color:#757575}.edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas{padding:8px}.edit-site-template-details .edit-site-template-details__template-areas-item{position:relative}.edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more{position:absolute;left:0;top:0;bottom:0;margin:auto 0}.edit-site-template-details .edit-site-template-details__revert{padding:12px 8px}.edit-site-template-details .edit-site-template-details__revert-button{height:auto;padding:4px 8px;text-align:right}.edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 0 0 3px #fff}.edit-site-template-details .edit-site-template-details__show-all-button.components-button{display:flex;justify-content:center;background:#1e1e1e;color:#fff;width:100%;height:44px;border-radius:0}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover{color:#fff}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:active{color:#ccc}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 0 0 3px #fff}.edit-site-template-part-converter__modal{z-index:1000001}@media (min-width:600px){.edit-site-template-part-converter__modal .components-modal__frame{max-width:500px}}.edit-site-template-part-converter__convert-modal-actions{padding-top:12px}.edit-site-template-part-converter__area-base-control .components-base-control__label{margin:16px 0 8px;cursor:auto}.edit-site-template-part-converter__area-radio-group{width:100%;border:1px solid #757575;border-radius:2px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio{display:block;width:100%;height:100%;text-align:right;padding:12px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover{margin:0;background-color:inherit;border-bottom:1px solid #757575;border-radius:0}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:not(:focus),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:not(:focus),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:focus){box-shadow:none}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:focus,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:focus,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:focus{border-bottom:1px solid #fff}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:last-of-type,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:last-of-type,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:last-of-type{border-bottom:none}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true]{color:#1e1e1e;cursor:auto}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover) .edit-site-template-part-converter__option-label div,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] .edit-site-template-part-converter__option-label div{color:#949494}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label{padding-top:4px;white-space:normal}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label div{padding-top:4px;font-size:12px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__checkbox{margin-right:auto;min-width:24px}.edit-site-editor__inserter-panel,.edit-site-editor__list-view-panel{height:100%;display:flex;flex-direction:column}.edit-site-editor__list-view-panel{min-width:350px}.edit-site-editor__inserter-panel-header{padding-top:8px;padding-left:8px;display:flex;justify-content:flex-end}@media (min-width:782px){.edit-site-editor__inserter-panel-header{display:none}}.edit-site-editor__inserter-panel-content,.edit-site-editor__list-view-panel-content{height:calc(100% - 44px)}@media (min-width:782px){.edit-site-editor__inserter-panel-content{height:100%}}.edit-site-editor__list-view-panel-header{align-items:center;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;height:48px;padding-right:16px;padding-left:4px}.edit-site-editor__list-view-panel-content{overflow-y:auto;padding:8px}body.appearance_page_gutenberg-edit-site,html.wp-toolbar{background:#fff}body.appearance_page_gutenberg-edit-site #wpcontent{padding-right:0}body.appearance_page_gutenberg-edit-site #wpbody-content{padding-bottom:0}body.appearance_page_gutenberg-edit-site #wpbody-content>div:not(.edit-site):not(#screen-meta),body.appearance_page_gutenberg-edit-site #wpfooter{display:none}body.appearance_page_gutenberg-edit-site .a11y-speak-region{right:-1px;top:-1px}body.appearance_page_gutenberg-edit-site ul#adminmenu>li.current>a.current:after,body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu:after{border-left-color:#fff}body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type{width:auto;max-width:100%}.components-modal__frame,.edit-site{box-sizing:border-box}.components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before,.edit-site *,.edit-site :after,.edit-site :before{box-sizing:inherit}@media (min-width:600px){.edit-site{bottom:0;right:0;min-height:calc(100vh - 46px);position:absolute;left:0;top:0}}@media (min-width:782px){.edit-site{min-height:calc(100vh - 32px)}}.edit-site .interface-complementary-area__pin-unpin-item.components-button{display:none}.edit-site .interface-interface-skeleton__content{background-color:#2f2f2f}@keyframes edit-post__fade-in-animation{0%{opacity:0}to{opacity:1}}body.admin-color-light{--wp-admin-theme-color:#0085ba;--wp-admin-theme-color--rgb:0,133,186;--wp-admin-theme-color-darker-10:#0073a1;--wp-admin-theme-color-darker-10--rgb:0,115,161;--wp-admin-theme-color-darker-20:#006187;--wp-admin-theme-color-darker-20--rgb:0,97,135;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-light{--wp-admin-border-width-focus:1.5px}}body.admin-color-modern{--wp-admin-theme-color:#3858e9;--wp-admin-theme-color--rgb:56,88,233;--wp-admin-theme-color-darker-10:#2145e6;--wp-admin-theme-color-darker-10--rgb:33,69,230;--wp-admin-theme-color-darker-20:#183ad6;--wp-admin-theme-color-darker-20--rgb:24,58,214;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-modern{--wp-admin-border-width-focus:1.5px}}body.admin-color-blue{--wp-admin-theme-color:#096484;--wp-admin-theme-color--rgb:9,100,132;--wp-admin-theme-color-darker-10:#07526c;--wp-admin-theme-color-darker-10--rgb:7,82,108;--wp-admin-theme-color-darker-20:#064054;--wp-admin-theme-color-darker-20--rgb:6,64,84;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-blue{--wp-admin-border-width-focus:1.5px}}body.admin-color-coffee{--wp-admin-theme-color:#46403c;--wp-admin-theme-color--rgb:70,64,60;--wp-admin-theme-color-darker-10:#383330;--wp-admin-theme-color-darker-10--rgb:56,51,48;--wp-admin-theme-color-darker-20:#2b2724;--wp-admin-theme-color-darker-20--rgb:43,39,36;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-coffee{--wp-admin-border-width-focus:1.5px}}body.admin-color-ectoplasm{--wp-admin-theme-color:#523f6d;--wp-admin-theme-color--rgb:82,63,109;--wp-admin-theme-color-darker-10:#46365d;--wp-admin-theme-color-darker-10--rgb:70,54,93;--wp-admin-theme-color-darker-20:#3a2c4d;--wp-admin-theme-color-darker-20--rgb:58,44,77;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-ectoplasm{--wp-admin-border-width-focus:1.5px}}body.admin-color-midnight{--wp-admin-theme-color:#e14d43;--wp-admin-theme-color--rgb:225,77,67;--wp-admin-theme-color-darker-10:#dd382d;--wp-admin-theme-color-darker-10--rgb:221,56,45;--wp-admin-theme-color-darker-20:#d02c21;--wp-admin-theme-color-darker-20--rgb:208,44,33;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-midnight{--wp-admin-border-width-focus:1.5px}}body.admin-color-ocean{--wp-admin-theme-color:#627c83;--wp-admin-theme-color--rgb:98,124,131;--wp-admin-theme-color-darker-10:#576e74;--wp-admin-theme-color-darker-10--rgb:87,110,116;--wp-admin-theme-color-darker-20:#4c6066;--wp-admin-theme-color-darker-20--rgb:76,96,102;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-ocean{--wp-admin-border-width-focus:1.5px}}body.admin-color-sunrise{--wp-admin-theme-color:#dd823b;--wp-admin-theme-color--rgb:221,130,59;--wp-admin-theme-color-darker-10:#d97426;--wp-admin-theme-color-darker-10--rgb:217,116,38;--wp-admin-theme-color-darker-20:#c36922;--wp-admin-theme-color-darker-20--rgb:195,105,34;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-sunrise{--wp-admin-border-width-focus:1.5px}} \ No newline at end of file diff --git a/wp-includes/css/dist/edit-site/style.css b/wp-includes/css/dist/edit-site/style.css new file mode 100644 index 000000000000..fc95b67e7171 --- /dev/null +++ b/wp-includes/css/dist/edit-site/style.css @@ -0,0 +1,1523 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +:root { + --wp-admin-theme-color: #007cba; + --wp-admin-theme-color--rgb: 0, 124, 186; + --wp-admin-theme-color-darker-10: #006ba1; + --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; + --wp-admin-theme-color-darker-20: #005a87; + --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + :root { + --wp-admin-border-width-focus: 1.5px; + } +} + +.components-panel__header.interface-complementary-area-header__small { + background: #fff; + padding-right: 4px; +} +.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} +@media (min-width: 782px) { + .components-panel__header.interface-complementary-area-header__small { + display: none; + } +} + +.interface-complementary-area-header { + background: #fff; + padding-right: 4px; +} +.interface-complementary-area-header .components-button.has-icon { + display: none; + margin-left: auto; +} +.interface-complementary-area-header .components-button.has-icon ~ .components-button { + margin-left: 0; +} +@media (min-width: 782px) { + .interface-complementary-area-header .components-button.has-icon { + display: flex; + } +} + +@media (min-width: 782px) { + .components-panel__header + .interface-complementary-area-header { + margin-top: 0; + } +} + +.interface-complementary-area { + background: #fff; + color: #1e1e1e; +} +@media (min-width: 600px) { + .interface-complementary-area { + -webkit-overflow-scrolling: touch; + } +} +@media (min-width: 782px) { + .interface-complementary-area { + width: 280px; + } +} +.interface-complementary-area .components-panel { + border: none; + position: relative; + z-index: 0; +} +.interface-complementary-area .components-panel__header { + position: sticky; + top: 0; + z-index: 1; +} +.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { + top: 48px; +} +@media (min-width: 782px) { + .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { + top: 0; + } +} +.interface-complementary-area p { + margin-top: 0; +} +.interface-complementary-area h2 { + font-size: 13px; + color: #1e1e1e; + margin-bottom: 1.5em; +} +.interface-complementary-area h3 { + font-size: 11px; + text-transform: uppercase; + font-weight: 500; + color: #1e1e1e; + margin-bottom: 1.5em; +} +.interface-complementary-area hr { + border-top: none; + border-bottom: 1px solid #f0f0f0; + margin: 1.5em 0; +} +.interface-complementary-area div.components-toolbar-group, +.interface-complementary-area div.components-toolbar { + box-shadow: none; + margin-bottom: 1.5em; +} +.interface-complementary-area div.components-toolbar-group:last-child, +.interface-complementary-area div.components-toolbar:last-child { + margin-bottom: 0; +} +.interface-complementary-area .block-editor-skip-to-selected-block:focus { + top: auto; + right: 10px; + bottom: 10px; + left: auto; +} + +@media (min-width: 782px) { + body.js.is-fullscreen-mode { + margin-top: -32px; + height: calc(100% + 32px); + } + body.js.is-fullscreen-mode #adminmenumain, +body.js.is-fullscreen-mode #wpadminbar { + display: none; + } + body.js.is-fullscreen-mode #wpcontent, +body.js.is-fullscreen-mode #wpfooter { + margin-left: 0; + } +} + +html.interface-interface-skeleton__html-container { + position: fixed; + width: 100%; +} +@media (min-width: 782px) { + html.interface-interface-skeleton__html-container { + position: initial; + width: initial; + } +} + +.interface-interface-skeleton { + display: flex; + flex-direction: row; + height: auto; + max-height: 100%; + position: fixed; + top: 46px; + left: 0; + right: 0; + bottom: 0; +} +@media (min-width: 783px) { + .interface-interface-skeleton { + top: 32px; + } + .is-fullscreen-mode .interface-interface-skeleton { + top: 0; + } +} + +.interface-interface-skeleton__editor { + display: flex; + flex-direction: column; + flex: 0 1 100%; + overflow: hidden; +} + +.interface-interface-skeleton { + /* Set left position when auto-fold is not on the body element. */ + left: 0; +} +@media (min-width: 783px) { + .interface-interface-skeleton { + left: 160px; + } +} + +.auto-fold .interface-interface-skeleton { + /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ +} +@media (min-width: 783px) { + .auto-fold .interface-interface-skeleton { + left: 36px; + } +} +@media (min-width: 961px) { + .auto-fold .interface-interface-skeleton { + left: 160px; + } +} + +/* Sidebar manually collapsed. */ +.folded .interface-interface-skeleton { + left: 0; +} +@media (min-width: 783px) { + .folded .interface-interface-skeleton { + left: 36px; + } +} + +body.is-fullscreen-mode .interface-interface-skeleton { + left: 0 !important; +} + +.interface-interface-skeleton__body { + flex-grow: 1; + display: flex; + overflow: auto; + overscroll-behavior-y: none; +} +@media (min-width: 782px) { + .has-footer .interface-interface-skeleton__body { + padding-bottom: 25px; + } +} + +.interface-interface-skeleton__content { + flex-grow: 1; + display: flex; + flex-direction: column; + overflow: auto; + z-index: 20; +} + +.interface-interface-skeleton__secondary-sidebar, +.interface-interface-skeleton__sidebar { + display: block; + flex-shrink: 0; + position: absolute; + z-index: 100000; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #fff; + color: #1e1e1e; +} +@media (min-width: 782px) { + .interface-interface-skeleton__secondary-sidebar, +.interface-interface-skeleton__sidebar { + position: relative !important; + z-index: 90; + width: auto; + } +} + +.interface-interface-skeleton__sidebar { + overflow: auto; +} +@media (min-width: 782px) { + .interface-interface-skeleton__sidebar { + border-left: 1px solid #e0e0e0; + } +} + +@media (min-width: 782px) { + .interface-interface-skeleton__secondary-sidebar { + border-right: 1px solid #e0e0e0; + } +} + +.interface-interface-skeleton__header { + flex-shrink: 0; + height: auto; + border-bottom: 1px solid #e0e0e0; + z-index: 30; + color: #1e1e1e; +} + +.interface-interface-skeleton__footer { + height: auto; + flex-shrink: 0; + border-top: 1px solid #e0e0e0; + color: #1e1e1e; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: #fff; + z-index: 90; + display: none; +} +@media (min-width: 782px) { + .interface-interface-skeleton__footer { + display: flex; + } +} +.interface-interface-skeleton__footer .block-editor-block-breadcrumb { + z-index: 30; + display: flex; + background: #fff; + height: 24px; + align-items: center; + font-size: 13px; + padding: 0 18px; +} + +.interface-interface-skeleton__actions { + z-index: 100000; + position: fixed !important; + top: -9999em; + bottom: auto; + left: auto; + right: 0; + width: 280px; + color: #1e1e1e; +} +.interface-interface-skeleton__actions:focus { + top: auto; + bottom: 0; +} + +.interface-more-menu-dropdown { + margin-left: -4px; +} +.interface-more-menu-dropdown .components-button { + width: auto; + padding: 0 2px; +} +@media (min-width: 600px) { + .interface-more-menu-dropdown { + margin-left: 0; + } + .interface-more-menu-dropdown .components-button { + padding: 0 4px; + } +} + +.interface-more-menu-dropdown__content .components-popover__content { + min-width: 280px; +} +@media (min-width: 480px) { + .interface-more-menu-dropdown__content .components-popover__content { + width: auto; + max-width: 480px; + } +} +.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu { + padding: 0; +} + +.components-popover.interface-more-menu-dropdown__content { + z-index: 99998; +} + +.interface-pinned-items { + display: flex; +} +.interface-pinned-items .components-button:not(:first-child) { + display: none; +} +@media (min-width: 600px) { + .interface-pinned-items .components-button:not(:first-child) { + display: flex; + } +} +.interface-pinned-items .components-button { + margin-left: 4px; +} +.interface-pinned-items .components-button svg { + max-width: 24px; + max-height: 24px; +} + +.edit-site-block-editor__editor-styles-wrapper .components-button { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 13px; + padding: 6px 12px; +} +.edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary, .edit-site-block-editor__editor-styles-wrapper .components-button.has-icon { + padding: 6px; +} + +.edit-site-visual-editor { + position: relative; + background-color: #2f2f2f; + align-items: center; +} +.edit-site-visual-editor.is-focus-mode { + padding: 48px; +} +.edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas { + border-radius: 2px; +} + +.edit-site-visual-editor__editor-canvas { + border-radius: 2px 2px 0 0; +} + +.edit-site-visual-editor__back-button { + position: absolute; + top: 8px; + left: 8px; + color: #fff; +} +.edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover { + color: #f0f0f0; +} + +.components-resizable-box__container { + margin: 0 auto; +} + +.resizable-editor__drag-handle { + position: absolute; + top: 0; + bottom: 0; + padding: 0; + margin: auto 0; + width: 8px; + height: 100px; + -webkit-appearance: none; + appearance: none; + cursor: grab; + outline: none; + background: #757575; + border-radius: 4px; + border: 0; +} +.resizable-editor__drag-handle.is-left { + left: -28px; +} +.resizable-editor__drag-handle.is-right { + right: -28px; +} +.resizable-editor__drag-handle:hover { + background: #949494; +} +.resizable-editor__drag-handle:active { + cursor: grabbing; + background: #949494; +} +.resizable-editor__drag-handle:focus { + box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color); +} + +.edit-site-global-styles-preview { + display: flex; + align-items: center; + justify-content: center; + min-height: 152px; + line-height: 1; +} +.edit-site-global-styles-preview .component-color-indicator { + border-radius: 50%; + border: 0; + height: 36px; + width: 36px; + margin-left: 0; + padding: 0; +} + +.edit-site-global-styles-screen-colors { + margin: 16px; +} +.edit-site-global-styles-screen-colors .component-color-indicator { + margin-left: 0; + display: block; + border-radius: 50%; + border: 0; + height: 24px; + width: 24px; + padding: 0; + background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); + background-position: 0 0, 25px 25px; + background-size: calc(2 * 5px) calc(2 * 5px); +} + +.edit-site-global-styles-header__description { + padding: 0 16px; +} + +.edit-site-global-styles-subtitle { + margin-bottom: 0 !important; + text-transform: uppercase; + font-weight: 500; +} + +.edit-site-header { + align-items: center; + background-color: #fff; + display: flex; + height: 60px; + box-sizing: border-box; + width: 100%; + justify-content: space-between; +} +body.is-fullscreen-mode .edit-site-header { + padding-left: 60px; + transition: padding-left 20ms linear; + transition-delay: 80ms; +} +@media (prefers-reduced-motion: reduce) { + body.is-fullscreen-mode .edit-site-header { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-header .edit-site-header_start, +.edit-site-header .edit-site-header_end { + display: flex; +} +.edit-site-header .edit-site-header_center { + display: flex; + align-items: center; + height: 100%; + min-width: 0; +} +.edit-site-header .edit-site-header_end { + justify-content: flex-end; +} + +body.is-navigation-sidebar-open .edit-site-header { + padding-left: 0; + transition: padding-left 20ms linear; + transition-delay: 0ms; +} +@media (prefers-reduced-motion: reduce) { + body.is-navigation-sidebar-open .edit-site-header { + transition-duration: 0s; + transition-delay: 0s; + } +} + +@media (max-width: 959px) { + body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button, +body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) { + display: none; + } + body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button { + margin-right: 0; + } +} +.edit-site-header__toolbar { + display: flex; + align-items: center; + padding-left: 8px; +} +@media (min-width: 600px) { + .edit-site-header__toolbar { + padding-left: 24px; + } +} +@media (min-width: 1280px) { + .edit-site-header__toolbar { + padding-right: 8px; + } +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle { + margin-right: 8px; + min-width: 32px; + width: 32px; + height: 32px; + padding: 0; +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg { + transform: rotate(45deg); +} + +.edit-site-header__toolbar-switchers { + align-items: center; + display: flex; +} + +.edit-site-header__toolbar-switchers-separator { + margin: 0 -6px 0; +} + +/** + * Buttons in the Toolbar + */ +.edit-site-header__actions { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + padding-right: 4px; +} +.edit-site-header__actions .interface-pinned-items { + display: none; +} +@media (min-width: 782px) { + .edit-site-header__actions .interface-pinned-items { + display: inline-flex; + } +} +.edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.components-button { + margin-right: 4px; +} +@media (min-width: 600px) { + .edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.components-button { + margin-right: 12px; + } +} +.edit-site-header__actions .editor-post-saved-state, +.edit-site-header__actions .components-button.is-tertiary { + padding: 0 6px; +} +.edit-site-header__actions .edit-site-more-menu .components-button, +.edit-site-header__actions .interface-pinned-items .components-button { + margin-right: 0; +} +@media (min-width: 600px) { + .edit-site-header__actions { + padding-right: 16px; + } +} + +.edit-site-header__actions-more-menu { + margin-left: -4px; +} +.edit-site-header__actions-more-menu .components-icon-button { + padding: 8px 2px; + width: auto; +} +@media (min-width: 600px) { + .edit-site-header__actions-more-menu { + margin-left: 4px; + } + .edit-site-header__actions-more-menu .components-icon-button { + padding: 8px 4px; + } +} + +.edit-site-document-actions { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown { + display: inline-flex; + margin-left: 4px; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button { + min-width: 0; + padding: 0; +} +.edit-site-document-actions .edit-site-document-actions__title-wrapper > h1 { + margin: 0; + min-width: 0; +} +.edit-site-document-actions .edit-site-document-actions__title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; +} +@media (min-width: 782px) { + .edit-site-document-actions .edit-site-document-actions__title { + max-width: 75px; + } +} +@media (min-width: 1080px) { + .edit-site-document-actions .edit-site-document-actions__title { + max-width: 180px; + } +} +.edit-site-document-actions .edit-site-document-actions__secondary-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 0; + opacity: 0; + padding: 0; + transition: all ease 0.2s; + background: #e0e0e0; + border-radius: 2px; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-document-actions .edit-site-document-actions__secondary-item { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item { + opacity: 1; + padding: 0 4px; + max-width: 180px; + margin-left: 6px; +} + +.edit-site-document-actions__info-dropdown > .components-popover__content > div { + padding: 0; + min-width: 240px; +} + +.edit-site-more-menu { + margin-left: -4px; +} +.edit-site-more-menu .components-button { + width: auto; + padding: 0 2px; +} +@media (min-width: 600px) { + .edit-site-more-menu { + margin-left: 4px; + } + .edit-site-more-menu .components-button { + padding: 0 4px; + } +} + +.edit-site-more-menu__content .components-popover__content { + min-width: 260px; +} +.edit-site-more-menu__content .components-popover__content .components-dropdown-menu__menu { + padding: 0; +} + +.components-popover.edit-site-more-menu__content { + z-index: 99998; +} + +.edit-site-navigation-link { + align-items: center; + background: #1e1e1e; + border-radius: 0; + display: flex; + position: absolute; + top: 0; + left: 0; + z-index: 31; + height: 60px; + width: 60px; +} + +.edit-site-navigation-link__button { + align-items: center; + background: #1e1e1e; + border-radius: 0; + color: #fff; + height: 61px; + width: 60px; + z-index: 1; + margin-bottom: -1px; +} +.edit-site-navigation-link__button.has-icon { + min-width: 60px; +} +.edit-site-navigation-link__button.has-icon:hover, .edit-site-navigation-link__button.has-icon:active, .edit-site-navigation-link__button.has-icon:focus { + color: #fff; +} +.edit-site-navigation-link__button.has-icon:focus { + box-shadow: none; +} +.edit-site-navigation-link__button.has-icon::before { + transition: box-shadow 0.1s ease; + content: ""; + display: block; + position: absolute; + top: 9px; + right: 9px; + bottom: 9px; + left: 9px; + border-radius: 4px; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e; +} +@media (prefers-reduced-motion: reduce) { + .edit-site-navigation-link__button.has-icon::before { + transition-duration: 0s; + transition-delay: 0s; + } +} +.edit-site-navigation-link__button.has-icon:hover::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575; +} +.edit-site-navigation-link__button.has-icon:focus::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} + +.edit-site-navigation-link__site-icon { + width: 36px; + border-radius: 2px; +} + +.edit-site-sidebar { + width: 280px; +} +.edit-site-sidebar > .components-panel { + border-left: 0; + border-right: 0; + margin-bottom: -1px; + margin-top: -1px; +} +.edit-site-sidebar > .components-panel > .components-panel__header { + background: #f0f0f0; +} +.edit-site-sidebar .block-editor-block-inspector__card { + margin: 0; +} + +.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { + margin-left: 0; +} + +.edit-site-global-styles-sidebar__reset-button.components-button { + margin-left: auto; +} + +.edit-site-global-styles-sidebar__border-controls-row { + display: flex; + justify-content: space-between; + margin-bottom: 12px; +} +.edit-site-global-styles-sidebar__border-controls-row > * { + width: calc(50% - 8px); +} +.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons { + margin-bottom: 0; +} + +.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { + font-size: 15.6px; + font-weight: 500; +} + +.edit-site-global-styles-sidebar .components-navigation__item > button span { + font-weight: 500; +} + +.edit-site-typography-panel, +.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { + border: 0; +} + +.edit-site-global-styles-sidebar__blocks-group { + padding-top: 24px; + border-top: 1px solid #e0e0e0; +} + +.edit-site-global-styles-sidebar__blocks-group-help { + padding: 0 16px; +} + +.edit-site-global-styles-color-palette-panel { + padding: 16px; +} + +.edit-site-global-styles-sidebar__beta { + display: inline-flex; + margin-left: 8px; + padding: 0 8px; + height: 24px; + border-radius: 2px; + background-color: #000; + color: #fff; + align-items: center; + font-size: 12px; + line-height: 1; +} + +.components-panel__header.edit-site-sidebar__panel-tabs { + justify-content: flex-start; + padding-left: 0; + padding-right: 16px; + border-top: 0; + margin-top: 0; +} +.components-panel__header.edit-site-sidebar__panel-tabs ul { + display: flex; +} +.components-panel__header.edit-site-sidebar__panel-tabs li { + margin: 0; +} +.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { + display: none; + margin: 0 0 0 auto; + padding: 0; + min-width: 24px; + height: 24px; +} +@media (min-width: 782px) { + .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { + display: flex; + } +} + +.components-button.edit-site-sidebar__panel-tab { + border-radius: 0; + height: 48px; + background: transparent; + border: none; + box-shadow: none; + cursor: pointer; + display: inline-block; + padding: 3px 15px; + margin-left: 0; + font-weight: 500; +} +.components-button.edit-site-sidebar__panel-tab::after { + content: attr(data-label); + display: block; + font-weight: 600; + height: 0; + overflow: hidden; + speak: none; + visibility: hidden; +} +.components-button.edit-site-sidebar__panel-tab.is-active { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); + position: relative; + z-index: 1; +} +.components-button.edit-site-sidebar__panel-tab.is-active::before { + content: ""; + position: absolute; + top: 0; + bottom: 1px; + right: 0; + left: 0; + border-bottom: 4px solid transparent; +} +.components-button.edit-site-sidebar__panel-tab:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + position: relative; + z-index: 1; +} +.components-button.edit-site-sidebar__panel-tab.is-active:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); +} + +.edit-site-template-card { + display: flex; + align-items: flex-start; +} + +.edit-site-template-card__content { + flex-grow: 1; + margin-bottom: 4px; +} + +.edit-site-template-card__title { + font-weight: 500; + line-height: 24px; +} +.edit-site-template-card__title.edit-site-template-card__title { + margin: 0 0 4px; +} + +.edit-site-template-card__description { + font-size: 13px; + margin: 0 0 16px; +} + +.edit-site-template-card__icon { + flex: 0 0 24px; + margin-right: 12px; + width: 24px; + height: 24px; +} + +h3.edit-site-template-card__template-areas-title { + font-weight: 500; + margin: 0 0 8px; +} + +.edit-site-template-card__template-areas-list { + margin: 0; +} +.edit-site-template-card__template-areas-list > li { + margin: 0; +} + +.edit-site-template-card__template-areas-item { + width: 100%; +} +.edit-site-template-card__template-areas-item.components-button.has-icon { + padding: 0; +} + +.edit-site-editor__toggle-save-panel { + z-index: 100000; + position: fixed !important; + top: -9999em; + bottom: auto; + left: auto; + right: 0; + width: 280px; + background-color: #fff; + border: 1px dotted #ddd; + height: auto !important; + padding: 24px; + display: flex; + justify-content: center; +} +.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel { + top: auto; + bottom: 0; +} + +.edit-site-visual-editor { + position: relative; + height: 100%; + display: block; + overflow: hidden; +} +.edit-site-visual-editor iframe { + display: block; + width: 100%; + height: 100%; + background-color: #fff; +} + +.edit-site .components-editor-notices__snackbar { + position: fixed; + right: 0; + bottom: 40px; + padding-left: 16px; + padding-right: 16px; +} + +.edit-site .components-editor-notices__snackbar { + /* Set left position when auto-fold is not on the body element. */ + left: 0; +} +@media (min-width: 783px) { + .edit-site .components-editor-notices__snackbar { + left: 160px; + } +} + +.auto-fold .edit-site .components-editor-notices__snackbar { + /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ +} +@media (min-width: 783px) { + .auto-fold .edit-site .components-editor-notices__snackbar { + left: 36px; + } +} +@media (min-width: 961px) { + .auto-fold .edit-site .components-editor-notices__snackbar { + left: 160px; + } +} + +/* Sidebar manually collapsed. */ +.folded .edit-site .components-editor-notices__snackbar { + left: 0; +} +@media (min-width: 783px) { + .folded .edit-site .components-editor-notices__snackbar { + left: 36px; + } +} + +body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar { + left: 0 !important; +} + +.edit-site-template-details .edit-site-template-details__group { + margin: 0; + padding: 16px; +} +.edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group { + border-top: 1px solid #ccc; +} +.edit-site-template-details .edit-site-template-details__title { + margin: 0; +} +.edit-site-template-details .edit-site-template-details__description { + margin: 12px 0 0; + color: #757575; +} +.edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas { + padding: 8px; +} +.edit-site-template-details .edit-site-template-details__template-areas-item { + position: relative; +} +.edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more { + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: auto 0; +} +.edit-site-template-details .edit-site-template-details__revert { + padding: 12px 8px; +} +.edit-site-template-details .edit-site-template-details__revert-button { + height: auto; + padding: 4px 8px; + text-align: left; +} +.edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button { + display: flex; + justify-content: center; + background: #1e1e1e; + color: #fff; + width: 100%; + height: 44px; + border-radius: 0; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover { + color: #fff; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:active { + color: #ccc; +} +.edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; +} + +.edit-site-template-part-converter__modal { + z-index: 1000001; +} +@media (min-width: 600px) { + .edit-site-template-part-converter__modal .components-modal__frame { + max-width: 500px; + } +} + +.edit-site-template-part-converter__convert-modal-actions { + padding-top: 12px; +} + +.edit-site-template-part-converter__area-base-control .components-base-control__label { + margin: 16px 0 8px; + cursor: auto; +} + +.edit-site-template-part-converter__area-radio-group { + width: 100%; + border: 1px solid #757575; + border-radius: 2px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio { + display: block; + width: 100%; + height: 100%; + text-align: left; + padding: 12px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover { + margin: 0; + background-color: inherit; + border-bottom: 1px solid #757575; + border-radius: 0; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:focus), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:not(:focus), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:not(:focus) { + box-shadow: none; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:focus, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:focus, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:focus { + border-bottom: 1px solid #fff; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:last-of-type, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:last-of-type, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:last-of-type { + border-bottom: none; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover), .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] { + color: #1e1e1e; + cursor: auto; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover) .edit-site-template-part-converter__option-label div, .edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] .edit-site-template-part-converter__option-label div { + color: #949494; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label { + padding-top: 4px; + white-space: normal; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label div { + padding-top: 4px; + font-size: 12px; +} +.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__checkbox { + margin-left: auto; + min-width: 24px; +} + +.edit-site-editor__inserter-panel, +.edit-site-editor__list-view-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-site-editor__list-view-panel { + min-width: 350px; +} + +.edit-site-editor__inserter-panel-header { + padding-top: 8px; + padding-right: 8px; + display: flex; + justify-content: flex-end; +} +@media (min-width: 782px) { + .edit-site-editor__inserter-panel-header { + display: none; + } +} + +.edit-site-editor__inserter-panel-content, +.edit-site-editor__list-view-panel-content { + height: calc(100% - 36px - 8px); +} + +@media (min-width: 782px) { + .edit-site-editor__inserter-panel-content { + height: 100%; + } +} + +.edit-site-editor__list-view-panel-header { + align-items: center; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + height: 48px; + padding-left: 16px; + padding-right: 4px; +} + +.edit-site-editor__list-view-panel-content { + overflow-y: auto; + padding: 8px; +} + +html.wp-toolbar { + background: #fff; +} + +body.appearance_page_gutenberg-edit-site { + background: #fff; + /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. + Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ +} +body.appearance_page_gutenberg-edit-site #wpcontent { + padding-left: 0; +} +body.appearance_page_gutenberg-edit-site #wpbody-content { + padding-bottom: 0; +} +body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta) { + display: none; +} +body.appearance_page_gutenberg-edit-site #wpfooter { + display: none; +} +body.appearance_page_gutenberg-edit-site .a11y-speak-region { + left: -1px; + top: -1px; +} +body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after, +body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after { + border-right-color: #fff; +} +body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type { + width: auto; + max-width: 100%; +} + +.edit-site, +.components-modal__frame { + box-sizing: border-box; +} +.edit-site *, +.edit-site *::before, +.edit-site *::after, +.components-modal__frame *, +.components-modal__frame *::before, +.components-modal__frame *::after { + box-sizing: inherit; +} + +@media (min-width: 600px) { + .edit-site { + bottom: 0; + left: 0; + min-height: calc(100vh - 46px); + position: absolute; + right: 0; + top: 0; + } +} +@media (min-width: 782px) { + .edit-site { + min-height: calc(100vh - 32px); + } +} +.edit-site .interface-complementary-area__pin-unpin-item.components-button { + display: none; +} +.edit-site .interface-interface-skeleton__content { + background-color: #2f2f2f; +} + +/** + * Animations + */ +@keyframes edit-post__fade-in-animation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +body.admin-color-light { + --wp-admin-theme-color: #0085ba; + --wp-admin-theme-color--rgb: 0, 133, 186; + --wp-admin-theme-color-darker-10: #0073a1; + --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; + --wp-admin-theme-color-darker-20: #006187; + --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-light { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-modern { + --wp-admin-theme-color: #3858e9; + --wp-admin-theme-color--rgb: 56, 88, 233; + --wp-admin-theme-color-darker-10: #2145e6; + --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; + --wp-admin-theme-color-darker-20: #183ad6; + --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-modern { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-blue { + --wp-admin-theme-color: #096484; + --wp-admin-theme-color--rgb: 9, 100, 132; + --wp-admin-theme-color-darker-10: #07526c; + --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; + --wp-admin-theme-color-darker-20: #064054; + --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-blue { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-coffee { + --wp-admin-theme-color: #46403c; + --wp-admin-theme-color--rgb: 70, 64, 60; + --wp-admin-theme-color-darker-10: #383330; + --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; + --wp-admin-theme-color-darker-20: #2b2724; + --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-coffee { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-ectoplasm { + --wp-admin-theme-color: #523f6d; + --wp-admin-theme-color--rgb: 82, 63, 109; + --wp-admin-theme-color-darker-10: #46365d; + --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; + --wp-admin-theme-color-darker-20: #3a2c4d; + --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ectoplasm { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-midnight { + --wp-admin-theme-color: #e14d43; + --wp-admin-theme-color--rgb: 225, 77, 67; + --wp-admin-theme-color-darker-10: #dd382d; + --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; + --wp-admin-theme-color-darker-20: #d02c21; + --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-midnight { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-ocean { + --wp-admin-theme-color: #627c83; + --wp-admin-theme-color--rgb: 98, 124, 131; + --wp-admin-theme-color-darker-10: #576e74; + --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; + --wp-admin-theme-color-darker-20: #4c6066; + --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-ocean { + --wp-admin-border-width-focus: 1.5px; + } +} + +body.admin-color-sunrise { + --wp-admin-theme-color: #dd823b; + --wp-admin-theme-color--rgb: 221, 130, 59; + --wp-admin-theme-color-darker-10: #d97426; + --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; + --wp-admin-theme-color-darker-20: #c36922; + --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; + --wp-admin-border-width-focus: 2px; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + body.admin-color-sunrise { + --wp-admin-border-width-focus: 1.5px; + } +} \ No newline at end of file diff --git a/wp-includes/css/dist/edit-site/style.min.css b/wp-includes/css/dist/edit-site/style.min.css new file mode 100644 index 000000000000..02f34957dca0 --- /dev/null +++ b/wp-includes/css/dist/edit-site/style.min.css @@ -0,0 +1 @@ +:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.components-panel__header.interface-complementary-area-header__small{background:#fff;padding-right:4px}.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}@media (min-width:782px){.components-panel__header.interface-complementary-area-header__small{display:none}}.interface-complementary-area-header{background:#fff;padding-right:4px}.interface-complementary-area-header .components-button.has-icon{display:none;margin-left:auto}.interface-complementary-area-header .components-button.has-icon~.components-button{margin-left:0}@media (min-width:782px){.interface-complementary-area-header .components-button.has-icon{display:flex}}@media (min-width:782px){.components-panel__header+.interface-complementary-area-header{margin-top:0}}.interface-complementary-area{background:#fff;color:#1e1e1e}@media (min-width:600px){.interface-complementary-area{-webkit-overflow-scrolling:touch}}@media (min-width:782px){.interface-complementary-area{width:280px}}.interface-complementary-area .components-panel{border:none;position:relative;z-index:0}.interface-complementary-area .components-panel__header{position:sticky;top:0;z-index:1}.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{top:48px}@media (min-width:782px){.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{top:0}}.interface-complementary-area p{margin-top:0}.interface-complementary-area h2{font-size:13px;color:#1e1e1e;margin-bottom:1.5em}.interface-complementary-area h3{font-size:11px;text-transform:uppercase;font-weight:500;color:#1e1e1e;margin-bottom:1.5em}.interface-complementary-area hr{border-top:none;border-bottom:1px solid #f0f0f0;margin:1.5em 0}.interface-complementary-area div.components-toolbar,.interface-complementary-area div.components-toolbar-group{box-shadow:none;margin-bottom:1.5em}.interface-complementary-area div.components-toolbar-group:last-child,.interface-complementary-area div.components-toolbar:last-child{margin-bottom:0}.interface-complementary-area .block-editor-skip-to-selected-block:focus{top:auto;right:10px;bottom:10px;left:auto}@media (min-width:782px){body.js.is-fullscreen-mode{margin-top:-32px;height:calc(100% + 32px)}body.js.is-fullscreen-mode #adminmenumain,body.js.is-fullscreen-mode #wpadminbar{display:none}body.js.is-fullscreen-mode #wpcontent,body.js.is-fullscreen-mode #wpfooter{margin-left:0}}html.interface-interface-skeleton__html-container{position:fixed;width:100%}@media (min-width:782px){html.interface-interface-skeleton__html-container{position:static;width:auto}}.interface-interface-skeleton{display:flex;flex-direction:row;height:auto;max-height:100%;position:fixed;top:46px;right:0;bottom:0}@media (min-width:783px){.interface-interface-skeleton{top:32px}.is-fullscreen-mode .interface-interface-skeleton{top:0}}.interface-interface-skeleton__editor{display:flex;flex-direction:column;flex:0 1 100%;overflow:hidden}.interface-interface-skeleton{left:0}@media (min-width:783px){.interface-interface-skeleton{left:160px}}@media (min-width:783px){.auto-fold .interface-interface-skeleton{left:36px}}@media (min-width:961px){.auto-fold .interface-interface-skeleton{left:160px}}.folded .interface-interface-skeleton{left:0}@media (min-width:783px){.folded .interface-interface-skeleton{left:36px}}body.is-fullscreen-mode .interface-interface-skeleton{left:0!important}.interface-interface-skeleton__body{flex-grow:1;display:flex;overflow:auto;overscroll-behavior-y:none}@media (min-width:782px){.has-footer .interface-interface-skeleton__body{padding-bottom:25px}}.interface-interface-skeleton__content{flex-grow:1;display:flex;flex-direction:column;overflow:auto;z-index:20}.interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{display:block;flex-shrink:0;position:absolute;z-index:100000;top:0;right:0;bottom:0;left:0;background:#fff;color:#1e1e1e}@media (min-width:782px){.interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{position:relative!important;z-index:90;width:auto}}.interface-interface-skeleton__sidebar{overflow:auto}@media (min-width:782px){.interface-interface-skeleton__sidebar{border-left:1px solid #e0e0e0}}@media (min-width:782px){.interface-interface-skeleton__secondary-sidebar{border-right:1px solid #e0e0e0}}.interface-interface-skeleton__header{flex-shrink:0;height:auto;border-bottom:1px solid #e0e0e0;z-index:30;color:#1e1e1e}.interface-interface-skeleton__footer{height:auto;flex-shrink:0;border-top:1px solid #e0e0e0;color:#1e1e1e;position:absolute;bottom:0;left:0;width:100%;background-color:#fff;z-index:90;display:none}@media (min-width:782px){.interface-interface-skeleton__footer{display:flex}}.interface-interface-skeleton__footer .block-editor-block-breadcrumb{z-index:30;display:flex;background:#fff;height:24px;align-items:center;font-size:13px;padding:0 18px}.interface-interface-skeleton__actions{z-index:100000;position:fixed!important;top:-9999em;bottom:auto;left:auto;right:0;width:280px;color:#1e1e1e}.interface-interface-skeleton__actions:focus{top:auto;bottom:0}.interface-more-menu-dropdown{margin-left:-4px}.interface-more-menu-dropdown .components-button{width:auto;padding:0 2px}@media (min-width:600px){.interface-more-menu-dropdown{margin-left:0}.interface-more-menu-dropdown .components-button{padding:0 4px}}.interface-more-menu-dropdown__content .components-popover__content{min-width:280px}@media (min-width:480px){.interface-more-menu-dropdown__content .components-popover__content{width:auto;max-width:480px}}.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu{padding:0}.components-popover.interface-more-menu-dropdown__content{z-index:99998}.interface-pinned-items{display:flex}.interface-pinned-items .components-button:not(:first-child){display:none}@media (min-width:600px){.interface-pinned-items .components-button:not(:first-child){display:flex}}.interface-pinned-items .components-button{margin-left:4px}.interface-pinned-items .components-button svg{max-width:24px;max-height:24px}.edit-site-block-editor__editor-styles-wrapper .components-button{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;padding:6px 12px}.edit-site-block-editor__editor-styles-wrapper .components-button.has-icon,.edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary{padding:6px}.edit-site-visual-editor{background-color:#2f2f2f;align-items:center}.edit-site-visual-editor.is-focus-mode{padding:48px}.edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas{border-radius:2px}.edit-site-visual-editor__editor-canvas{border-radius:2px 2px 0 0}.edit-site-visual-editor__back-button{position:absolute;top:8px;left:8px;color:#fff}.edit-site-visual-editor__back-button:active:not([aria-disabled=true]),.edit-site-visual-editor__back-button:focus:not([aria-disabled=true]),.edit-site-visual-editor__back-button:hover{color:#f0f0f0}.components-resizable-box__container{margin:0 auto}.resizable-editor__drag-handle{position:absolute;top:0;bottom:0;padding:0;margin:auto 0;width:8px;height:100px;-webkit-appearance:none;appearance:none;cursor:grab;outline:none;background:#757575;border-radius:4px;border:0}.resizable-editor__drag-handle.is-left{left:-28px}.resizable-editor__drag-handle.is-right{right:-28px}.resizable-editor__drag-handle:hover{background:#949494}.resizable-editor__drag-handle:active{cursor:grabbing;background:#949494}.resizable-editor__drag-handle:focus{box-shadow:0 0 0 1px #2f2f2f,0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color)}.edit-site-global-styles-preview{display:flex;align-items:center;justify-content:center;min-height:152px;line-height:1}.edit-site-global-styles-preview .component-color-indicator{border-radius:50%;border:0;height:36px;width:36px;margin-left:0;padding:0}.edit-site-global-styles-screen-colors{margin:16px}.edit-site-global-styles-screen-colors .component-color-indicator{margin-left:0;display:block;border-radius:50%;border:0;height:24px;width:24px;padding:0;background-image:repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0),repeating-linear-gradient(45deg,#e0e0e0 25%,transparent 0,transparent 75%,#e0e0e0 0,#e0e0e0);background-position:0 0,25px 25px;background-size:10px 10px}.edit-site-global-styles-header__description{padding:0 16px}.edit-site-global-styles-subtitle{margin-bottom:0!important;text-transform:uppercase;font-weight:500}.edit-site-header{align-items:center;background-color:#fff;display:flex;height:60px;box-sizing:border-box;width:100%;justify-content:space-between}body.is-fullscreen-mode .edit-site-header{padding-left:60px;transition:padding-left 20ms linear;transition-delay:80ms}@media (prefers-reduced-motion:reduce){body.is-fullscreen-mode .edit-site-header{transition-duration:0s;transition-delay:0s}}.edit-site-header .edit-site-header_end,.edit-site-header .edit-site-header_start{display:flex}.edit-site-header .edit-site-header_center{display:flex;align-items:center;height:100%;min-width:0}.edit-site-header .edit-site-header_end{justify-content:flex-end}body.is-navigation-sidebar-open .edit-site-header{padding-left:0;transition:padding-left 20ms linear;transition-delay:0ms}@media (prefers-reduced-motion:reduce){body.is-navigation-sidebar-open .edit-site-header{transition-duration:0s;transition-delay:0s}}@media (max-width:959px){body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle~.components-button,body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary){display:none}body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button{margin-right:0}}.edit-site-header__toolbar{display:flex;align-items:center;padding-left:8px}@media (min-width:600px){.edit-site-header__toolbar{padding-left:24px}}@media (min-width:1280px){.edit-site-header__toolbar{padding-right:8px}}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle{margin-right:8px;min-width:32px;width:32px;height:32px;padding:0}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg{transition:transform .2s cubic-bezier(.165,.84,.44,1)}@media (prefers-reduced-motion:reduce){.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg{transition-duration:0s;transition-delay:0s}}.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg{transform:rotate(45deg)}.edit-site-header__toolbar-switchers{align-items:center;display:flex}.edit-site-header__toolbar-switchers-separator{margin:0 -6px}.edit-site-header__actions{display:inline-flex;align-items:center;flex-wrap:wrap;padding-right:4px}.edit-site-header__actions .interface-pinned-items{display:none}@media (min-width:782px){.edit-site-header__actions .interface-pinned-items{display:inline-flex}}.edit-site-header__actions .components-button.components-button,.edit-site-header__actions .editor-post-saved-state{margin-right:4px}@media (min-width:600px){.edit-site-header__actions .components-button.components-button,.edit-site-header__actions .editor-post-saved-state{margin-right:12px}}.edit-site-header__actions .components-button.is-tertiary,.edit-site-header__actions .editor-post-saved-state{padding:0 6px}.edit-site-header__actions .edit-site-more-menu .components-button,.edit-site-header__actions .interface-pinned-items .components-button{margin-right:0}@media (min-width:600px){.edit-site-header__actions{padding-right:16px}}.edit-site-header__actions-more-menu{margin-left:-4px}.edit-site-header__actions-more-menu .components-icon-button{padding:8px 2px;width:auto}@media (min-width:600px){.edit-site-header__actions-more-menu{margin-left:4px}.edit-site-header__actions-more-menu .components-icon-button{padding:8px 4px}}.edit-site-document-actions{display:flex;flex-direction:column;justify-content:center;height:100%;min-width:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;min-width:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown{display:inline-flex;margin-left:4px}.edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button{min-width:0;padding:0}.edit-site-document-actions .edit-site-document-actions__title-wrapper>h1{margin:0;min-width:0}.edit-site-document-actions .edit-site-document-actions__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}@media (min-width:782px){.edit-site-document-actions .edit-site-document-actions__title{max-width:75px}}@media (min-width:1080px){.edit-site-document-actions .edit-site-document-actions__title{max-width:180px}}.edit-site-document-actions .edit-site-document-actions__secondary-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;opacity:0;padding:0;transition:all .2s ease;background:#e0e0e0;border-radius:2px}@media (prefers-reduced-motion:reduce){.edit-site-document-actions .edit-site-document-actions__secondary-item{transition-duration:0s;transition-delay:0s}}.edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item{opacity:1;padding:0 4px;max-width:180px;margin-left:6px}.edit-site-document-actions__info-dropdown>.components-popover__content>div{padding:0;min-width:240px}.edit-site-more-menu{margin-left:-4px}.edit-site-more-menu .components-button{width:auto;padding:0 2px}@media (min-width:600px){.edit-site-more-menu{margin-left:4px}.edit-site-more-menu .components-button{padding:0 4px}}.edit-site-more-menu__content .components-popover__content{min-width:260px}.edit-site-more-menu__content .components-popover__content .components-dropdown-menu__menu{padding:0}.components-popover.edit-site-more-menu__content{z-index:99998}.edit-site-navigation-link{display:flex;position:absolute;top:0;left:0;z-index:31;height:60px}.edit-site-navigation-link,.edit-site-navigation-link__button{align-items:center;background:#1e1e1e;border-radius:0;width:60px}.edit-site-navigation-link__button{color:#fff;height:61px;z-index:1;margin-bottom:-1px}.edit-site-navigation-link__button.has-icon{min-width:60px}.edit-site-navigation-link__button.has-icon:active,.edit-site-navigation-link__button.has-icon:focus,.edit-site-navigation-link__button.has-icon:hover{color:#fff}.edit-site-navigation-link__button.has-icon:focus{box-shadow:none}.edit-site-navigation-link__button.has-icon:before{transition:box-shadow .1s ease;content:"";display:block;position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:4px;box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e}@media (prefers-reduced-motion:reduce){.edit-site-navigation-link__button.has-icon:before{transition-duration:0s;transition-delay:0s}}.edit-site-navigation-link__button.has-icon:hover:before{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #757575}.edit-site-navigation-link__button.has-icon:focus:before{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) hsla(0,0%,100%,.1),inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color)}.edit-site-navigation-link__site-icon{width:36px;border-radius:2px}.edit-site-sidebar{width:280px}.edit-site-sidebar>.components-panel{border-left:0;border-right:0;margin-bottom:-1px;margin-top:-1px}.edit-site-sidebar>.components-panel>.components-panel__header{background:#f0f0f0}.edit-site-sidebar .block-editor-block-inspector__card{margin:0}.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon{margin-left:0}.edit-site-global-styles-sidebar__reset-button.components-button{margin-left:auto}.edit-site-global-styles-sidebar__border-controls-row{display:flex;justify-content:space-between;margin-bottom:12px}.edit-site-global-styles-sidebar__border-controls-row>*{width:calc(50% - 8px)}.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons{margin-bottom:0}.edit-site-global-styles-sidebar .components-navigation__menu-title-heading{font-size:15.6px;font-weight:500}.edit-site-global-styles-sidebar .components-navigation__item>button span{font-weight:500}.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings,.edit-site-typography-panel{border:0}.edit-site-global-styles-sidebar__blocks-group{padding-top:24px;border-top:1px solid #e0e0e0}.edit-site-global-styles-sidebar__blocks-group-help{padding:0 16px}.edit-site-global-styles-color-palette-panel{padding:16px}.edit-site-global-styles-sidebar__beta{display:inline-flex;margin-left:8px;padding:0 8px;height:24px;border-radius:2px;background-color:#000;color:#fff;align-items:center;font-size:12px;line-height:1}.components-panel__header.edit-site-sidebar__panel-tabs{justify-content:flex-start;padding-left:0;padding-right:16px;border-top:0;margin-top:0}.components-panel__header.edit-site-sidebar__panel-tabs ul{display:flex}.components-panel__header.edit-site-sidebar__panel-tabs li{margin:0}.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon{display:none;margin:0 0 0 auto;padding:0;min-width:24px;height:24px}@media (min-width:782px){.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon{display:flex}}.components-button.edit-site-sidebar__panel-tab{border-radius:0;height:48px;background:transparent;border:none;box-shadow:none;cursor:pointer;display:inline-block;padding:3px 15px;margin-left:0;font-weight:500}.components-button.edit-site-sidebar__panel-tab:after{content:attr(data-label);display:block;font-weight:600;height:0;overflow:hidden;speak:none;visibility:hidden}.components-button.edit-site-sidebar__panel-tab.is-active{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) transparent,inset 0 -4px 0 0 var(--wp-admin-theme-color);position:relative;z-index:1}.components-button.edit-site-sidebar__panel-tab.is-active:before{content:"";position:absolute;top:0;bottom:1px;right:0;left:0;border-bottom:4px solid transparent}.components-button.edit-site-sidebar__panel-tab:focus{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);position:relative;z-index:1}.components-button.edit-site-sidebar__panel-tab.is-active:focus{box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 -4px 0 0 var(--wp-admin-theme-color)}.edit-site-template-card{display:flex;align-items:flex-start}.edit-site-template-card__content{flex-grow:1;margin-bottom:4px}.edit-site-template-card__title{font-weight:500;line-height:24px}.edit-site-template-card__title.edit-site-template-card__title{margin:0 0 4px}.edit-site-template-card__description{font-size:13px;margin:0 0 16px}.edit-site-template-card__icon{flex:0 0 24px;margin-right:12px;width:24px;height:24px}h3.edit-site-template-card__template-areas-title{font-weight:500;margin:0 0 8px}.edit-site-template-card__template-areas-list,.edit-site-template-card__template-areas-list>li{margin:0}.edit-site-template-card__template-areas-item{width:100%}.edit-site-template-card__template-areas-item.components-button.has-icon{padding:0}.edit-site-editor__toggle-save-panel{z-index:100000;position:fixed!important;top:-9999em;bottom:auto;left:auto;right:0;width:280px;background-color:#fff;border:1px dotted #ddd;height:auto!important;padding:24px;display:flex;justify-content:center}.interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel,.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel{top:auto;bottom:0}.edit-site-visual-editor{position:relative;height:100%;display:block;overflow:hidden}.edit-site-visual-editor iframe{display:block;width:100%;height:100%;background-color:#fff}.edit-site .components-editor-notices__snackbar{position:fixed;right:0;bottom:40px;padding-left:16px;padding-right:16px;left:0}@media (min-width:783px){.edit-site .components-editor-notices__snackbar{left:160px}}@media (min-width:783px){.auto-fold .edit-site .components-editor-notices__snackbar{left:36px}}@media (min-width:961px){.auto-fold .edit-site .components-editor-notices__snackbar{left:160px}}.folded .edit-site .components-editor-notices__snackbar{left:0}@media (min-width:783px){.folded .edit-site .components-editor-notices__snackbar{left:36px}}body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar{left:0!important}.edit-site-template-details .edit-site-template-details__group{margin:0;padding:16px}.edit-site-template-details .edit-site-template-details__group+.edit-site-template-details__group{border-top:1px solid #ccc}.edit-site-template-details .edit-site-template-details__title{margin:0}.edit-site-template-details .edit-site-template-details__description{margin:12px 0 0;color:#757575}.edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas{padding:8px}.edit-site-template-details .edit-site-template-details__template-areas-item{position:relative}.edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more{position:absolute;right:0;top:0;bottom:0;margin:auto 0}.edit-site-template-details .edit-site-template-details__revert{padding:12px 8px}.edit-site-template-details .edit-site-template-details__revert-button{height:auto;padding:4px 8px;text-align:left}.edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 0 0 3px #fff}.edit-site-template-details .edit-site-template-details__show-all-button.components-button{display:flex;justify-content:center;background:#1e1e1e;color:#fff;width:100%;height:44px;border-radius:0}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover{color:#fff}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:active{color:#ccc}.edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),inset 0 0 0 3px #fff}.edit-site-template-part-converter__modal{z-index:1000001}@media (min-width:600px){.edit-site-template-part-converter__modal .components-modal__frame{max-width:500px}}.edit-site-template-part-converter__convert-modal-actions{padding-top:12px}.edit-site-template-part-converter__area-base-control .components-base-control__label{margin:16px 0 8px;cursor:auto}.edit-site-template-part-converter__area-radio-group{width:100%;border:1px solid #757575;border-radius:2px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio{display:block;width:100%;height:100%;text-align:left;padding:12px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover{margin:0;background-color:inherit;border-bottom:1px solid #757575;border-radius:0}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:not(:focus),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:not(:focus),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:focus){box-shadow:none}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:focus,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:focus,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:focus{border-bottom:1px solid #fff}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-primary:hover:last-of-type,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio.is-secondary:hover:last-of-type,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:last-of-type{border-bottom:none}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover),.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true]{color:#1e1e1e;cursor:auto}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio:not(:hover) .edit-site-template-part-converter__option-label div,.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio[aria-checked=true] .edit-site-template-part-converter__option-label div{color:#949494}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label{padding-top:4px;white-space:normal}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__option-label div{padding-top:4px;font-size:12px}.edit-site-template-part-converter__area-radio-group .components-button.edit-site-template-part-converter__area-radio .edit-site-template-part-converter__checkbox{margin-left:auto;min-width:24px}.edit-site-editor__inserter-panel,.edit-site-editor__list-view-panel{height:100%;display:flex;flex-direction:column}.edit-site-editor__list-view-panel{min-width:350px}.edit-site-editor__inserter-panel-header{padding-top:8px;padding-right:8px;display:flex;justify-content:flex-end}@media (min-width:782px){.edit-site-editor__inserter-panel-header{display:none}}.edit-site-editor__inserter-panel-content,.edit-site-editor__list-view-panel-content{height:calc(100% - 44px)}@media (min-width:782px){.edit-site-editor__inserter-panel-content{height:100%}}.edit-site-editor__list-view-panel-header{align-items:center;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;height:48px;padding-left:16px;padding-right:4px}.edit-site-editor__list-view-panel-content{overflow-y:auto;padding:8px}body.appearance_page_gutenberg-edit-site,html.wp-toolbar{background:#fff}body.appearance_page_gutenberg-edit-site #wpcontent{padding-left:0}body.appearance_page_gutenberg-edit-site #wpbody-content{padding-bottom:0}body.appearance_page_gutenberg-edit-site #wpbody-content>div:not(.edit-site):not(#screen-meta),body.appearance_page_gutenberg-edit-site #wpfooter{display:none}body.appearance_page_gutenberg-edit-site .a11y-speak-region{left:-1px;top:-1px}body.appearance_page_gutenberg-edit-site ul#adminmenu>li.current>a.current:after,body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu:after{border-right-color:#fff}body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type{width:auto;max-width:100%}.components-modal__frame,.edit-site{box-sizing:border-box}.components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before,.edit-site *,.edit-site :after,.edit-site :before{box-sizing:inherit}@media (min-width:600px){.edit-site{bottom:0;left:0;min-height:calc(100vh - 46px);position:absolute;right:0;top:0}}@media (min-width:782px){.edit-site{min-height:calc(100vh - 32px)}}.edit-site .interface-complementary-area__pin-unpin-item.components-button{display:none}.edit-site .interface-interface-skeleton__content{background-color:#2f2f2f}@keyframes edit-post__fade-in-animation{0%{opacity:0}to{opacity:1}}body.admin-color-light{--wp-admin-theme-color:#0085ba;--wp-admin-theme-color--rgb:0,133,186;--wp-admin-theme-color-darker-10:#0073a1;--wp-admin-theme-color-darker-10--rgb:0,115,161;--wp-admin-theme-color-darker-20:#006187;--wp-admin-theme-color-darker-20--rgb:0,97,135;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-light{--wp-admin-border-width-focus:1.5px}}body.admin-color-modern{--wp-admin-theme-color:#3858e9;--wp-admin-theme-color--rgb:56,88,233;--wp-admin-theme-color-darker-10:#2145e6;--wp-admin-theme-color-darker-10--rgb:33,69,230;--wp-admin-theme-color-darker-20:#183ad6;--wp-admin-theme-color-darker-20--rgb:24,58,214;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-modern{--wp-admin-border-width-focus:1.5px}}body.admin-color-blue{--wp-admin-theme-color:#096484;--wp-admin-theme-color--rgb:9,100,132;--wp-admin-theme-color-darker-10:#07526c;--wp-admin-theme-color-darker-10--rgb:7,82,108;--wp-admin-theme-color-darker-20:#064054;--wp-admin-theme-color-darker-20--rgb:6,64,84;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-blue{--wp-admin-border-width-focus:1.5px}}body.admin-color-coffee{--wp-admin-theme-color:#46403c;--wp-admin-theme-color--rgb:70,64,60;--wp-admin-theme-color-darker-10:#383330;--wp-admin-theme-color-darker-10--rgb:56,51,48;--wp-admin-theme-color-darker-20:#2b2724;--wp-admin-theme-color-darker-20--rgb:43,39,36;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-coffee{--wp-admin-border-width-focus:1.5px}}body.admin-color-ectoplasm{--wp-admin-theme-color:#523f6d;--wp-admin-theme-color--rgb:82,63,109;--wp-admin-theme-color-darker-10:#46365d;--wp-admin-theme-color-darker-10--rgb:70,54,93;--wp-admin-theme-color-darker-20:#3a2c4d;--wp-admin-theme-color-darker-20--rgb:58,44,77;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-ectoplasm{--wp-admin-border-width-focus:1.5px}}body.admin-color-midnight{--wp-admin-theme-color:#e14d43;--wp-admin-theme-color--rgb:225,77,67;--wp-admin-theme-color-darker-10:#dd382d;--wp-admin-theme-color-darker-10--rgb:221,56,45;--wp-admin-theme-color-darker-20:#d02c21;--wp-admin-theme-color-darker-20--rgb:208,44,33;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-midnight{--wp-admin-border-width-focus:1.5px}}body.admin-color-ocean{--wp-admin-theme-color:#627c83;--wp-admin-theme-color--rgb:98,124,131;--wp-admin-theme-color-darker-10:#576e74;--wp-admin-theme-color-darker-10--rgb:87,110,116;--wp-admin-theme-color-darker-20:#4c6066;--wp-admin-theme-color-darker-20--rgb:76,96,102;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-ocean{--wp-admin-border-width-focus:1.5px}}body.admin-color-sunrise{--wp-admin-theme-color:#dd823b;--wp-admin-theme-color--rgb:221,130,59;--wp-admin-theme-color-darker-10:#d97426;--wp-admin-theme-color-darker-10--rgb:217,116,38;--wp-admin-theme-color-darker-20:#c36922;--wp-admin-theme-color-darker-20--rgb:195,105,34;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){body.admin-color-sunrise{--wp-admin-border-width-focus:1.5px}} \ No newline at end of file diff --git a/wp-includes/default-filters.php b/wp-includes/default-filters.php index 5783d5cd0f33..d67a43263773 100644 --- a/wp-includes/default-filters.php +++ b/wp-includes/default-filters.php @@ -581,6 +581,7 @@ add_action( 'admin_footer-post.php', 'wp_add_iframed_editor_assets_html' ); add_action( 'admin_footer-post-new.php', 'wp_add_iframed_editor_assets_html' ); +add_action( 'admin_footer-widgets.php', 'wp_add_iframed_editor_assets_html' ); // Taxonomy. add_action( 'init', 'create_initial_taxonomies', 0 ); // Highest priority. diff --git a/wp-includes/js/dist/edit-site.js b/wp-includes/js/dist/edit-site.js new file mode 100644 index 000000000000..3e605ef86f3b --- /dev/null +++ b/wp-includes/js/dist/edit-site.js @@ -0,0 +1,8982 @@ +this["wp"] = this["wp"] || {}; this["wp"]["editSite"] = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "IqXm"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "1ZqX": +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["data"]; }()); + +/***/ }), + +/***/ "1iEr": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("GRId"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Tqx9"); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__); + + +/** + * WordPress dependencies + */ + +const chevronRight = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["Path"], { + d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" +})); +/* harmony default export */ __webpack_exports__["a"] = (chevronRight); + + +/***/ }), + +/***/ "2gm7": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("GRId"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Tqx9"); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__); + + +/** + * WordPress dependencies + */ + +const chevronLeft = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["Path"], { + d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" +})); +/* harmony default export */ __webpack_exports__["a"] = (chevronLeft); + + +/***/ }), + +/***/ "51Zz": +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["dataControls"]; }()); + +/***/ }), + +/***/ "6aBm": +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["mediaUtils"]; }()); + +/***/ }), + +/***/ "B9Az": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; + +// EXTERNAL MODULE: external ["wp","element"] +var external_wp_element_ = __webpack_require__("GRId"); + +// EXTERNAL MODULE: external ["wp","primitives"] +var external_wp_primitives_ = __webpack_require__("Tqx9"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/pencil.js + + +/** + * WordPress dependencies + */ + +const pencil = Object(external_wp_element_["createElement"])(external_wp_primitives_["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(external_wp_element_["createElement"])(external_wp_primitives_["Path"], { + d: "M20.1 5.1L16.9 2 6.2 12.7l-1.3 4.4 4.5-1.3L20.1 5.1zM4 20.8h8v-1.5H4v1.5z" +})); +/* harmony default export */ var library_pencil = (pencil); + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/edit.js +/** + * Internal dependencies + */ + +/* harmony default export */ var edit = __webpack_exports__["a"] = (library_pencil); + + +/***/ }), + +/***/ "Cg8A": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("GRId"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Tqx9"); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__); + + +/** + * WordPress dependencies + */ + +const cog = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["Path"], { + fillRule: "evenodd", + d: "M10.289 4.836A1 1 0 0111.275 4h1.306a1 1 0 01.987.836l.244 1.466c.787.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 011.216.437l.653 1.13a1 1 0 01-.23 1.273l-1.148.944a6.025 6.025 0 010 2.435l1.149.946a1 1 0 01.23 1.272l-.653 1.13a1 1 0 01-1.216.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 01-.987.836h-1.306a1 1 0 01-.986-.836l-.244-1.466a5.995 5.995 0 01-2.108-1.218l-1.394.522a1 1 0 01-1.217-.436l-.653-1.131a1 1 0 01.23-1.272l1.149-.946a6.026 6.026 0 010-2.435l-1.148-.944a1 1 0 01-.23-1.272l.653-1.131a1 1 0 011.217-.437l1.393.522a5.994 5.994 0 012.108-1.218l.244-1.466zM14.929 12a3 3 0 11-6 0 3 3 0 016 0z", + clipRule: "evenodd" +})); +/* harmony default export */ __webpack_exports__["a"] = (cog); + + +/***/ }), + +/***/ "Civd": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("GRId"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Tqx9"); +/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__); + + +/** + * WordPress dependencies + */ + +const layout = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__["Path"], { + d: "M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z" +})); +/* harmony default export */ __webpack_exports__["a"] = (layout); + + +/***/ }), + +/***/ "GRId": +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["element"]; }()); + +/***/ }), + +/***/ "HSyU": +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["blocks"]; }()); + +/***/ }), + +/***/ "IqXm": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +// ESM COMPAT FLAG +__webpack_require__.r(__webpack_exports__); + +// EXPORTS +__webpack_require__.d(__webpack_exports__, "reinitializeEditor", function() { return /* binding */ reinitializeEditor; }); +__webpack_require__.d(__webpack_exports__, "initialize", function() { return /* binding */ initialize; }); +__webpack_require__.d(__webpack_exports__, "__experimentalMainDashboardButton", function() { return /* reexport */ main_dashboard_button; }); +__webpack_require__.d(__webpack_exports__, "__experimentalNavigationToggle", function() { return /* reexport */ navigation_toggle; }); +__webpack_require__.d(__webpack_exports__, "PluginSidebar", function() { return /* reexport */ PluginSidebarEditSite; }); +__webpack_require__.d(__webpack_exports__, "PluginSidebarMoreMenuItem", function() { return /* reexport */ PluginSidebarMoreMenuItem; }); +__webpack_require__.d(__webpack_exports__, "PluginMoreMenuItem", function() { return /* reexport */ plugin_more_menu_item; }); + +// NAMESPACE OBJECT: ./node_modules/@wordpress/edit-site/build-module/store/actions.js +var actions_namespaceObject = {}; +__webpack_require__.r(actions_namespaceObject); +__webpack_require__.d(actions_namespaceObject, "toggleFeature", function() { return actions_toggleFeature; }); +__webpack_require__.d(actions_namespaceObject, "__experimentalSetPreviewDeviceType", function() { return __experimentalSetPreviewDeviceType; }); +__webpack_require__.d(actions_namespaceObject, "setTemplate", function() { return actions_setTemplate; }); +__webpack_require__.d(actions_namespaceObject, "addTemplate", function() { return addTemplate; }); +__webpack_require__.d(actions_namespaceObject, "removeTemplate", function() { return removeTemplate; }); +__webpack_require__.d(actions_namespaceObject, "setTemplatePart", function() { return actions_setTemplatePart; }); +__webpack_require__.d(actions_namespaceObject, "pushTemplatePart", function() { return actions_pushTemplatePart; }); +__webpack_require__.d(actions_namespaceObject, "setHomeTemplateId", function() { return setHomeTemplateId; }); +__webpack_require__.d(actions_namespaceObject, "setPage", function() { return actions_setPage; }); +__webpack_require__.d(actions_namespaceObject, "goBack", function() { return actions_goBack; }); +__webpack_require__.d(actions_namespaceObject, "showHomepage", function() { return actions_showHomepage; }); +__webpack_require__.d(actions_namespaceObject, "setNavigationPanelActiveMenu", function() { return setNavigationPanelActiveMenu; }); +__webpack_require__.d(actions_namespaceObject, "openNavigationPanelToMenu", function() { return actions_openNavigationPanelToMenu; }); +__webpack_require__.d(actions_namespaceObject, "setIsNavigationPanelOpened", function() { return actions_setIsNavigationPanelOpened; }); +__webpack_require__.d(actions_namespaceObject, "setIsInserterOpened", function() { return actions_setIsInserterOpened; }); +__webpack_require__.d(actions_namespaceObject, "updateSettings", function() { return actions_updateSettings; }); +__webpack_require__.d(actions_namespaceObject, "setIsListViewOpened", function() { return actions_setIsListViewOpened; }); +__webpack_require__.d(actions_namespaceObject, "revertTemplate", function() { return actions_revertTemplate; }); +__webpack_require__.d(actions_namespaceObject, "openGeneralSidebar", function() { return openGeneralSidebar; }); +__webpack_require__.d(actions_namespaceObject, "closeGeneralSidebar", function() { return closeGeneralSidebar; }); + +// NAMESPACE OBJECT: ./node_modules/@wordpress/edit-site/build-module/store/selectors.js +var selectors_namespaceObject = {}; +__webpack_require__.r(selectors_namespaceObject); +__webpack_require__.d(selectors_namespaceObject, "isFeatureActive", function() { return isFeatureActive; }); +__webpack_require__.d(selectors_namespaceObject, "__experimentalGetPreviewDeviceType", function() { return selectors_experimentalGetPreviewDeviceType; }); +__webpack_require__.d(selectors_namespaceObject, "getCanUserCreateMedia", function() { return getCanUserCreateMedia; }); +__webpack_require__.d(selectors_namespaceObject, "getSettings", function() { return selectors_getSettings; }); +__webpack_require__.d(selectors_namespaceObject, "getHomeTemplateId", function() { return getHomeTemplateId; }); +__webpack_require__.d(selectors_namespaceObject, "getEditedPostType", function() { return selectors_getEditedPostType; }); +__webpack_require__.d(selectors_namespaceObject, "getEditedPostId", function() { return selectors_getEditedPostId; }); +__webpack_require__.d(selectors_namespaceObject, "getPreviousEditedPostType", function() { return getPreviousEditedPostType; }); +__webpack_require__.d(selectors_namespaceObject, "getPreviousEditedPostId", function() { return selectors_getPreviousEditedPostId; }); +__webpack_require__.d(selectors_namespaceObject, "getPage", function() { return selectors_getPage; }); +__webpack_require__.d(selectors_namespaceObject, "getNavigationPanelActiveMenu", function() { return getNavigationPanelActiveMenu; }); +__webpack_require__.d(selectors_namespaceObject, "getCurrentTemplateNavigationPanelSubMenu", function() { return selectors_getCurrentTemplateNavigationPanelSubMenu; }); +__webpack_require__.d(selectors_namespaceObject, "isNavigationOpened", function() { return selectors_isNavigationOpened; }); +__webpack_require__.d(selectors_namespaceObject, "isInserterOpened", function() { return selectors_isInserterOpened; }); +__webpack_require__.d(selectors_namespaceObject, "__experimentalGetInsertionPoint", function() { return __experimentalGetInsertionPoint; }); +__webpack_require__.d(selectors_namespaceObject, "isListViewOpened", function() { return selectors_isListViewOpened; }); +__webpack_require__.d(selectors_namespaceObject, "getCurrentTemplateTemplateParts", function() { return getCurrentTemplateTemplateParts; }); + +// EXTERNAL MODULE: external ["wp","element"] +var external_wp_element_ = __webpack_require__("GRId"); + +// EXTERNAL MODULE: external ["wp","blocks"] +var external_wp_blocks_ = __webpack_require__("HSyU"); + +// EXTERNAL MODULE: external ["wp","blockLibrary"] +var external_wp_blockLibrary_ = __webpack_require__("QyPg"); + +// EXTERNAL MODULE: external ["wp","data"] +var external_wp_data_ = __webpack_require__("1ZqX"); + +// EXTERNAL MODULE: external ["wp","coreData"] +var external_wp_coreData_ = __webpack_require__("jZUy"); + +// EXTERNAL MODULE: ./node_modules/downloadjs/download.js +var download = __webpack_require__("rrFr"); +var download_default = /*#__PURE__*/__webpack_require__.n(download); + +// EXTERNAL MODULE: external ["wp","components"] +var external_wp_components_ = __webpack_require__("tI+e"); + +// EXTERNAL MODULE: external ["wp","i18n"] +var external_wp_i18n_ = __webpack_require__("l3Sj"); + +// EXTERNAL MODULE: external ["wp","plugins"] +var external_wp_plugins_ = __webpack_require__("TvNi"); + +// EXTERNAL MODULE: external ["wp","apiFetch"] +var external_wp_apiFetch_ = __webpack_require__("ywyh"); +var external_wp_apiFetch_default = /*#__PURE__*/__webpack_require__.n(external_wp_apiFetch_); + +// EXTERNAL MODULE: external ["wp","primitives"] +var external_wp_primitives_ = __webpack_require__("Tqx9"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/download.js + + +/** + * WordPress dependencies + */ + +const download_download = Object(external_wp_element_["createElement"])(external_wp_primitives_["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(external_wp_element_["createElement"])(external_wp_primitives_["Path"], { + d: "M18 11.3l-1-1.1-4 4V3h-1.5v11.3L7 10.2l-1 1.1 6.2 5.8 5.8-5.8zm.5 3.7v3.5h-13V15H4v5h16v-5h-1.5z" +})); +/* harmony default export */ var library_download = (download_download); + +// EXTERNAL MODULE: external "lodash" +var external_lodash_ = __webpack_require__("YLtl"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/tools-more-menu-group/index.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + +const { + Fill: ToolsMoreMenuGroup, + Slot +} = Object(external_wp_components_["createSlotFill"])('ToolsMoreMenuGroup'); + +ToolsMoreMenuGroup.Slot = ({ + fillProps +}) => Object(external_wp_element_["createElement"])(Slot, { + fillProps: fillProps +}, fills => !Object(external_lodash_["isEmpty"])(fills) && Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], { + label: Object(external_wp_i18n_["__"])('Tools') +}, fills)); + +/* harmony default export */ var tools_more_menu_group = (ToolsMoreMenuGroup); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/plugins/index.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + +Object(external_wp_plugins_["registerPlugin"])('edit-site', { + render() { + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(tools_more_menu_group, null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + role: "menuitem", + icon: library_download, + onClick: () => external_wp_apiFetch_default()({ + path: '/__experimental/edit-site/v1/export', + parse: false + }).then(res => res.blob()).then(blob => download_default()(blob, 'edit-site-export.zip', 'application/zip')), + info: Object(external_wp_i18n_["__"])('Download your templates and template parts.') + }, Object(external_wp_i18n_["__"])('Export')))); + } + +}); + +// EXTERNAL MODULE: external ["wp","hooks"] +var external_wp_hooks_ = __webpack_require__("g56x"); + +// EXTERNAL MODULE: external ["wp","mediaUtils"] +var external_wp_mediaUtils_ = __webpack_require__("6aBm"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/hooks/components.js +/** + * WordPress dependencies + */ + + +Object(external_wp_hooks_["addFilter"])('editor.MediaUpload', 'core/edit-site/components/media-upload', () => external_wp_mediaUtils_["MediaUpload"]); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/hooks/index.js +/** + * Internal dependencies + */ + + +// EXTERNAL MODULE: external ["wp","dataControls"] +var external_wp_dataControls_ = __webpack_require__("51Zz"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/defaults.js +const PREFERENCES_DEFAULTS = { + features: {} +}; + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/constants.js +/** + * WordPress dependencies + */ + +/** + * The identifier for the data store. + * + * @type {string} + */ + +const STORE_NAME = 'core/edit-site'; +const TEMPLATE_PART_AREA_HEADER = 'header'; +const TEMPLATE_PART_AREA_FOOTER = 'footer'; +const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar'; +const TEMPLATE_PART_AREA_GENERAL = 'uncategorized'; +const TEMPLATE_PART_AREA_TO_NAME = { + [TEMPLATE_PART_AREA_HEADER]: Object(external_wp_i18n_["__"])('Header'), + [TEMPLATE_PART_AREA_FOOTER]: Object(external_wp_i18n_["__"])('Footer'), + [TEMPLATE_PART_AREA_SIDEBAR]: Object(external_wp_i18n_["__"])('Sidebar'), + [TEMPLATE_PART_AREA_GENERAL]: Object(external_wp_i18n_["__"])('General') +}; + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/navigation-sidebar/navigation-panel/constants.js +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + +const TEMPLATES_PRIMARY = ['index', 'singular', 'archive', 'single', 'page', 'home', '404', 'search']; +const TEMPLATES_SECONDARY = ['author', 'category', 'taxonomy', 'date', 'tag', 'attachment', 'single-post', 'front-page']; +const TEMPLATES_TOP_LEVEL = [...TEMPLATES_PRIMARY, ...TEMPLATES_SECONDARY]; +const TEMPLATES_GENERAL = ['page-home']; +const TEMPLATES_POSTS_PREFIXES = ['post-', 'author-', 'single-post-', 'tag-']; +const TEMPLATES_PAGES_PREFIXES = ['page-']; +const TEMPLATES_NEW_OPTIONS = ['front-page', 'single-post', 'page', 'archive', 'search', '404', 'index']; +const TEMPLATE_OVERRIDES = { + singular: ['single', 'page'], + index: ['archive', '404', 'search', 'singular', 'home'], + home: ['front-page'] +}; +const MENU_ROOT = 'root'; +const MENU_CONTENT_CATEGORIES = 'content-categories'; +const MENU_CONTENT_PAGES = 'content-pages'; +const MENU_CONTENT_POSTS = 'content-posts'; +const MENU_TEMPLATE_PARTS = 'template-parts'; +const MENU_TEMPLATES = 'templates'; +const MENU_TEMPLATES_GENERAL = 'templates-general'; +const MENU_TEMPLATES_PAGES = 'templates-pages'; +const MENU_TEMPLATES_POSTS = 'templates-posts'; +const MENU_TEMPLATES_UNUSED = 'templates-unused'; +const SEARCH_DEBOUNCE_IN_MS = 75; +const MENU_TEMPLATE_PARTS_HEADERS = 'template-parts-headers'; +const MENU_TEMPLATE_PARTS_FOOTERS = 'template-parts-footers'; +const MENU_TEMPLATE_PARTS_SIDEBARS = 'template-parts-sidebars'; +const MENU_TEMPLATE_PARTS_GENERAL = 'template-parts-general'; +const TEMPLATE_PARTS_SUB_MENUS = [{ + area: TEMPLATE_PART_AREA_HEADER, + menu: MENU_TEMPLATE_PARTS_HEADERS, + title: Object(external_wp_i18n_["__"])('headers') +}, { + area: TEMPLATE_PART_AREA_FOOTER, + menu: MENU_TEMPLATE_PARTS_FOOTERS, + title: Object(external_wp_i18n_["__"])('footers') +}, { + area: TEMPLATE_PART_AREA_SIDEBAR, + menu: MENU_TEMPLATE_PARTS_SIDEBARS, + title: Object(external_wp_i18n_["__"])('sidebars') +}, { + area: TEMPLATE_PART_AREA_GENERAL, + menu: MENU_TEMPLATE_PARTS_GENERAL, + title: Object(external_wp_i18n_["__"])('general') +}]; + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/reducer.js +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + +/** + * Reducer returning the user preferences. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * @return {Object} Updated state. + */ + +const preferences = Object(external_wp_data_["combineReducers"])({ + features(state = PREFERENCES_DEFAULTS.features, action) { + switch (action.type) { + case 'TOGGLE_FEATURE': + { + return { ...state, + [action.feature]: !state[action.feature] + }; + } + + default: + return state; + } + } + +}); +/** + * Reducer returning the editing canvas device type. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ + +function reducer_deviceType(state = 'Desktop', action) { + switch (action.type) { + case 'SET_PREVIEW_DEVICE_TYPE': + return action.deviceType; + } + + return state; +} +/** + * Reducer returning the settings. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ + +function reducer_settings(state = {}, action) { + switch (action.type) { + case 'UPDATE_SETTINGS': + return { ...state, + ...action.settings + }; + } + + return state; +} +/** + * Reducer keeping track of the currently edited Post Type, + * Post Id and the context provided to fill the content of the block editor. + * + * @param {Array} state Current state history. + * @param {Object} action Dispatched action. + * + * @return {Array} Updated state. + */ + +function editedPost(state = [], action) { + switch (action.type) { + case 'SET_TEMPLATE': + case 'SET_PAGE': + return [{ + type: 'wp_template', + id: action.templateId, + page: action.page + }]; + + case 'SET_TEMPLATE_PART': + return [{ + type: 'wp_template_part', + id: action.templatePartId + }]; + + case 'PUSH_TEMPLATE_PART': + return [...state, { + type: 'wp_template_part', + id: action.templatePartId + }]; + + case 'GO_BACK': + return state.slice(0, -1); + } + + return state; +} +/** + * Reducer for information about the site's homepage. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ + +function homeTemplateId(state, action) { + switch (action.type) { + case 'SET_HOME_TEMPLATE': + return action.homeTemplateId; + } + + return state; +} +/** + * Reducer for information about the navigation panel, such as its active menu + * and whether it should be opened or closed. + * + * Note: this reducer interacts with the inserter and list view panels reducers + * to make sure that only one of the three panels is open at the same time. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + */ + +function navigationPanel(state = { + menu: MENU_ROOT, + isOpen: false +}, action) { + switch (action.type) { + case 'SET_NAVIGATION_PANEL_ACTIVE_MENU': + return { ...state, + menu: action.menu + }; + + case 'OPEN_NAVIGATION_PANEL_TO_MENU': + return { ...state, + isOpen: true, + menu: action.menu + }; + + case 'SET_IS_NAVIGATION_PANEL_OPENED': + return { ...state, + menu: !action.isOpen ? MENU_ROOT : state.menu, + // Set menu to root when closing panel. + isOpen: action.isOpen + }; + + case 'SET_IS_LIST_VIEW_OPENED': + return { ...state, + menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, + // Set menu to root when closing panel. + isOpen: action.isOpen ? false : state.isOpen + }; + + case 'SET_IS_INSERTER_OPENED': + return { ...state, + menu: state.isOpen && action.value ? MENU_ROOT : state.menu, + // Set menu to root when closing panel. + isOpen: action.value ? false : state.isOpen + }; + } + + return state; +} +/** + * Reducer to set the block inserter panel open or closed. + * + * Note: this reducer interacts with the navigation and list view panels reducers + * to make sure that only one of the three panels is open at the same time. + * + * @param {boolean|Object} state Current state. + * @param {Object} action Dispatched action. + */ + +function blockInserterPanel(state = false, action) { + switch (action.type) { + case 'OPEN_NAVIGATION_PANEL_TO_MENU': + return false; + + case 'SET_IS_NAVIGATION_PANEL_OPENED': + case 'SET_IS_LIST_VIEW_OPENED': + return action.isOpen ? false : state; + + case 'SET_IS_INSERTER_OPENED': + return action.value; + } + + return state; +} +/** + * Reducer to set the list view panel open or closed. + * + * Note: this reducer interacts with the navigation and inserter panels reducers + * to make sure that only one of the three panels is open at the same time. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + */ + +function listViewPanel(state = false, action) { + switch (action.type) { + case 'OPEN_NAVIGATION_PANEL_TO_MENU': + return false; + + case 'SET_IS_NAVIGATION_PANEL_OPENED': + return action.isOpen ? false : state; + + case 'SET_IS_INSERTER_OPENED': + return action.value ? false : state; + + case 'SET_IS_LIST_VIEW_OPENED': + return action.isOpen; + } + + return state; +} +/* harmony default export */ var reducer = (Object(external_wp_data_["combineReducers"])({ + preferences, + deviceType: reducer_deviceType, + settings: reducer_settings, + editedPost, + homeTemplateId, + navigationPanel, + blockInserterPanel, + listViewPanel +})); + +// EXTERNAL MODULE: external ["wp","url"] +var external_wp_url_ = __webpack_require__("Mmq9"); + +// EXTERNAL MODULE: external ["wp","notices"] +var external_wp_notices_ = __webpack_require__("onLe"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/interface/build-module/index.js + 17 modules +var build_module = __webpack_require__("U60i"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/utils/is-template-revertable.js +/** + * Check if a template is revertable to its original theme-provided template file. + * + * @param {Object} template The template entity to check. + * @return {boolean} Whether the template is revertable. + */ +function isTemplateRevertable(template) { + if (!template) { + return false; + } + /* eslint-disable camelcase */ + + + return (template === null || template === void 0 ? void 0 : template.source) === 'custom' && (template === null || template === void 0 ? void 0 : template.has_theme_file); + /* eslint-enable camelcase */ +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/actions.js +/** + * WordPress dependencies + */ + + + + + + + + +/** + * Internal dependencies + */ + + + +/** + * Returns an action object used to toggle a feature flag. + * + * @param {string} feature Feature name. + * + * @return {Object} Action object. + */ + +function actions_toggleFeature(feature) { + return { + type: 'TOGGLE_FEATURE', + feature + }; +} +/** + * Returns an action object used to toggle the width of the editing canvas. + * + * @param {string} deviceType + * + * @return {Object} Action object. + */ + +function __experimentalSetPreviewDeviceType(deviceType) { + return { + type: 'SET_PREVIEW_DEVICE_TYPE', + deviceType + }; +} +/** + * Returns an action object used to set a template. + * + * @param {number} templateId The template ID. + * @param {string} templateSlug The template slug. + * @return {Object} Action object. + */ + +function* actions_setTemplate(templateId, templateSlug) { + const pageContext = { + templateSlug + }; + + if (!templateSlug) { + const template = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], 'getEntityRecord', 'postType', 'wp_template', templateId); + pageContext.templateSlug = template === null || template === void 0 ? void 0 : template.slug; + } + + return { + type: 'SET_TEMPLATE', + templateId, + page: { + context: pageContext + } + }; +} +/** + * Adds a new template, and sets it as the current template. + * + * @param {Object} template The template. + * + * @return {Object} Action object used to set the current template. + */ + +function* addTemplate(template) { + const newTemplate = yield external_wp_data_["controls"].dispatch(external_wp_coreData_["store"], 'saveEntityRecord', 'postType', 'wp_template', template); + + if (template.content) { + yield external_wp_data_["controls"].dispatch(external_wp_coreData_["store"], 'editEntityRecord', 'postType', 'wp_template', newTemplate.id, { + blocks: Object(external_wp_blocks_["parse"])(template.content) + }, { + undoIgnore: true + }); + } + + return { + type: 'SET_TEMPLATE', + templateId: newTemplate.id, + page: { + context: { + templateSlug: newTemplate.slug + } + } + }; +} +/** + * Removes a template, and updates the current page and template. + * + * @param {number} templateId The template ID. + */ + +function* removeTemplate(templateId) { + yield Object(external_wp_dataControls_["apiFetch"])({ + path: `/wp/v2/templates/${templateId}`, + method: 'DELETE' + }); + const page = yield external_wp_data_["controls"].select(STORE_NAME, 'getPage'); + yield external_wp_data_["controls"].dispatch(STORE_NAME, 'setPage', page); +} +/** + * Returns an action object used to set a template part. + * + * @param {string} templatePartId The template part ID. + * + * @return {Object} Action object. + */ + +function actions_setTemplatePart(templatePartId) { + return { + type: 'SET_TEMPLATE_PART', + templatePartId + }; +} +/** + * Returns an action object used to push a template part to navigation history. + * + * @param {string} templatePartId The template part ID. + * + * @return {Object} Action object. + */ + +function actions_pushTemplatePart(templatePartId) { + return { + type: 'PUSH_TEMPLATE_PART', + templatePartId + }; +} +/** + * Updates the homeTemplateId state with the templateId of the page resolved + * from the given path. + * + * @param {number} homeTemplateId The template ID for the homepage. + */ + +function setHomeTemplateId(homeTemplateId) { + return { + type: 'SET_HOME_TEMPLATE', + homeTemplateId + }; +} +/** + * Resolves the template for a page and displays both. If no path is given, attempts + * to use the postId to generate a path like `?p=${ postId }`. + * + * @param {Object} page The page object. + * @param {string} page.type The page type. + * @param {string} page.slug The page slug. + * @param {string} page.path The page path. + * @param {Object} page.context The page context. + * + * @return {number} The resolved template ID for the page route. + */ + +function* actions_setPage(page) { + var _page$context; + + if (!page.path && (_page$context = page.context) !== null && _page$context !== void 0 && _page$context.postId) { + const entity = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], 'getEntityRecord', 'postType', page.context.postType || 'post', page.context.postId); + page.path = Object(external_wp_url_["getPathAndQueryString"])(entity.link); + } + + const { + id: templateId, + slug: templateSlug + } = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], '__experimentalGetTemplateForLink', page.path); + yield { + type: 'SET_PAGE', + page: !templateSlug ? page : { ...page, + context: { ...page.context, + templateSlug + } + }, + templateId + }; + return templateId; +} +/** + * Go back to the current editing page. + */ + +function actions_goBack() { + return { + type: 'GO_BACK' + }; +} +/** + * Displays the site homepage for editing in the editor. + */ + +function* actions_showHomepage() { + const { + show_on_front: showOnFront, + page_on_front: frontpageId + } = yield external_wp_data_["controls"].resolveSelect(external_wp_coreData_["store"], 'getEntityRecord', 'root', 'site'); + const { + siteUrl + } = yield external_wp_data_["controls"].select(STORE_NAME, 'getSettings'); + const page = { + path: siteUrl, + context: showOnFront === 'page' ? { + postType: 'page', + postId: frontpageId + } : {} + }; + const homeTemplate = yield* actions_setPage(page); + yield setHomeTemplateId(homeTemplate); +} +/** + * Returns an action object used to set the active navigation panel menu. + * + * @param {string} menu Menu prop of active menu. + * + * @return {Object} Action object. + */ + +function setNavigationPanelActiveMenu(menu) { + return { + type: 'SET_NAVIGATION_PANEL_ACTIVE_MENU', + menu + }; +} +/** + * Opens the navigation panel and sets its active menu at the same time. + * + * @param {string} menu Identifies the menu to open. + */ + +function actions_openNavigationPanelToMenu(menu) { + return { + type: 'OPEN_NAVIGATION_PANEL_TO_MENU', + menu + }; +} +/** + * Sets whether the navigation panel should be open. + * + * @param {boolean} isOpen If true, opens the nav panel. If false, closes it. It + * does not toggle the state, but sets it directly. + */ + +function actions_setIsNavigationPanelOpened(isOpen) { + return { + type: 'SET_IS_NAVIGATION_PANEL_OPENED', + isOpen + }; +} +/** + * Returns an action object used to open/close the inserter. + * + * @param {boolean|Object} value Whether the inserter should be + * opened (true) or closed (false). + * To specify an insertion point, + * use an object. + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.insertionIndex The index to insert at. + * + * @return {Object} Action object. + */ + +function actions_setIsInserterOpened(value) { + return { + type: 'SET_IS_INSERTER_OPENED', + value + }; +} +/** + * Returns an action object used to update the settings. + * + * @param {Object} settings New settings. + * + * @return {Object} Action object. + */ + +function actions_updateSettings(settings) { + return { + type: 'UPDATE_SETTINGS', + settings + }; +} +/** + * Sets whether the list view panel should be open. + * + * @param {boolean} isOpen If true, opens the list view. If false, closes it. + * It does not toggle the state, but sets it directly. + */ + +function actions_setIsListViewOpened(isOpen) { + return { + type: 'SET_IS_LIST_VIEW_OPENED', + isOpen + }; +} +/** + * Reverts a template to its original theme-provided file. + * + * @param {Object} template The template to revert. + */ + +function* actions_revertTemplate(template) { + if (!isTemplateRevertable(template)) { + yield external_wp_data_["controls"].dispatch(external_wp_notices_["store"], 'createErrorNotice', Object(external_wp_i18n_["__"])('This template is not revertable.'), { + type: 'snackbar' + }); + return; + } + + try { + var _fileTemplate$content; + + const templateEntity = yield external_wp_data_["controls"].select(external_wp_coreData_["store"], 'getEntity', 'postType', template.type); + + if (!templateEntity) { + yield external_wp_data_["controls"].dispatch(external_wp_notices_["store"], 'createErrorNotice', Object(external_wp_i18n_["__"])('The editor has encountered an unexpected error. Please reload.'), { + type: 'snackbar' + }); + return; + } + + const fileTemplatePath = Object(external_wp_url_["addQueryArgs"])(`${templateEntity.baseURL}/${template.id}`, { + context: 'edit', + source: 'theme' + }); + const fileTemplate = yield Object(external_wp_dataControls_["apiFetch"])({ + path: fileTemplatePath + }); + + if (!fileTemplate) { + yield external_wp_data_["controls"].dispatch(external_wp_notices_["store"], 'createErrorNotice', Object(external_wp_i18n_["__"])('The editor has encountered an unexpected error. Please reload.'), { + type: 'snackbar' + }); + return; + } + + const serializeBlocks = ({ + blocks: blocksForSerialization = [] + }) => Object(external_wp_blocks_["__unstableSerializeAndClean"])(blocksForSerialization); + + const edited = yield external_wp_data_["controls"].select(external_wp_coreData_["store"], 'getEditedEntityRecord', 'postType', template.type, template.id); // We are fixing up the undo level here to make sure we can undo + // the revert in the header toolbar correctly. + + yield external_wp_data_["controls"].dispatch(external_wp_coreData_["store"], 'editEntityRecord', 'postType', template.type, template.id, { + content: serializeBlocks, + // required to make the `undo` behave correctly + blocks: edited.blocks, + // required to revert the blocks in the editor + source: 'custom' // required to avoid turning the editor into a dirty state + + }, { + undoIgnore: true // required to merge this edit with the last undo level + + }); + const blocks = Object(external_wp_blocks_["parse"])(fileTemplate === null || fileTemplate === void 0 ? void 0 : (_fileTemplate$content = fileTemplate.content) === null || _fileTemplate$content === void 0 ? void 0 : _fileTemplate$content.raw); + yield external_wp_data_["controls"].dispatch(external_wp_coreData_["store"], 'editEntityRecord', 'postType', template.type, fileTemplate.id, { + content: serializeBlocks, + blocks, + source: 'theme' + }); + + const undoRevert = async () => { + await Object(external_wp_data_["dispatch"])(external_wp_coreData_["store"]).editEntityRecord('postType', template.type, edited.id, { + content: serializeBlocks, + blocks: edited.blocks, + source: 'custom' + }); + }; + + yield external_wp_data_["controls"].dispatch(external_wp_notices_["store"], 'createSuccessNotice', Object(external_wp_i18n_["__"])('Template reverted.'), { + type: 'snackbar', + actions: [{ + label: Object(external_wp_i18n_["__"])('Undo'), + onClick: undoRevert + }] + }); + } catch (error) { + const errorMessage = error.message && error.code !== 'unknown_error' ? error.message : Object(external_wp_i18n_["__"])('Template revert failed. Please reload.'); + yield external_wp_data_["controls"].dispatch(external_wp_notices_["store"], 'createErrorNotice', errorMessage, { + type: 'snackbar' + }); + } +} +/** + * Returns an action object used in signalling that the user opened an editor sidebar. + * + * @param {?string} name Sidebar name to be opened. + * + * @yield {Object} Action object. + */ + +function* openGeneralSidebar(name) { + yield external_wp_data_["controls"].dispatch(build_module["i" /* store */], 'enableComplementaryArea', STORE_NAME, name); +} +/** + * Returns an action object signalling that the user closed the sidebar. + * + * @yield {Object} Action object. + */ + +function* closeGeneralSidebar() { + yield external_wp_data_["controls"].dispatch(build_module["i" /* store */], 'disableComplementaryArea', STORE_NAME); +} + +// EXTERNAL MODULE: ./node_modules/rememo/es/rememo.js +var rememo = __webpack_require__("pPDe"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/navigation-sidebar/navigation-panel/template-hierarchy.js +/** + * External dependencies + */ + +/** + * Internal dependencies + */ + + +function isTemplateSuperseded(slug, existingSlugs, showOnFront) { + if (!TEMPLATE_OVERRIDES[slug]) { + return false; + } // `home` template is unused if it is superseded by `front-page` + // or "show on front" is set to show a page rather than blog posts. + + + if (slug === 'home' && showOnFront !== 'posts') { + return true; + } + + return TEMPLATE_OVERRIDES[slug].every(overrideSlug => existingSlugs.includes(overrideSlug) || isTemplateSuperseded(overrideSlug, existingSlugs, showOnFront)); +} +function getTemplateLocation(slug) { + const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes(slug); + + if (isTopLevelTemplate) { + return MENU_TEMPLATES; + } + + const isGeneralTemplate = TEMPLATES_GENERAL.includes(slug); + + if (isGeneralTemplate) { + return MENU_TEMPLATES_GENERAL; + } + + const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some(prefix => slug.startsWith(prefix)); + + if (isPostsTemplate) { + return MENU_TEMPLATES_POSTS; + } + + const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some(prefix => slug.startsWith(prefix)); + + if (isPagesTemplate) { + return MENU_TEMPLATES_PAGES; + } + + return MENU_TEMPLATES_GENERAL; +} +function getUnusedTemplates(templates, showOnFront) { + const templateSlugs = Object(external_lodash_["map"])(templates, 'slug'); + const supersededTemplates = templates.filter(({ + slug + }) => isTemplateSuperseded(slug, templateSlugs, showOnFront)); + return supersededTemplates; +} +function getTemplatesLocationMap(templates) { + return templates.reduce((obj, template) => { + obj[template.slug] = getTemplateLocation(template.slug); + return obj; + }, {}); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/selectors.js +/** + * External dependencies + */ + + +/** + * WordPress dependencies + */ + + + + + +/** + * Internal dependencies + */ + + + +/** + * @typedef {'template'|'template_type'} TemplateType Template type. + */ + +/** + * Returns whether the given feature is enabled or not. + * + * @param {Object} state Global application state. + * @param {string} feature Feature slug. + * + * @return {boolean} Is active. + */ + +function isFeatureActive(state, feature) { + return Object(external_lodash_["get"])(state.preferences.features, [feature], false); +} +/** + * Returns the current editing canvas device type. + * + * @param {Object} state Global application state. + * + * @return {string} Device type. + */ + +function selectors_experimentalGetPreviewDeviceType(state) { + return state.deviceType; +} +/** + * Returns whether the current user can create media or not. + * + * @param {Object} state Global application state. + * + * @return {Object} Whether the current user can create media or not. + */ + +const getCanUserCreateMedia = Object(external_wp_data_["createRegistrySelector"])(select => () => select(external_wp_coreData_["store"]).canUser('create', 'media')); +/** + * Returns the settings, taking into account active features and permissions. + * + * @param {Object} state Global application state. + * @param {Function} setIsInserterOpen Setter for the open state of the global inserter. + * + * @return {Object} Settings. + */ + +const selectors_getSettings = Object(rememo["a" /* default */])((state, setIsInserterOpen) => { + const settings = { ...state.settings, + outlineMode: true, + focusMode: isFeatureActive(state, 'focusMode'), + hasFixedToolbar: isFeatureActive(state, 'fixedToolbar'), + __experimentalSetIsInserterOpened: setIsInserterOpen + }; + const canUserCreateMedia = getCanUserCreateMedia(state); + + if (!canUserCreateMedia) { + return settings; + } + + settings.mediaUpload = ({ + onError, + ...rest + }) => { + Object(external_wp_mediaUtils_["uploadMedia"])({ + wpAllowedMimeTypes: state.settings.allowedMimeTypes, + onError: ({ + message + }) => onError(message), + ...rest + }); + }; + + return settings; +}, state => [getCanUserCreateMedia(state), state.settings, isFeatureActive(state, 'focusMode'), isFeatureActive(state, 'fixedToolbar')]); +/** + * Returns the current home template ID. + * + * @param {Object} state Global application state. + * + * @return {number?} Home template ID. + */ + +function getHomeTemplateId(state) { + return state.homeTemplateId; +} + +function getCurrentEditedPost(state) { + return state.editedPost[state.editedPost.length - 1] || {}; +} + +function getPreviousEditedPost(state) { + return state.editedPost[state.editedPost.length - 2] || {}; +} +/** + * Returns the current edited post type (wp_template or wp_template_part). + * + * @param {Object} state Global application state. + * + * @return {TemplateType?} Template type. + */ + + +function selectors_getEditedPostType(state) { + return getCurrentEditedPost(state).type; +} +/** + * Returns the ID of the currently edited template or template part. + * + * @param {Object} state Global application state. + * + * @return {string?} Post ID. + */ + +function selectors_getEditedPostId(state) { + return getCurrentEditedPost(state).id; +} +/** + * Returns the previous edited post type (wp_template or wp_template_part). + * + * @param {Object} state Global application state. + * + * @return {TemplateType?} Template type. + */ + +function getPreviousEditedPostType(state) { + return getPreviousEditedPost(state).type; +} +/** + * Returns the ID of the previous edited template or template part. + * + * @param {Object} state Global application state. + * + * @return {string?} Post ID. + */ + +function selectors_getPreviousEditedPostId(state) { + return getPreviousEditedPost(state).id; +} +/** + * Returns the current page object. + * + * @param {Object} state Global application state. + * + * @return {Object} Page. + */ + +function selectors_getPage(state) { + return getCurrentEditedPost(state).page; +} +/** + * Returns the active menu in the navigation panel. + * + * @param {Object} state Global application state. + * + * @return {string} Active menu. + */ + +function getNavigationPanelActiveMenu(state) { + return state.navigationPanel.menu; +} +/** + * Returns the current template or template part's corresponding + * navigation panel's sub menu, to be used with `openNavigationPanelToMenu`. + * + * @param {Object} state Global application state. + * + * @return {string} The current template or template part's sub menu. + */ + +const selectors_getCurrentTemplateNavigationPanelSubMenu = Object(external_wp_data_["createRegistrySelector"])(select => state => { + const templateType = selectors_getEditedPostType(state); + const templateId = selectors_getEditedPostId(state); + const template = templateId ? select(external_wp_coreData_["store"]).getEntityRecord('postType', templateType, templateId) : null; + + if (!template) { + return MENU_ROOT; + } + + if ('wp_template_part' === templateType) { + var _TEMPLATE_PARTS_SUB_M; + + return ((_TEMPLATE_PARTS_SUB_M = TEMPLATE_PARTS_SUB_MENUS.find(submenu => submenu.area === (template === null || template === void 0 ? void 0 : template.area))) === null || _TEMPLATE_PARTS_SUB_M === void 0 ? void 0 : _TEMPLATE_PARTS_SUB_M.menu) || MENU_TEMPLATE_PARTS; + } + + const templates = select(external_wp_coreData_["store"]).getEntityRecords('postType', 'wp_template'); + const showOnFront = select(external_wp_coreData_["store"]).getEditedEntityRecord('root', 'site').show_on_front; + + if (isTemplateSuperseded(template.slug, Object(external_lodash_["map"])(templates, 'slug'), showOnFront)) { + return MENU_TEMPLATES_UNUSED; + } + + return getTemplateLocation(template.slug); +}); +/** + * Returns the current opened/closed state of the navigation panel. + * + * @param {Object} state Global application state. + * + * @return {boolean} True if the navigation panel should be open; false if closed. + */ + +function selectors_isNavigationOpened(state) { + return state.navigationPanel.isOpen; +} +/** + * Returns the current opened/closed state of the inserter panel. + * + * @param {Object} state Global application state. + * + * @return {boolean} True if the inserter panel should be open; false if closed. + */ + +function selectors_isInserterOpened(state) { + return !!state.blockInserterPanel; +} +/** + * Get the insertion point for the inserter. + * + * @param {Object} state Global application state. + * + * @return {Object} The root client ID, index to insert at and starting filter value. + */ + +function __experimentalGetInsertionPoint(state) { + const { + rootClientId, + insertionIndex, + filterValue + } = state.blockInserterPanel; + return { + rootClientId, + insertionIndex, + filterValue + }; +} +/** + * Returns the current opened/closed state of the list view panel. + * + * @param {Object} state Global application state. + * + * @return {boolean} True if the list view panel should be open; false if closed. + */ + +function selectors_isListViewOpened(state) { + return state.listViewPanel; +} +/** + * Returns the template parts and their blocks for the current edited template. + * + * @param {Object} state Global application state. + * @return {Array} Template parts and their blocks in an array. + */ + +const getCurrentTemplateTemplateParts = Object(external_wp_data_["createRegistrySelector"])(select => state => { + var _template$blocks; + + const templateType = selectors_getEditedPostType(state); + const templateId = selectors_getEditedPostId(state); + const template = select(external_wp_coreData_["store"]).getEditedEntityRecord('postType', templateType, templateId); + const templateParts = select(external_wp_coreData_["store"]).getEntityRecords('postType', 'wp_template_part'); + const templatePartsById = Object(external_lodash_["keyBy"])(templateParts, templatePart => templatePart.id); + return ((_template$blocks = template.blocks) !== null && _template$blocks !== void 0 ? _template$blocks : []).filter(block => Object(external_wp_blocks_["isTemplatePart"])(block)).map(block => { + const { + attributes: { + theme, + slug + } + } = block; + const templatePartId = `${theme}//${slug}`; + const templatePart = templatePartsById[templatePartId]; + return { + templatePart, + block + }; + }).filter(({ + templatePart + }) => !!templatePart); +}); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/store/index.js +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + + +const storeConfig = { + reducer: reducer, + actions: actions_namespaceObject, + selectors: selectors_namespaceObject, + controls: external_wp_dataControls_["controls"], + persist: ['preferences'] +}; +const store = Object(external_wp_data_["createReduxStore"])(STORE_NAME, storeConfig); // Once we build a more generic persistence plugin that works across types of stores +// we'd be able to replace this with a register call. + +Object(external_wp_data_["registerStore"])(STORE_NAME, storeConfig); + +// EXTERNAL MODULE: external ["wp","blockEditor"] +var external_wp_blockEditor_ = __webpack_require__("axFQ"); + +// EXTERNAL MODULE: external ["wp","editor"] +var external_wp_editor_ = __webpack_require__("jSdM"); + +// EXTERNAL MODULE: external ["wp","keyboardShortcuts"] +var external_wp_keyboardShortcuts_ = __webpack_require__("hF7m"); + +// EXTERNAL MODULE: external ["wp","compose"] +var external_wp_compose_ = __webpack_require__("K9lf"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js +var plus = __webpack_require__("Q4Sy"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/list-view.js +var list_view = __webpack_require__("OzlF"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/wordpress.js +var wordpress = __webpack_require__("wduq"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/navigation-link/index.js + + +/** + * WordPress dependencies + */ + + + + + + + +function NavigationLink({ + icon +}) { + const { + isRequestingSiteIcon, + siteIconUrl + } = Object(external_wp_data_["useSelect"])(select => { + const { + getEntityRecord, + isResolving + } = select(external_wp_coreData_["store"]); + const siteData = getEntityRecord('root', '__unstableBase', undefined) || {}; + return { + isRequestingSiteIcon: isResolving('core', 'getEntityRecord', ['root', '__unstableBase', undefined]), + siteIconUrl: siteData.site_icon_url + }; + }, []); + const disableMotion = Object(external_wp_compose_["useReducedMotion"])(); + let buttonIcon = Object(external_wp_element_["createElement"])(external_wp_components_["Icon"], { + size: "36px", + icon: wordpress["a" /* default */] + }); + const effect = { + expand: { + scale: 1.7, + borderRadius: 0, + transition: { + type: 'tween', + duration: '0.2' + } + } + }; + + if (siteIconUrl) { + buttonIcon = Object(external_wp_element_["createElement"])(external_wp_components_["__unstableMotion"].img, { + variants: !disableMotion && effect, + alt: Object(external_wp_i18n_["__"])('Site Icon'), + className: "edit-site-navigation-link__site-icon", + src: siteIconUrl + }); + } else if (isRequestingSiteIcon) { + buttonIcon = null; + } else if (icon) { + buttonIcon = Object(external_wp_element_["createElement"])(external_wp_components_["Icon"], { + size: "36px", + icon: icon + }); + } + + return Object(external_wp_element_["createElement"])(external_wp_components_["__unstableMotion"].div, { + className: "edit-site-navigation-link", + whileHover: "expand" + }, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-navigation-link__button has-icon", + label: Object(external_wp_i18n_["__"])('Dashboard'), + href: "index.php" + }, buttonIcon)); +} + +/* harmony default export */ var navigation_link = (NavigationLink); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js +var more_vertical = __webpack_require__("VKE3"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js +var check = __webpack_require__("RMJe"); + +// EXTERNAL MODULE: external ["wp","a11y"] +var external_wp_a11y_ = __webpack_require__("gdqT"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/feature-toggle/index.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + +function FeatureToggle({ + feature, + label, + info, + messageActivated, + messageDeactivated +}) { + const speakMessage = () => { + if (isActive) { + Object(external_wp_a11y_["speak"])(messageDeactivated || Object(external_wp_i18n_["__"])('Feature deactivated')); + } else { + Object(external_wp_a11y_["speak"])(messageActivated || Object(external_wp_i18n_["__"])('Feature activated')); + } + }; + + const isActive = Object(external_wp_data_["useSelect"])(select => { + return select(store).isFeatureActive(feature); + }, []); + const { + toggleFeature + } = Object(external_wp_data_["useDispatch"])(store); + return Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + icon: isActive && check["a" /* default */], + isSelected: isActive, + onClick: Object(external_lodash_["flow"])(toggleFeature.bind(null, feature), speakMessage), + role: "menuitemcheckbox", + info: info + }, label); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/more-menu/index.js + + +/** + * WordPress dependencies + */ + + + + +/** + * Internal dependencies + */ + + + +const POPOVER_PROPS = { + className: 'edit-site-more-menu__content', + position: 'bottom left' +}; +const TOGGLE_PROPS = { + tooltipPosition: 'bottom' +}; + +const MoreMenu = () => Object(external_wp_element_["createElement"])(external_wp_components_["DropdownMenu"], { + className: "edit-site-more-menu", + icon: more_vertical["a" /* default */], + label: Object(external_wp_i18n_["__"])('More tools & options'), + popoverProps: POPOVER_PROPS, + toggleProps: TOGGLE_PROPS +}, ({ + onClose +}) => Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], { + label: Object(external_wp_i18n_["_x"])('View', 'noun') +}, Object(external_wp_element_["createElement"])(FeatureToggle, { + feature: "fixedToolbar", + label: Object(external_wp_i18n_["__"])('Top toolbar'), + info: Object(external_wp_i18n_["__"])('Access all block and document tools in a single place'), + messageActivated: Object(external_wp_i18n_["__"])('Top toolbar activated'), + messageDeactivated: Object(external_wp_i18n_["__"])('Top toolbar deactivated') +}), Object(external_wp_element_["createElement"])(FeatureToggle, { + feature: "focusMode", + label: Object(external_wp_i18n_["__"])('Spotlight mode'), + info: Object(external_wp_i18n_["__"])('Focus on one block at a time'), + messageActivated: Object(external_wp_i18n_["__"])('Spotlight mode activated'), + messageDeactivated: Object(external_wp_i18n_["__"])('Spotlight mode deactivated') +}), Object(external_wp_element_["createElement"])(build_module["a" /* ActionItem */].Slot, { + name: "core/edit-site/plugin-more-menu", + label: Object(external_wp_i18n_["__"])('Plugins'), + as: external_wp_components_["MenuGroup"], + fillProps: { + onClick: onClose + } +})), Object(external_wp_element_["createElement"])(tools_more_menu_group.Slot, { + fillProps: { + onClose + } +}))); + +/* harmony default export */ var more_menu = (MoreMenu); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/save-button/index.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + + +function SaveButton({ + openEntitiesSavedStates, + isEntitiesSavedStatesOpen +}) { + const { + isDirty, + isSaving + } = Object(external_wp_data_["useSelect"])(select => { + const { + __experimentalGetDirtyEntityRecords, + isSavingEntityRecord + } = select(external_wp_coreData_["store"]); + + const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); + + return { + isDirty: dirtyEntityRecords.length > 0, + isSaving: Object(external_lodash_["some"])(dirtyEntityRecords, record => isSavingEntityRecord(record.kind, record.name, record.key)) + }; + }, []); + const disabled = !isDirty || isSaving; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + variant: "primary", + className: "edit-site-save-button__button", + "aria-disabled": disabled, + "aria-expanded": isEntitiesSavedStatesOpen, + disabled: disabled, + isBusy: isSaving, + onClick: disabled ? undefined : openEntitiesSavedStates + }, Object(external_wp_i18n_["__"])('Save'))); +} + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/undo.js +var library_undo = __webpack_require__("Ntru"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/redo.js +var library_redo = __webpack_require__("K2cm"); + +// EXTERNAL MODULE: external ["wp","keycodes"] +var external_wp_keycodes_ = __webpack_require__("RxS6"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/undo-redo/undo.js + + +/** + * WordPress dependencies + */ + + + + + + +function UndoButton() { + const hasUndo = Object(external_wp_data_["useSelect"])(select => select(external_wp_coreData_["store"]).hasUndo(), []); + const { + undo + } = Object(external_wp_data_["useDispatch"])(external_wp_coreData_["store"]); + return Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + icon: !Object(external_wp_i18n_["isRTL"])() ? library_undo["a" /* default */] : library_redo["a" /* default */], + label: Object(external_wp_i18n_["__"])('Undo'), + shortcut: external_wp_keycodes_["displayShortcut"].primary('z') // If there are no undo levels we don't want to actually disable this + // button, because it will remove focus for keyboard users. + // See: https://github.com/WordPress/gutenberg/issues/3486 + , + "aria-disabled": !hasUndo, + onClick: hasUndo ? undo : undefined + }); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/undo-redo/redo.js + + +/** + * WordPress dependencies + */ + + + + + + +function RedoButton() { + const hasRedo = Object(external_wp_data_["useSelect"])(select => select(external_wp_coreData_["store"]).hasRedo(), []); + const { + redo + } = Object(external_wp_data_["useDispatch"])(external_wp_coreData_["store"]); + return Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + icon: !Object(external_wp_i18n_["isRTL"])() ? library_redo["a" /* default */] : library_undo["a" /* default */], + label: Object(external_wp_i18n_["__"])('Redo'), + shortcut: external_wp_keycodes_["displayShortcut"].primaryShift('z') // If there are no undo levels we don't want to actually disable this + // button, because it will remove focus for keyboard users. + // See: https://github.com/WordPress/gutenberg/issues/3486 + , + "aria-disabled": !hasRedo, + onClick: hasRedo ? redo : undefined + }); +} + +// EXTERNAL MODULE: ./node_modules/classnames/index.js +var classnames = __webpack_require__("TSYQ"); +var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js +var chevron_down = __webpack_require__("NWDH"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/document-actions/index.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + + + + + + +function getBlockDisplayText(block) { + if (block) { + const blockType = Object(external_wp_blocks_["getBlockType"])(block.name); + return blockType ? Object(external_wp_blocks_["__experimentalGetBlockLabel"])(blockType, block.attributes) : null; + } + + return null; +} + +function useSecondaryText() { + const { + getBlock + } = Object(external_wp_data_["useSelect"])(external_wp_blockEditor_["store"]); + const activeEntityBlockId = Object(external_wp_data_["useSelect"])(select => select(external_wp_blockEditor_["store"]).__experimentalGetActiveBlockIdByBlockNames(['core/template-part']), []); + + if (activeEntityBlockId) { + return { + label: getBlockDisplayText(getBlock(activeEntityBlockId)), + isActive: true + }; + } + + return {}; +} +/** + * @param {Object} props Props for the DocumentActions component. + * @param {string} props.entityTitle The title to display. + * @param {string} props.entityLabel A label to use for entity-related options. + * E.g. "template" would be used for "edit + * template" and "show template details". + * @param {boolean} props.isLoaded Whether the data is available. + * @param {Function} props.children React component to use for the + * information dropdown area. Should be a + * function which accepts dropdown props. + */ + + +function DocumentActions({ + entityTitle, + entityLabel, + isLoaded, + children: dropdownContent +}) { + const { + label + } = useSecondaryText(); // The title ref is passed to the popover as the anchorRef so that the + // dropdown is centered over the whole title area rather than just one + // part of it. + + const titleRef = Object(external_wp_element_["useRef"])(); // Return a simple loading indicator until we have information to show. + + if (!isLoaded) { + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-document-actions" + }, Object(external_wp_i18n_["__"])('Loading…')); + } // Return feedback that the template does not seem to exist. + + + if (!entityTitle) { + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-document-actions" + }, Object(external_wp_i18n_["__"])('Template not found')); + } + + return Object(external_wp_element_["createElement"])("div", { + className: classnames_default()('edit-site-document-actions', { + 'has-secondary-label': !!label + }) + }, Object(external_wp_element_["createElement"])("div", { + ref: titleRef, + className: "edit-site-document-actions__title-wrapper" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalText"], { + size: "body", + className: "edit-site-document-actions__title-prefix" + }, Object(external_wp_element_["createElement"])(external_wp_components_["VisuallyHidden"], { + as: "span" + }, Object(external_wp_i18n_["sprintf"])( + /* translators: %s: the entity being edited, like "template"*/ + Object(external_wp_i18n_["__"])('Editing %s:'), entityLabel))), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalText"], { + size: "body", + className: "edit-site-document-actions__title", + as: "h1" + }, entityTitle), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalText"], { + size: "body", + className: "edit-site-document-actions__secondary-item" + }, label !== null && label !== void 0 ? label : ''), dropdownContent && Object(external_wp_element_["createElement"])(external_wp_components_["Dropdown"], { + popoverProps: { + anchorRef: titleRef.current + }, + position: "bottom center", + renderToggle: ({ + isOpen, + onToggle + }) => Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-document-actions__get-info", + icon: chevron_down["a" /* default */], + "aria-expanded": isOpen, + "aria-haspopup": "true", + onClick: onToggle, + label: Object(external_wp_i18n_["sprintf"])( + /* translators: %s: the entity to see details about, like "template"*/ + Object(external_wp_i18n_["__"])('Show %s details'), entityLabel) + }), + contentClassName: "edit-site-document-actions__info-dropdown", + renderContent: dropdownContent + }))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/template-details/template-areas.js + + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + + + + +function TemplatePartItemMore({ + onClose, + templatePart, + closeTemplateDetailsDropdown +}) { + var _templatePart$title; + + const { + pushTemplatePart, + revertTemplate + } = Object(external_wp_data_["useDispatch"])(store); + + function editTemplatePart() { + pushTemplatePart(templatePart.id); + onClose(); + closeTemplateDetailsDropdown(); + } + + function clearCustomizations() { + revertTemplate(templatePart); + onClose(); + closeTemplateDetailsDropdown(); + } + + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + onClick: editTemplatePart + }, Object(external_wp_i18n_["sprintf"])( + /* translators: %s: template part title */ + Object(external_wp_i18n_["__"])('Edit %s'), (_templatePart$title = templatePart.title) === null || _templatePart$title === void 0 ? void 0 : _templatePart$title.rendered))), isTemplateRevertable(templatePart) && Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + info: Object(external_wp_i18n_["__"])('Restore template to theme default'), + onClick: clearCustomizations + }, Object(external_wp_i18n_["__"])('Clear customizations')))); +} + +function TemplatePartItem({ + templatePart, + clientId, + closeTemplateDetailsDropdown +}) { + const { + selectBlock, + toggleBlockHighlight + } = Object(external_wp_data_["useDispatch"])(external_wp_blockEditor_["store"]); + + const highlightBlock = () => toggleBlockHighlight(clientId, true); + + const cancelHighlightBlock = () => toggleBlockHighlight(clientId, false); + + return Object(external_wp_element_["createElement"])("div", { + role: "menuitem", + className: "edit-site-template-details__template-areas-item" + }, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + role: "button", + icon: Object(external_wp_editor_["getTemplatePartIcon"])(templatePart.area), + iconPosition: "left", + onClick: () => { + selectBlock(clientId); + }, + onMouseOver: highlightBlock, + onMouseLeave: cancelHighlightBlock, + onFocus: highlightBlock, + onBlur: cancelHighlightBlock + }, TEMPLATE_PART_AREA_TO_NAME[templatePart.area]), Object(external_wp_element_["createElement"])(external_wp_components_["DropdownMenu"], { + icon: more_vertical["a" /* default */], + label: Object(external_wp_i18n_["__"])('More options'), + className: "edit-site-template-details__template-areas-item-more" + }, ({ + onClose + }) => Object(external_wp_element_["createElement"])(TemplatePartItemMore, { + onClose: onClose, + templatePart: templatePart, + closeTemplateDetailsDropdown: closeTemplateDetailsDropdown + }))); +} + +function TemplateAreas({ + closeTemplateDetailsDropdown +}) { + const templateParts = Object(external_wp_data_["useSelect"])(select => select(store).getCurrentTemplateTemplateParts(), []); + + if (!templateParts.length) { + return null; + } + + return Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], { + label: Object(external_wp_i18n_["__"])('Areas'), + className: "edit-site-template-details__group edit-site-template-details__template-areas" + }, templateParts.map(({ + templatePart, + block + }) => Object(external_wp_element_["createElement"])(TemplatePartItem, { + key: templatePart.slug, + clientId: block.clientId, + templatePart: templatePart, + closeTemplateDetailsDropdown: closeTemplateDetailsDropdown + }))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/template-details/index.js + + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + + + + +function TemplateDetails({ + template, + onClose +}) { + const { + title, + description + } = Object(external_wp_data_["useSelect"])(select => select(external_wp_editor_["store"]).__experimentalGetTemplateInfo(template), []); + const { + revertTemplate + } = Object(external_wp_data_["useDispatch"])(store); + const templateSubMenu = Object(external_wp_element_["useMemo"])(() => { + if ((template === null || template === void 0 ? void 0 : template.type) === 'wp_template') { + return { + title: Object(external_wp_i18n_["__"])('templates'), + menu: MENU_TEMPLATES + }; + } + + return TEMPLATE_PARTS_SUB_MENUS.find(({ + area + }) => area === (template === null || template === void 0 ? void 0 : template.area)); + }, [template]); + + if (!template) { + return null; + } + + const revert = () => { + revertTemplate(template); + onClose(); + }; + + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-template-details" + }, Object(external_wp_element_["createElement"])("div", { + className: "edit-site-template-details__group" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHeading"], { + level: 4, + weight: 600, + className: "edit-site-template-details__title" + }, title), description && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalText"], { + size: "body", + className: "edit-site-template-details__description", + as: "p" + }, description)), Object(external_wp_element_["createElement"])(TemplateAreas, { + closeTemplateDetailsDropdown: onClose + }), isTemplateRevertable(template) && Object(external_wp_element_["createElement"])(external_wp_components_["MenuGroup"], { + className: "edit-site-template-details__group edit-site-template-details__revert" + }, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + className: "edit-site-template-details__revert-button", + info: Object(external_wp_i18n_["__"])('Restore template to theme default'), + onClick: revert + }, Object(external_wp_i18n_["__"])('Clear customizations'))), Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-template-details__show-all-button", + href: Object(external_wp_url_["addQueryArgs"])('edit.php', { + // TODO: We should update this to filter by template part's areas as well. + post_type: template.type + }) + }, Object(external_wp_i18n_["sprintf"])( + /* translators: the template part's area name ("Headers", "Sidebars") or "templates". */ + Object(external_wp_i18n_["__"])('Browse all %s'), templateSubMenu.title))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/header/index.js + + +/** + * WordPress dependencies + */ + + + + + + + + + + + +/** + * Internal dependencies + */ + + + + + + + + + + +const preventDefault = event => { + event.preventDefault(); +}; + +function Header({ + openEntitiesSavedStates, + isEntitiesSavedStatesOpen +}) { + const inserterButton = Object(external_wp_element_["useRef"])(); + const { + deviceType, + entityTitle, + template, + templateType, + isInserterOpen, + isListViewOpen, + listViewShortcut, + isLoaded + } = Object(external_wp_data_["useSelect"])(select => { + const { + __experimentalGetPreviewDeviceType, + getEditedPostType, + getEditedPostId, + isInserterOpened, + isListViewOpened + } = select(store); + const { + getEditedEntityRecord + } = select(external_wp_coreData_["store"]); + const { + __experimentalGetTemplateInfo: getTemplateInfo + } = select(external_wp_editor_["store"]); + const { + getShortcutRepresentation + } = select(external_wp_keyboardShortcuts_["store"]); + const postType = getEditedPostType(); + const postId = getEditedPostId(); + const record = getEditedEntityRecord('postType', postType, postId); + + const _isLoaded = !!postId; + + return { + deviceType: __experimentalGetPreviewDeviceType(), + entityTitle: getTemplateInfo(record).title, + isLoaded: _isLoaded, + template: record, + templateType: postType, + isInserterOpen: isInserterOpened(), + isListViewOpen: isListViewOpened(), + listViewShortcut: getShortcutRepresentation('core/edit-site/toggle-list-view') + }; + }, []); + const { + __experimentalSetPreviewDeviceType: setPreviewDeviceType, + setIsInserterOpened, + setIsListViewOpened + } = Object(external_wp_data_["useDispatch"])(store); + const isLargeViewport = Object(external_wp_compose_["useViewportMatch"])('medium'); + const openInserter = Object(external_wp_element_["useCallback"])(() => { + if (isInserterOpen) { + // Focusing the inserter button closes the inserter popover + inserterButton.current.focus(); + } else { + setIsInserterOpened(true); + } + }, [isInserterOpen, setIsInserterOpened]); + const toggleListView = Object(external_wp_element_["useCallback"])(() => setIsListViewOpened(!isListViewOpen), [setIsListViewOpened, isListViewOpen]); + const isFocusMode = templateType === 'wp_template_part'; + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header" + }, Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header_start" + }, Object(external_wp_element_["createElement"])(navigation_link, null), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header__toolbar" + }, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + ref: inserterButton, + variant: "primary", + isPressed: isInserterOpen, + className: "edit-site-header-toolbar__inserter-toggle", + onMouseDown: preventDefault, + onClick: openInserter, + icon: plus["a" /* default */], + label: Object(external_wp_i18n_["_x"])('Toggle block inserter', 'Generic label for block inserter button') + }), isLargeViewport && Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_blockEditor_["ToolSelector"], null), Object(external_wp_element_["createElement"])(UndoButton, null), Object(external_wp_element_["createElement"])(RedoButton, null), Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-header-toolbar__list-view-toggle", + icon: list_view["a" /* default */], + isPressed: isListViewOpen + /* translators: button label text should, if possible, be under 16 characters. */ + , + label: Object(external_wp_i18n_["__"])('List View'), + onClick: toggleListView, + shortcut: listViewShortcut + })))), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header_center" + }, Object(external_wp_element_["createElement"])(DocumentActions, { + entityTitle: entityTitle, + entityLabel: templateType === 'wp_template_part' ? 'template part' : 'template', + isLoaded: isLoaded + }, ({ + onClose + }) => Object(external_wp_element_["createElement"])(TemplateDetails, { + template: template, + onClose: onClose + }))), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header_end" + }, Object(external_wp_element_["createElement"])("div", { + className: "edit-site-header__actions" + }, !isFocusMode && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalPreviewOptions"], { + deviceType: deviceType, + setDeviceType: setPreviewDeviceType + }), Object(external_wp_element_["createElement"])(SaveButton, { + openEntitiesSavedStates: openEntitiesSavedStates, + isEntitiesSavedStatesOpen: isEntitiesSavedStatesOpen + }), Object(external_wp_element_["createElement"])(build_module["h" /* PinnedItems */].Slot, { + scope: "core/edit-site" + }), Object(external_wp_element_["createElement"])(more_menu, null)))); +} + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/cog.js +var cog = __webpack_require__("Cg8A"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/default-sidebar.js + + +/** + * WordPress dependencies + */ + +function DefaultSidebar({ + className, + identifier, + title, + icon, + children, + closeLabel, + header, + headerClassName +}) { + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(build_module["b" /* ComplementaryArea */], { + className: className, + scope: "core/edit-site", + identifier: identifier, + title: title, + icon: icon, + closeLabel: closeLabel, + header: header, + headerClassName: headerClassName + }, children), Object(external_wp_element_["createElement"])(build_module["c" /* ComplementaryAreaMoreMenuItem */], { + scope: "core/edit-site", + identifier: identifier, + icon: icon + }, title)); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/styles.js + + +/** + * WordPress dependencies + */ + +const styles_styles = Object(external_wp_element_["createElement"])(external_wp_primitives_["SVG"], { + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" +}, Object(external_wp_element_["createElement"])(external_wp_primitives_["Path"], { + d: "M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z" +})); +/* harmony default export */ var library_styles = (styles_styles); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/utils.js +/** + * External dependencies + */ + +/* Supporting data */ + +const ROOT_BLOCK_NAME = 'root'; +const ROOT_BLOCK_SELECTOR = 'body'; +const ROOT_BLOCK_SUPPORTS = ['background', 'backgroundColor', 'color', 'linkColor', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textDecoration', 'textTransform', 'padding']; +const PRESET_METADATA = [{ + path: ['color', 'palette'], + valueKey: 'color', + cssVarInfix: 'color', + classes: [{ + classSuffix: 'color', + propertyName: 'color' + }, { + classSuffix: 'background-color', + propertyName: 'background-color' + }, { + classSuffix: 'border-color', + propertyName: 'border-color' + }] +}, { + path: ['color', 'gradients'], + valueKey: 'gradient', + cssVarInfix: 'gradient', + classes: [{ + classSuffix: 'gradient-background', + propertyName: 'background' + }] +}, { + path: ['typography', 'fontSizes'], + valueKey: 'size', + cssVarInfix: 'font-size', + classes: [{ + classSuffix: 'font-size', + propertyName: 'font-size' + }] +}, { + path: ['typography', 'fontFamilies'], + valueKey: 'fontFamily', + cssVarInfix: 'font-family', + classes: [{ + classSuffix: 'font-family', + propertyName: 'font-family' + }] +}]; +const STYLE_PATH_TO_CSS_VAR_INFIX = { + 'color.background': 'color', + 'color.text': 'color', + 'elements.link.color.text': 'color', + 'color.gradient': 'gradient', + 'typography.fontSize': 'font-size', + 'typography.fontFamily': 'font-family' +}; + +function findInPresetsBy(features, blockName, presetPath, presetProperty, presetValueValue) { + // Block presets take priority above root level presets. + const orderedPresetsByOrigin = [Object(external_lodash_["get"])(features, ['blocks', blockName, ...presetPath]), Object(external_lodash_["get"])(features, presetPath)]; + + for (const presetByOrigin of orderedPresetsByOrigin) { + if (presetByOrigin) { + // Preset origins ordered by priority. + const origins = ['user', 'theme', 'core']; + + for (const origin of origins) { + const presets = presetByOrigin[origin]; + + if (presets) { + const presetObject = Object(external_lodash_["find"])(presets, preset => preset[presetProperty] === presetValueValue); + + if (presetObject) { + if (presetProperty === 'slug') { + return presetObject; + } // if there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored. + + + const highestPresetObjectWithSameSlug = findInPresetsBy(features, blockName, presetPath, 'slug', presetObject.slug); + + if (highestPresetObjectWithSameSlug[presetProperty] === presetObject[presetProperty]) { + return presetObject; + } + + return undefined; + } + } + } + } + } +} + +function getPresetVariableFromValue(features, blockName, variableStylePath, presetPropertyValue) { + if (!presetPropertyValue) { + return presetPropertyValue; + } + + const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[variableStylePath]; + const metadata = Object(external_lodash_["find"])(PRESET_METADATA, ['cssVarInfix', cssVarInfix]); + + if (!metadata) { + // The property doesn't have preset data + // so the value should be returned as it is. + return presetPropertyValue; + } + + const { + valueKey, + path + } = metadata; + const presetObject = findInPresetsBy(features, blockName, path, valueKey, presetPropertyValue); + + if (!presetObject) { + // Value wasn't found in the presets, + // so it must be a custom value. + return presetPropertyValue; + } + + return `var:preset|${cssVarInfix}|${presetObject.slug}`; +} + +function getValueFromPresetVariable(features, blockName, variable, [presetType, slug]) { + const metadata = Object(external_lodash_["find"])(PRESET_METADATA, ['cssVarInfix', presetType]); + + if (!metadata) { + return variable; + } + + const presetObject = findInPresetsBy(features, blockName, metadata.path, 'slug', slug); + + if (presetObject) { + const { + valueKey + } = metadata; + const result = presetObject[valueKey]; + return getValueFromVariable(features, blockName, result); + } + + return variable; +} + +function getValueFromCustomVariable(features, blockName, variable, path) { + var _get; + + const result = (_get = Object(external_lodash_["get"])(features, ['blocks', blockName, 'custom', ...path])) !== null && _get !== void 0 ? _get : Object(external_lodash_["get"])(features, ['custom', ...path]); + + if (!result) { + return variable; + } // A variable may reference another variable so we need recursion until we find the value. + + + return getValueFromVariable(features, blockName, result); +} + +function getValueFromVariable(features, blockName, variable) { + if (!variable || !Object(external_lodash_["isString"])(variable)) { + return variable; + } + + const USER_VALUE_PREFIX = 'var:'; + const THEME_VALUE_PREFIX = 'var(--wp--'; + const THEME_VALUE_SUFFIX = ')'; + let parsedVar; + + if (variable.startsWith(USER_VALUE_PREFIX)) { + parsedVar = variable.slice(USER_VALUE_PREFIX.length).split('|'); + } else if (variable.startsWith(THEME_VALUE_PREFIX) && variable.endsWith(THEME_VALUE_SUFFIX)) { + parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split('--'); + } else { + // We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )` + return variable; + } + + const [type, ...path] = parsedVar; + + if (type === 'preset') { + return getValueFromPresetVariable(features, blockName, variable, path); + } + + if (type === 'custom') { + return getValueFromCustomVariable(features, blockName, variable, path); + } + + return variable; +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/context.js +/** + * WordPress dependencies + */ + +const DEFAULT_GLOBAL_STYLES_CONTEXT = { + user: {}, + base: {}, + merged: {}, + setUserConfig: () => {} +}; +const GlobalStylesContext = Object(external_wp_element_["createContext"])(DEFAULT_GLOBAL_STYLES_CONTEXT); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/hooks.js +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + +/** + * Internal dependencies + */ + + + +const EMPTY_CONFIG = { + isGlobalStylesUserThemeJSON: true, + version: 1 +}; +const useGlobalStylesReset = () => { + const { + user: config, + setUserConfig + } = Object(external_wp_element_["useContext"])(GlobalStylesContext); + const canReset = !!config && !Object(external_lodash_["isEqual"])(config, EMPTY_CONFIG); + return [canReset, Object(external_wp_element_["useCallback"])(() => setUserConfig(() => EMPTY_CONFIG), [setUserConfig])]; +}; +function useSetting(path, blockName, source = 'all') { + var _getSettingValueForCo; + + const { + merged: mergedConfig, + base: baseConfig, + user: userConfig, + setUserConfig + } = Object(external_wp_element_["useContext"])(GlobalStylesContext); + const fullPath = !blockName ? `settings.${path}` : `settings.blocks.${blockName}.${path}`; + + const setSetting = newValue => { + setUserConfig(currentConfig => { + const newUserConfig = Object(external_lodash_["cloneDeep"])(currentConfig); + const pathToSet = external_wp_blocks_["__EXPERIMENTAL_PATHS_WITH_MERGE"][path] ? fullPath + '.user' : fullPath; + Object(external_lodash_["set"])(newUserConfig, pathToSet, newValue); + return newUserConfig; + }); + }; + + const getSettingValueForContext = name => { + const currentPath = !name ? `settings.${path}` : `settings.blocks.${name}.${path}`; + + const getSettingValue = configToUse => { + const result = Object(external_lodash_["get"])(configToUse, currentPath); + + if (external_wp_blocks_["__EXPERIMENTAL_PATHS_WITH_MERGE"][path]) { + var _ref, _result$user; + + return (_ref = (_result$user = result === null || result === void 0 ? void 0 : result.user) !== null && _result$user !== void 0 ? _result$user : result === null || result === void 0 ? void 0 : result.theme) !== null && _ref !== void 0 ? _ref : result === null || result === void 0 ? void 0 : result.core; + } + + return result; + }; + + let result; + + switch (source) { + case 'all': + result = getSettingValue(mergedConfig); + break; + + case 'user': + result = getSettingValue(userConfig); + break; + + case 'base': + result = getSettingValue(baseConfig); + break; + + default: + throw 'Unsupported source'; + } + + return result; + }; // Unlike styles settings get inherited from top level settings. + + + const resultWithFallback = (_getSettingValueForCo = getSettingValueForContext(blockName)) !== null && _getSettingValueForCo !== void 0 ? _getSettingValueForCo : getSettingValueForContext(); + return [resultWithFallback, setSetting]; +} +function useStyle(path, blockName, source = 'all') { + var _get; + + const { + merged: mergedConfig, + base: baseConfig, + user: userConfig, + setUserConfig + } = Object(external_wp_element_["useContext"])(GlobalStylesContext); + const finalPath = !blockName ? `styles.${path}` : `styles.blocks.${blockName}.${path}`; + + const setStyle = newValue => { + setUserConfig(currentConfig => { + const newUserConfig = Object(external_lodash_["cloneDeep"])(currentConfig); + Object(external_lodash_["set"])(newUserConfig, finalPath, getPresetVariableFromValue(mergedConfig.settings, blockName, path, newValue)); + return newUserConfig; + }); + }; + + let result; + + switch (source) { + case 'all': + result = getValueFromVariable(mergedConfig.settings, blockName, (_get = Object(external_lodash_["get"])(userConfig, finalPath)) !== null && _get !== void 0 ? _get : Object(external_lodash_["get"])(baseConfig, finalPath)); + break; + + case 'user': + result = getValueFromVariable(mergedConfig.settings, blockName, Object(external_lodash_["get"])(userConfig, finalPath)); + break; + + case 'base': + result = getValueFromVariable(baseConfig.settings, blockName, Object(external_lodash_["get"])(baseConfig, finalPath)); + break; + + default: + throw 'Unsupported source'; + } + + return [result, setStyle]; +} +const hooks_ROOT_BLOCK_SUPPORTS = ['background', 'backgroundColor', 'color', 'linkColor', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textDecoration', 'textTransform', 'padding']; +function getSupportedGlobalStylesPanels(name) { + if (!name) { + return hooks_ROOT_BLOCK_SUPPORTS; + } + + const blockType = Object(external_wp_blocks_["getBlockType"])(name); + + if (!blockType) { + return []; + } + + const supportKeys = []; + Object.keys(external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"]).forEach(styleName => { + if (!external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"][styleName].support) { + return; + } // Opting out means that, for certain support keys like background color, + // blocks have to explicitly set the support value false. If the key is + // unset, we still enable it. + + + if (external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"][styleName].requiresOptOut) { + if (Object(external_lodash_["has"])(blockType.supports, external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"][styleName].support[0]) && Object(external_lodash_["get"])(blockType.supports, external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"][styleName].support) !== false) { + return supportKeys.push(styleName); + } + } + + if (Object(external_lodash_["get"])(blockType.supports, external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"][styleName].support, false)) { + return supportKeys.push(styleName); + } + }); + return supportKeys; +} +function useColorsPerOrigin(name) { + const [userColors] = useSetting('color.palette.user', name); + const [themeColors] = useSetting('color.palette.theme', name); + const [coreColors] = useSetting('color.palette.core', name); + return Object(external_wp_element_["useMemo"])(() => { + const result = []; + + if (coreColors && coreColors.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('Core'), + colors: coreColors + }); + } + + if (themeColors && themeColors.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('Theme'), + colors: themeColors + }); + } + + if (userColors && userColors.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('User'), + colors: userColors + }); + } + + return result; + }, [userColors, themeColors, coreColors]); +} +function useGradientsPerOrigin(name) { + const [userGradients] = useSetting('color.gradients.user', name); + const [themeGradients] = useSetting('color.gradients.theme', name); + const [coreGradients] = useSetting('color.gradients.core', name); + return Object(external_wp_element_["useMemo"])(() => { + const result = []; + + if (coreGradients && coreGradients.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('Core'), + gradients: coreGradients + }); + } + + if (themeGradients && themeGradients.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('Theme'), + gradients: themeGradients + }); + } + + if (userGradients && userGradients.length) { + result.push({ + name: Object(external_wp_i18n_["__"])('User'), + gradients: userGradients + }); + } + + return result; + }, [userGradients, themeGradients, coreGradients]); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/preview.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + +const StylesPreview = () => { + const [fontFamily = 'serif'] = useStyle('typography.fontFamily'); + const [textColor = 'black'] = useStyle('color.text'); + const [linkColor = 'blue'] = useStyle('elements.link.color.text'); + const [backgroundColor = 'white'] = useStyle('color.background'); + const [gradientValue] = useStyle('color.gradient'); + return Object(external_wp_element_["createElement"])(external_wp_components_["Card"], { + className: "edit-site-global-styles-preview", + style: { + background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor + } + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + spacing: 5 + }, Object(external_wp_element_["createElement"])("div", { + style: { + fontFamily, + fontSize: '80px', + color: textColor + } + }, "Aa"), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalVStack"], { + spacing: 2 + }, Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + colorValue: textColor + }), Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + colorValue: linkColor + })))); +}; + +/* harmony default export */ var preview = (StylesPreview); + +// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js +var esm_extends = __webpack_require__("wx14"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js +var build_module_icon = __webpack_require__("iClF"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/navigation-button.js + + + +/** + * WordPress dependencies + */ + + + +function NavigationButton({ + path, + icon, + children, + isBack = false, + ...props +}) { + const navigator = Object(external_wp_components_["__experimentalUseNavigator"])(); + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItem"], Object(esm_extends["a" /* default */])({ + onClick: () => navigator.push(path, { + isBack + }) + }, props), icon && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + justify: "flex-start" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(build_module_icon["a" /* default */], { + icon: icon, + size: 24 + })), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, children)), !icon && children); +} + +/* harmony default export */ var navigation_button = (NavigationButton); + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/typography.js + + +/** + * WordPress dependencies + */ + +const typography = Object(external_wp_element_["createElement"])(external_wp_primitives_["SVG"], { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24" +}, Object(external_wp_element_["createElement"])(external_wp_primitives_["Path"], { + d: "M6.9 7L3 17.8h1.7l1-2.8h4.1l1 2.8h1.7L8.6 7H6.9zm-.7 6.6l1.5-4.3 1.5 4.3h-3zM21.6 17c-.1.1-.2.2-.3.2-.1.1-.2.1-.4.1s-.3-.1-.4-.2c-.1-.1-.1-.3-.1-.6V12c0-.5 0-1-.1-1.4-.1-.4-.3-.7-.5-1-.2-.2-.5-.4-.9-.5-.4 0-.8-.1-1.3-.1s-1 .1-1.4.2c-.4.1-.7.3-1 .4-.2.2-.4.3-.6.5-.1.2-.2.4-.2.7 0 .3.1.5.2.8.2.2.4.3.8.3.3 0 .6-.1.8-.3.2-.2.3-.4.3-.7 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.6-.4.2-.2.4-.3.7-.4.3-.1.6-.1.8-.1.3 0 .6 0 .8.1.2.1.4.3.5.5.1.2.2.5.2.9v1.1c0 .3-.1.5-.3.6-.2.2-.5.3-.9.4-.3.1-.7.3-1.1.4-.4.1-.8.3-1.1.5-.3.2-.6.4-.8.7-.2.3-.3.7-.3 1.2 0 .6.2 1.1.5 1.4.3.4.9.5 1.6.5.5 0 1-.1 1.4-.3.4-.2.8-.6 1.1-1.1 0 .4.1.7.3 1 .2.3.6.4 1.2.4.4 0 .7-.1.9-.2.2-.1.5-.3.7-.4h-.3zm-3-.9c-.2.4-.5.7-.8.8-.3.2-.6.2-.8.2-.4 0-.6-.1-.9-.3-.2-.2-.3-.6-.3-1.1 0-.5.1-.9.3-1.2s.5-.5.8-.7c.3-.2.7-.3 1-.5.3-.1.6-.3.7-.6v3.4z" +})); +/* harmony default export */ var library_typography = (typography); + +// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/color.js + + +/** + * WordPress dependencies + */ + +const color_color = Object(external_wp_element_["createElement"])(external_wp_primitives_["SVG"], { + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" +}, Object(external_wp_element_["createElement"])(external_wp_primitives_["Path"], { + d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3zm-5.1 7.6c-2.5 0-4.6-2.1-4.6-4.6 0-.3.1-1 .8-2.3.5-.9 1.1-1.9 2-3.1.7-.9 1.3-1.7 1.8-2.3.7.8 1.3 1.6 1.8 2.3.8 1.1 1.5 2.2 2 3.1.7 1.3.8 2 .8 2.3 0 2.5-2.1 4.6-4.6 4.6z" +})); +/* harmony default export */ var library_color = (color_color); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/layout.js +var layout = __webpack_require__("Civd"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/border-panel.js + + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + +const MIN_BORDER_WIDTH = 0; // Defining empty array here instead of inline avoids unnecessary re-renders of +// color control. + +const EMPTY_ARRAY = []; +function useHasBorderPanel(name) { + const controls = [useHasBorderColorControl(name), useHasBorderRadiusControl(name), useHasBorderStyleControl(name), useHasBorderWidthControl(name)]; + return controls.some(Boolean); +} + +function useHasBorderColorControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('border.color', name)[0] && supports.includes('borderColor'); +} + +function useHasBorderRadiusControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('border.radius', name)[0] && supports.includes('borderRadius'); +} + +function useHasBorderStyleControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('border.style', name)[0] && supports.includes('borderStyle'); +} + +function useHasBorderWidthControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('border.width', name)[0] && supports.includes('borderWidth'); +} + +function BorderPanel({ + name +}) { + const units = Object(external_wp_components_["__experimentalUseCustomUnits"])({ + availableUnits: useSetting('spacing.units')[0] || ['px', 'em', 'rem'] + }); // Border width. + + const hasBorderWidth = useHasBorderWidthControl(name); + const [borderWidthValue, setBorderWidth] = useStyle('border.width', name); // Border style. + + const hasBorderStyle = useHasBorderStyleControl(name); + const [borderStyle, setBorderStyle] = useStyle('border.style', name); // Border color. + + const [colors = EMPTY_ARRAY] = useSetting('color.palette'); + const disableCustomColors = !useSetting('color.custom')[0]; + const disableCustomGradients = !useSetting('color.customGradient')[0]; + const hasBorderColor = useHasBorderColorControl(name); + const [borderColor, setBorderColor] = useStyle('border.color', name); // Border radius. + + const hasBorderRadius = useHasBorderRadiusControl(name); + const [borderRadiusValues, setBorderRadius] = useStyle('border.radius', name); + return Object(external_wp_element_["createElement"])(external_wp_components_["PanelBody"], { + title: Object(external_wp_i18n_["__"])('Border'), + initialOpen: true + }, (hasBorderWidth || hasBorderStyle) && Object(external_wp_element_["createElement"])("div", { + className: "edit-site-global-styles-sidebar__border-controls-row" + }, hasBorderWidth && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalUnitControl"], { + value: borderWidthValue, + label: Object(external_wp_i18n_["__"])('Width'), + min: MIN_BORDER_WIDTH, + onChange: value => { + setBorderWidth(value || undefined); + }, + units: units + }), hasBorderStyle && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalBorderStyleControl"], { + value: borderStyle, + onChange: setBorderStyle + })), hasBorderColor && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalColorGradientControl"], { + label: Object(external_wp_i18n_["__"])('Color'), + colorValue: borderColor, + colors: colors, + gradients: undefined, + disableCustomColors: disableCustomColors, + disableCustomGradients: disableCustomGradients, + onColorChange: setBorderColor + }), hasBorderRadius && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalBorderRadiusControl"], { + values: borderRadiusValues, + onChange: setBorderRadius + })); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/color-utils.js +/** + * Internal dependencies + */ + +function useHasColorPanel(name) { + const supports = getSupportedGlobalStylesPanels(name); + return supports.includes('color') || supports.includes('backgroundColor') || supports.includes('background') || supports.includes('linkColor'); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/dimensions-panel.js + + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + +const AXIAL_SIDES = ['horizontal', 'vertical']; +function useHasDimensionsPanel(name) { + const hasPadding = useHasPadding(name); + const hasMargin = useHasMargin(name); + const hasGap = useHasGap(name); + return hasPadding || hasMargin || hasGap; +} + +function useHasPadding(name) { + const supports = getSupportedGlobalStylesPanels(name); + const [settings] = useSetting('spacing.padding', name); + return settings && supports.includes('padding'); +} + +function useHasMargin(name) { + const supports = getSupportedGlobalStylesPanels(name); + const [settings] = useSetting('spacing.margin', name); + return settings && supports.includes('margin'); +} + +function useHasGap(name) { + const supports = getSupportedGlobalStylesPanels(name); + const [settings] = useSetting('spacing.blockGap', name); + return settings && supports.includes('--wp--style--block-gap'); +} + +function filterValuesBySides(values, sides) { + if (!sides) { + // If no custom side configuration all sides are opted into by default. + return values; + } // Only include sides opted into within filtered values. + + + const filteredValues = {}; + sides.forEach(side => { + if (side === 'vertical') { + filteredValues.top = values.top; + filteredValues.bottom = values.bottom; + } + + if (side === 'horizontal') { + filteredValues.left = values.left; + filteredValues.right = values.right; + } + + filteredValues[side] = values[side]; + }); + return filteredValues; +} + +function splitStyleValue(value) { + // Check for shorthand value ( a string value ). + if (value && typeof value === 'string') { + // Convert to value for individual sides for BoxControl. + return { + top: value, + right: value, + bottom: value, + left: value + }; + } + + return value; +} + +function DimensionsPanel({ + name +}) { + const showPaddingControl = useHasPadding(name); + const showMarginControl = useHasMargin(name); + const showGapControl = useHasGap(name); + const units = Object(external_wp_components_["__experimentalUseCustomUnits"])({ + availableUnits: useSetting('spacing.units', name)[0] || ['%', 'px', 'em', 'rem', 'vw'] + }); + const [rawPadding, setRawPadding] = useStyle('spacing.padding', name); + const paddingValues = splitStyleValue(rawPadding); + const paddingSides = Object(external_wp_blockEditor_["__experimentalUseCustomSides"])(name, 'padding'); + const isAxialPadding = paddingSides && paddingSides.some(side => AXIAL_SIDES.includes(side)); + + const setPaddingValues = newPaddingValues => { + const padding = filterValuesBySides(newPaddingValues, paddingSides); + setRawPadding(padding); + }; + + const resetPaddingValue = () => setPaddingValues({}); + + const hasPaddingValue = () => !!paddingValues && Object.keys(paddingValues).length; + + const [rawMargin, setRawMargin] = useStyle('spacing.margin', name); + const marginValues = splitStyleValue(rawMargin); + const marginSides = Object(external_wp_blockEditor_["__experimentalUseCustomSides"])(name, 'margin'); + const isAxialMargin = marginSides && marginSides.some(side => AXIAL_SIDES.includes(side)); + + const setMarginValues = newMarginValues => { + const margin = filterValuesBySides(newMarginValues, marginSides); + setRawMargin(margin); + }; + + const resetMarginValue = () => setMarginValues({}); + + const hasMarginValue = () => !!marginValues && Object.keys(marginValues).length; + + const [gapValue, setGapValue] = useStyle('spacing.blockGap', name); + + const resetGapValue = () => setGapValue(undefined); + + const hasGapValue = () => !!gapValue; + + const resetAll = () => { + resetPaddingValue(); + resetMarginValue(); + resetGapValue(); + }; + + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalToolsPanel"], { + label: Object(external_wp_i18n_["__"])('Dimensions'), + resetAll: resetAll + }, showPaddingControl && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalToolsPanelItem"], { + hasValue: hasPaddingValue, + label: Object(external_wp_i18n_["__"])('Padding'), + onDeselect: resetPaddingValue, + isShownByDefault: true + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalBoxControl"], { + values: paddingValues, + onChange: setPaddingValues, + label: Object(external_wp_i18n_["__"])('Padding'), + sides: paddingSides, + units: units, + allowReset: false, + splitOnAxis: isAxialPadding + })), showMarginControl && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalToolsPanelItem"], { + hasValue: hasMarginValue, + label: Object(external_wp_i18n_["__"])('Margin'), + onDeselect: resetMarginValue, + isShownByDefault: true + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalBoxControl"], { + values: marginValues, + onChange: setMarginValues, + label: Object(external_wp_i18n_["__"])('Margin'), + sides: marginSides, + units: units, + allowReset: false, + splitOnAxis: isAxialMargin + })), showGapControl && Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalToolsPanelItem"], { + hasValue: hasGapValue, + label: Object(external_wp_i18n_["__"])('Block spacing'), + onDeselect: resetGapValue, + isShownByDefault: true + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalUnitControl"], { + label: Object(external_wp_i18n_["__"])('Block spacing'), + __unstableInputWidth: "80px", + min: 0, + onChange: setGapValue, + units: units, + value: gapValue + }))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/typography-panel.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + +function useHasTypographyPanel(name) { + const hasLineHeight = useHasLineHeightControl(name); + const hasFontAppearance = useHasAppearanceControl(name); + const hasLetterSpacing = useHasLetterSpacingControl(name); + const supports = getSupportedGlobalStylesPanels(name); + return hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes('fontSize'); +} + +function useHasLineHeightControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('typography.lineHeight', name)[0] && supports.includes('lineHeight'); +} + +function useHasAppearanceControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle'); + const hasFontWeights = useSetting('typography.fontWeight', name)[0] && supports.includes('fontWeight'); + return hasFontStyles || hasFontWeights; +} + +function useHasLetterSpacingControl(name) { + const supports = getSupportedGlobalStylesPanels(name); + return useSetting('typography.letterSpacing', name)[0] && supports.includes('letterSpacing'); +} + +function TypographyPanel({ + name +}) { + const supports = getSupportedGlobalStylesPanels(name); + const [fontSizes] = useSetting('typography.fontSizes', name); + const disableCustomFontSizes = !useSetting('typography.customFontSize', name)[0]; + const [fontFamilies] = useSetting('typography.fontFamilies', name); + const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle'); + const hasFontWeights = useSetting('typography.fontWeight', name)[0] && supports.includes('fontWeight'); + const hasLineHeightEnabled = useHasLineHeightControl(name); + const hasAppearanceControl = useHasAppearanceControl(name); + const hasLetterSpacingControl = useHasLetterSpacingControl(name); + const [fontFamily, setFontFamily] = useStyle('typography.fontFamily', name); + const [fontSize, setFontSize] = useStyle('typography.fontSize', name); + const [fontStyle, setFontStyle] = useStyle('typography.fontStyle', name); + const [fontWeight, setFontWeight] = useStyle('typography.fontWeight', name); + const [lineHeight, setLineHeight] = useStyle('typography.lineHeight', name); + const [letterSpacing, setLetterSpacing] = useStyle('typography.letterSpacing', name); + return Object(external_wp_element_["createElement"])(external_wp_components_["PanelBody"], { + className: "edit-site-typography-panel", + initialOpen: true + }, supports.includes('fontFamily') && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalFontFamilyControl"], { + fontFamilies: fontFamilies, + value: fontFamily, + onChange: setFontFamily + }), supports.includes('fontSize') && Object(external_wp_element_["createElement"])(external_wp_components_["FontSizePicker"], { + value: fontSize, + onChange: setFontSize, + fontSizes: fontSizes, + disableCustomFontSizes: disableCustomFontSizes + }), hasLineHeightEnabled && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["LineHeightControl"], { + value: lineHeight, + onChange: setLineHeight + }), hasAppearanceControl && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalFontAppearanceControl"], { + value: { + fontStyle, + fontWeight + }, + onChange: ({ + fontStyle: newFontStyle, + fontWeight: newFontWeight + }) => { + setFontStyle(newFontStyle); + setFontWeight(newFontWeight); + }, + hasFontStyles: hasFontStyles, + hasFontWeights: hasFontWeights + }), hasLetterSpacingControl && Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalLetterSpacingControl"], { + value: letterSpacing, + onChange: setLetterSpacing + })); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/context-menu.js + + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + + + + + + +function ContextMenu({ + name, + parentMenu = '' +}) { + const hasTypographyPanel = useHasTypographyPanel(name); + const hasColorPanel = useHasColorPanel(name); + const hasBorderPanel = useHasBorderPanel(name); + const hasDimensionsPanel = useHasDimensionsPanel(name); + const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel; + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItemGroup"], null, hasTypographyPanel && Object(external_wp_element_["createElement"])(navigation_button, { + icon: library_typography, + path: parentMenu + '/typography' + }, Object(external_wp_i18n_["__"])('Typography')), hasColorPanel && Object(external_wp_element_["createElement"])(navigation_button, { + icon: library_color, + path: parentMenu + '/colors' + }, Object(external_wp_i18n_["__"])('Colors')), hasLayoutPanel && Object(external_wp_element_["createElement"])(navigation_button, { + icon: layout["a" /* default */], + path: parentMenu + '/layout' + }, Object(external_wp_i18n_["__"])('Layout'))); +} + +/* harmony default export */ var context_menu = (ContextMenu); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-root.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + + +function ScreenRoot() { + return Object(external_wp_element_["createElement"])(external_wp_components_["Card"], { + size: "small" + }, Object(external_wp_element_["createElement"])(external_wp_components_["CardBody"], null, Object(external_wp_element_["createElement"])(preview, null)), Object(external_wp_element_["createElement"])(external_wp_components_["CardBody"], null, Object(external_wp_element_["createElement"])(context_menu, null)), Object(external_wp_element_["createElement"])(external_wp_components_["CardDivider"], null), Object(external_wp_element_["createElement"])(external_wp_components_["CardBody"], null, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItemGroup"], null, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItem"], null, Object(external_wp_element_["createElement"])("p", null, Object(external_wp_i18n_["__"])('Customize the appearance of specific blocks for the whole site.'))), Object(external_wp_element_["createElement"])(navigation_button, { + path: "/blocks" + }, Object(external_wp_i18n_["__"])('Blocks'))))); +} + +/* harmony default export */ var screen_root = (ScreenRoot); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js +var chevron_right = __webpack_require__("1iEr"); + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js +var chevron_left = __webpack_require__("2gm7"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/header.js + + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + + +function ScreenHeader({ + back, + title, + description +}) { + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalVStack"], { + spacing: 2 + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + spacing: 2 + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalView"], null, Object(external_wp_element_["createElement"])(navigation_button, { + path: back, + icon: Object(external_wp_element_["createElement"])(build_module_icon["a" /* default */], { + icon: Object(external_wp_i18n_["isRTL"])() ? chevron_right["a" /* default */] : chevron_left["a" /* default */], + variant: "muted" + }), + size: "small", + isBack: true, + "aria-label": Object(external_wp_i18n_["__"])('Navigate to the previous view') + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalSpacer"], null, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHeading"], { + level: 5 + }, title))), description && Object(external_wp_element_["createElement"])("p", { + className: "edit-site-global-styles-header__description" + }, description)); +} + +/* harmony default export */ var global_styles_header = (ScreenHeader); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-block-list.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + + + + + +function BlockMenuItem({ + block +}) { + const hasTypographyPanel = useHasTypographyPanel(block.name); + const hasColorPanel = useHasColorPanel(block.name); + const hasBorderPanel = useHasBorderPanel(block.name); + const hasDimensionsPanel = useHasDimensionsPanel(block.name); + const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel; + const hasBlockMenuItem = hasTypographyPanel || hasColorPanel || hasLayoutPanel; + + if (!hasBlockMenuItem) { + return null; + } + + return Object(external_wp_element_["createElement"])(navigation_button, { + path: '/blocks/' + block.name + }, block.title); +} + +function ScreenBlockList() { + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: "/", + title: Object(external_wp_i18n_["__"])('Blocks'), + description: Object(external_wp_i18n_["__"])('Customize the appearance of specific blocks and for the whole site.') + }), Object(external_wp_blocks_["getBlockTypes"])().map(block => Object(external_wp_element_["createElement"])(BlockMenuItem, { + block: block, + key: 'menu-itemblock-' + block.name + }))); +} + +/* harmony default export */ var screen_block_list = (ScreenBlockList); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-block.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + + +function ScreenBlock({ + name +}) { + const blockType = Object(external_wp_blocks_["getBlockType"])(name); + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: "/blocks", + title: blockType.title + }), Object(external_wp_element_["createElement"])(context_menu, { + parentMenu: '/blocks/' + name, + name: name + })); +} + +/* harmony default export */ var screen_block = (ScreenBlock); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-typography.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + + +function ScreenTypography({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu ? parentMenu : '/', + title: Object(external_wp_i18n_["__"])('Typography'), + description: Object(external_wp_i18n_["__"])('Manage the fonts used on the website and the default aspect of different global elements.') + }), Object(external_wp_element_["createElement"])(TypographyPanel, { + name: name + })); +} + +/* harmony default export */ var screen_typography = (ScreenTypography); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/subtitle.js + + +/** + * WordPress dependencies + */ + + +function Subtitle({ + children +}) { + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHeading"], { + className: "edit-site-global-styles-subtitle", + level: 2 + }, children); +} + +/* harmony default export */ var subtitle = (Subtitle); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/palette.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + +const EMPTY_COLORS = []; + +function Palette({ + name +}) { + const [colorsSetting] = useSetting('color.palette.user', name); + const colors = colorsSetting || EMPTY_COLORS; + const screenPath = !name ? '/colors/palette' : '/blocks/' + name + '/colors/palette'; + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalVStack"], { + spacing: 3 + }, Object(external_wp_element_["createElement"])(subtitle, null, Object(external_wp_i18n_["__"])('Palette')), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItemGroup"], { + isBordered: true, + isSeparated: true + }, Object(external_wp_element_["createElement"])(navigation_button, { + path: screenPath + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], null, Object(external_wp_element_["createElement"])(external_wp_components_["FlexBlock"], null, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalZStack"], { + isLayered: false, + offset: -8 + }, colors.slice(0, 5).map(({ + color + }) => Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + key: color, + colorValue: color + })))), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_i18n_["sprintf"])( // Translators: %d: Number of palette colors. + Object(external_wp_i18n_["_n"])('%d color', '%d colors', colors.length), colors.length)))))); +} + +/* harmony default export */ var palette = (Palette); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-colors.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + + + + +function BackgroundColorItem({ + name, + parentMenu +}) { + const supports = getSupportedGlobalStylesPanels(name); + const hasSupport = supports.includes('backgroundColor') || supports.includes('background'); + const [backgroundColor] = useStyle('color.background', name); + const [gradientValue] = useStyle('color.gradient', name); + + if (!hasSupport) { + return null; + } + + return Object(external_wp_element_["createElement"])(navigation_button, { + path: parentMenu + '/colors/background' + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + justify: "flex-start" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor + })), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_i18n_["__"])('Background')))); +} + +function TextColorItem({ + name, + parentMenu +}) { + const supports = getSupportedGlobalStylesPanels(name); + const hasSupport = supports.includes('color'); + const [color] = useStyle('color.text', name); + + if (!hasSupport) { + return null; + } + + return Object(external_wp_element_["createElement"])(navigation_button, { + path: parentMenu + '/colors/text' + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + justify: "flex-start" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + colorValue: color + })), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_i18n_["__"])('Text')))); +} + +function LinkColorItem({ + name, + parentMenu +}) { + const supports = getSupportedGlobalStylesPanels(name); + const hasSupport = supports.includes('linkColor'); + const [color] = useStyle('elements.link.color.text', name); + + if (!hasSupport) { + return null; + } + + return Object(external_wp_element_["createElement"])(navigation_button, { + path: parentMenu + '/colors/link' + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHStack"], { + justify: "flex-start" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["ColorIndicator"], { + colorValue: color + })), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_i18n_["__"])('Links')))); +} + +function ScreenColors({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu ? parentMenu : '/', + title: Object(external_wp_i18n_["__"])('Colors'), + description: Object(external_wp_i18n_["__"])('Manage palettes and the default color of different global elements on the website.') + }), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-global-styles-screen-colors" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalVStack"], { + spacing: 10 + }, Object(external_wp_element_["createElement"])(palette, { + name: name + }), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalVStack"], { + spacing: 3 + }, Object(external_wp_element_["createElement"])(subtitle, null, Object(external_wp_i18n_["__"])('Elements')), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalItemGroup"], { + isBordered: true, + isSeparated: true + }, Object(external_wp_element_["createElement"])(BackgroundColorItem, { + name: name, + parentMenu: parentMenu + }), Object(external_wp_element_["createElement"])(TextColorItem, { + name: name, + parentMenu: parentMenu + }), Object(external_wp_element_["createElement"])(LinkColorItem, { + name: name, + parentMenu: parentMenu + })))))); +} + +/* harmony default export */ var screen_colors = (ScreenColors); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/color-palette-panel.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + +function ColorPalettePanel({ + name +}) { + const [userColors, setColors] = useSetting('color.palette', name, 'user'); + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-global-styles-color-palette-panel" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalColorEdit"], { + colors: userColors, + onChange: setColors + })); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-color-palette.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + + +function ScreenColorPalette({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu + '/colors', + title: Object(external_wp_i18n_["__"])('Color Palette'), + description: Object(external_wp_i18n_["__"])('Color palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.') + }), Object(external_wp_element_["createElement"])(ColorPalettePanel, { + name: name + })); +} + +/* harmony default export */ var screen_color_palette = (ScreenColorPalette); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-background-color.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + +function ScreenBackgroundColor({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + const supports = getSupportedGlobalStylesPanels(name); + const [solids] = useSetting('color.palette', name); + const [gradients] = useSetting('color.gradients', name); + const [areCustomSolidsEnabled] = useSetting('color.custom', name); + const [areCustomGradientsEnabled] = useSetting('color.customGradient', name); + const colorsPerOrigin = useColorsPerOrigin(name); + const gradientsPerOrigin = useGradientsPerOrigin(name); + const [isBackgroundEnabled] = useSetting('color.background', name); + const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (solids.length > 0 || areCustomSolidsEnabled); + const hasGradientColor = supports.includes('background') && (gradients.length > 0 || areCustomGradientsEnabled); + const [backgroundColor, setBackgroundColor] = useStyle('color.background', name); + const [userBackgroundColor] = useStyle('color.background', name, 'user'); + const [gradient, setGradient] = useStyle('color.gradient', name); + const [userGradient] = useStyle('color.gradient', name, 'user'); + + if (!hasBackgroundColor && !hasGradientColor) { + return null; + } + + const settings = []; + let backgroundSettings = {}; + + if (hasBackgroundColor) { + backgroundSettings = { + colorValue: backgroundColor, + onColorChange: setBackgroundColor + }; + + if (backgroundColor) { + backgroundSettings.clearable = backgroundColor === userBackgroundColor; + } + } + + let gradientSettings = {}; + + if (hasGradientColor) { + gradientSettings = { + gradientValue: gradient, + onGradientChange: setGradient + }; + + if (gradient) { + gradientSettings.clearable = gradient === userGradient; + } + } + + settings.push({ ...backgroundSettings, + ...gradientSettings, + label: Object(external_wp_i18n_["__"])('Background color') + }); + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu + '/colors', + title: Object(external_wp_i18n_["__"])('Background'), + description: Object(external_wp_i18n_["__"])('Set a background color or gradient for the whole website.') + }), Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalPanelColorGradientSettings"], { + title: Object(external_wp_i18n_["__"])('Color'), + settings: settings, + colors: colorsPerOrigin, + gradients: gradientsPerOrigin, + disableCustomColors: !areCustomSolidsEnabled, + disableCustomGradients: !areCustomGradientsEnabled, + __experimentalHasMultipleOrigins: true, + showTitle: false + })); +} + +/* harmony default export */ var screen_background_color = (ScreenBackgroundColor); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-text-color.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + +function ScreenTextColor({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + const supports = getSupportedGlobalStylesPanels(name); + const [solids] = useSetting('color.palette', name); + const [areCustomSolidsEnabled] = useSetting('color.custom', name); + const [isTextEnabled] = useSetting('color.text', name); + const colorsPerOrigin = useColorsPerOrigin(name); + const hasTextColor = supports.includes('color') && isTextEnabled && (solids.length > 0 || areCustomSolidsEnabled); + const [color, setColor] = useStyle('color.text', name); + const [userColor] = useStyle('color.text', name, 'user'); + + if (!hasTextColor) { + return null; + } + + const settings = [{ + colorValue: color, + onColorChange: setColor, + label: Object(external_wp_i18n_["__"])('Text color'), + clearable: color === userColor + }]; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu + '/colors', + title: Object(external_wp_i18n_["__"])('Text'), + description: Object(external_wp_i18n_["__"])('Set the default color used for text across the site.') + }), Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalPanelColorGradientSettings"], { + title: Object(external_wp_i18n_["__"])('Color'), + settings: settings, + colors: colorsPerOrigin, + disableCustomColors: !areCustomSolidsEnabled, + __experimentalHasMultipleOrigins: true, + showTitle: false + })); +} + +/* harmony default export */ var screen_text_color = (ScreenTextColor); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-link-color.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + +function ScreenLinkColor({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + const supports = getSupportedGlobalStylesPanels(name); + const [solids] = useSetting('color.palette', name); + const [areCustomSolidsEnabled] = useSetting('color.custom', name); + const colorsPerOrigin = useColorsPerOrigin(name); + const [isLinkEnabled] = useSetting('color.link', name); + const hasLinkColor = supports.includes('linkColor') && isLinkEnabled && (solids.length > 0 || areCustomSolidsEnabled); + const [linkColor, setLinkColor] = useStyle('elements.link.color.text', name); + const [userLinkColor] = useStyle('elements.link.color.text', name, 'user'); + + if (!hasLinkColor) { + return null; + } + + const settings = [{ + colorValue: linkColor, + onColorChange: setLinkColor, + label: Object(external_wp_i18n_["__"])('Link color'), + clearable: linkColor === userLinkColor + }]; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu + '/colors', + title: Object(external_wp_i18n_["__"])('Links'), + description: Object(external_wp_i18n_["__"])('Set the default color used for links across the site.') + }), Object(external_wp_element_["createElement"])(external_wp_blockEditor_["__experimentalPanelColorGradientSettings"], { + title: Object(external_wp_i18n_["__"])('Color'), + settings: settings, + colors: colorsPerOrigin, + disableCustomColors: !areCustomSolidsEnabled, + __experimentalHasMultipleOrigins: true, + showTitle: false + })); +} + +/* harmony default export */ var screen_link_color = (ScreenLinkColor); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/screen-layout.js + + +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + + + +function ScreenLayout({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + const hasBorderPanel = useHasBorderPanel(name); + const hasDimensionsPanel = useHasDimensionsPanel(name); + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(global_styles_header, { + back: parentMenu ? parentMenu : '/', + title: Object(external_wp_i18n_["__"])('Layout') + }), hasDimensionsPanel && Object(external_wp_element_["createElement"])(DimensionsPanel, { + name: name + }), hasBorderPanel && Object(external_wp_element_["createElement"])(BorderPanel, { + name: name + })); +} + +/* harmony default export */ var screen_layout = (ScreenLayout); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/ui.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + + + + + + + + + + +function ContextScreens({ + name +}) { + const parentMenu = name === undefined ? '' : '/blocks/' + name; + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/typography' + }, Object(external_wp_element_["createElement"])(screen_typography, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/colors' + }, Object(external_wp_element_["createElement"])(screen_colors, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/colors/palette' + }, Object(external_wp_element_["createElement"])(screen_color_palette, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/colors/background' + }, Object(external_wp_element_["createElement"])(screen_background_color, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/colors/text' + }, Object(external_wp_element_["createElement"])(screen_text_color, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/colors/link' + }, Object(external_wp_element_["createElement"])(screen_link_color, { + name: name + })), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: parentMenu + '/layout' + }, Object(external_wp_element_["createElement"])(screen_layout, { + name: name + }))); +} + +function GlobalStylesUI() { + const blocks = Object(external_wp_blocks_["getBlockTypes"])(); + return Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorProvider"], { + initialPath: "/" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: "/" + }, Object(external_wp_element_["createElement"])(screen_root, null)), Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + path: "/blocks" + }, Object(external_wp_element_["createElement"])(screen_block_list, null)), blocks.map(block => Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalNavigatorScreen"], { + key: 'menu-block-' + block.name, + path: '/blocks/' + block.name + }, Object(external_wp_element_["createElement"])(screen_block, { + name: block.name + }))), Object(external_wp_element_["createElement"])(ContextScreens, null), blocks.map(block => Object(external_wp_element_["createElement"])(ContextScreens, { + key: 'screens-block-' + block.name, + name: block.name + }))); +} + +/* harmony default export */ var ui = (GlobalStylesUI); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/use-global-styles-output.js +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + +/** + * Internal dependencies + */ + + + + +function compileStyleValue(uncompiledValue) { + const VARIABLE_REFERENCE_PREFIX = 'var:'; + const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|'; + const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--'; + + if (Object(external_lodash_["startsWith"])(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) { + const variable = uncompiledValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE); + return `var(--wp--${variable})`; + } + + return uncompiledValue; +} +/** + * Transform given preset tree into a set of style declarations. + * + * @param {Object} blockPresets + * + * @return {Array} An array of style declarations. + */ + + +function getPresetsDeclarations(blockPresets = {}) { + return Object(external_lodash_["reduce"])(PRESET_METADATA, (declarations, { + path, + valueKey, + cssVarInfix + }) => { + const presetByOrigin = Object(external_lodash_["get"])(blockPresets, path, []); + ['core', 'theme', 'user'].forEach(origin => { + if (presetByOrigin[origin]) { + presetByOrigin[origin].forEach(value => { + declarations.push(`--wp--preset--${cssVarInfix}--${Object(external_lodash_["kebabCase"])(value.slug)}: ${value[valueKey]}`); + }); + } + }); + return declarations; + }, []); +} +/** + * Transform given preset tree into a set of preset class declarations. + * + * @param {string} blockSelector + * @param {Object} blockPresets + * @return {string} CSS declarations for the preset classes. + */ + + +function getPresetsClasses(blockSelector, blockPresets = {}) { + return Object(external_lodash_["reduce"])(PRESET_METADATA, (declarations, { + path, + cssVarInfix, + classes + }) => { + if (!classes) { + return declarations; + } + + const presetByOrigin = Object(external_lodash_["get"])(blockPresets, path, []); + ['core', 'theme', 'user'].forEach(origin => { + if (presetByOrigin[origin]) { + presetByOrigin[origin].forEach(({ + slug + }) => { + classes.forEach(({ + classSuffix, + propertyName + }) => { + const classSelectorToUse = `.has-${Object(external_lodash_["kebabCase"])(slug)}-${classSuffix}`; + const selectorToUse = blockSelector.split(',') // Selector can be "h1, h2, h3" + .map(selector => `${selector}${classSelectorToUse}`).join(','); + const value = `var(--wp--preset--${cssVarInfix}--${Object(external_lodash_["kebabCase"])(slug)})`; + declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`; + }); + }); + } + }); + return declarations; + }, ''); +} + +function flattenTree(input = {}, prefix, token) { + let result = []; + Object.keys(input).forEach(key => { + const newKey = prefix + Object(external_lodash_["kebabCase"])(key.replace('/', '-')); + const newLeaf = input[key]; + + if (newLeaf instanceof Object) { + const newPrefix = newKey + token; + result = [...result, ...flattenTree(newLeaf, newPrefix, token)]; + } else { + result.push(`${newKey}: ${newLeaf}`); + } + }); + return result; +} +/** + * Transform given style tree into a set of style declarations. + * + * @param {Object} blockStyles Block styles. + * + * @return {Array} An array of style declarations. + */ + + +function getStylesDeclarations(blockStyles = {}) { + return Object(external_lodash_["reduce"])(external_wp_blocks_["__EXPERIMENTAL_STYLE_PROPERTY"], (declarations, { + value, + properties + }, key) => { + const pathToValue = value; + + if (Object(external_lodash_["first"])(pathToValue) === 'elements') { + return declarations; + } + + const styleValue = Object(external_lodash_["get"])(blockStyles, pathToValue); + + if (!!properties && !Object(external_lodash_["isString"])(styleValue)) { + Object.entries(properties).forEach(entry => { + const [name, prop] = entry; + + if (!Object(external_lodash_["get"])(styleValue, [prop], false)) { + // Do not create a declaration + // for sub-properties that don't have any value. + return; + } + + const cssProperty = Object(external_lodash_["kebabCase"])(name); + declarations.push(`${cssProperty}: ${compileStyleValue(Object(external_lodash_["get"])(styleValue, [prop]))}`); + }); + } else if (Object(external_lodash_["get"])(blockStyles, pathToValue, false)) { + const cssProperty = key.startsWith('--') ? key : Object(external_lodash_["kebabCase"])(key); + declarations.push(`${cssProperty}: ${compileStyleValue(Object(external_lodash_["get"])(blockStyles, pathToValue))}`); + } + + return declarations; + }, []); +} + +const getNodesWithStyles = (tree, blockSelectors) => { + var _tree$styles, _tree$styles2; + + const nodes = []; + + if (!(tree !== null && tree !== void 0 && tree.styles)) { + return nodes; + } + + const pickStyleKeys = treeToPickFrom => Object(external_lodash_["pickBy"])(treeToPickFrom, (value, key) => ['border', 'color', 'spacing', 'typography'].includes(key)); // Top-level. + + + const styles = pickStyleKeys(tree.styles); + + if (!!styles) { + nodes.push({ + styles, + selector: ROOT_BLOCK_SELECTOR + }); + } + + Object(external_lodash_["forEach"])((_tree$styles = tree.styles) === null || _tree$styles === void 0 ? void 0 : _tree$styles.elements, (value, key) => { + if (!!value && !!external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"][key]) { + nodes.push({ + styles: value, + selector: external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"][key] + }); + } + }); // Iterate over blocks: they can have styles & elements. + + Object(external_lodash_["forEach"])((_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : _tree$styles2.blocks, (node, blockName) => { + var _blockSelectors$block; + + const blockStyles = pickStyleKeys(node); + + if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) { + nodes.push({ + styles: blockStyles, + selector: blockSelectors[blockName].selector + }); + } + + Object(external_lodash_["forEach"])(node === null || node === void 0 ? void 0 : node.elements, (value, elementName) => { + if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"] !== null && external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"] !== void 0 && external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"][elementName])) { + nodes.push({ + styles: value, + selector: blockSelectors[blockName].selector.split(',').map(sel => sel + ' ' + external_wp_blocks_["__EXPERIMENTAL_ELEMENTS"][elementName]).join(',') + }); + } + }); + }); + return nodes; +}; +const getNodesWithSettings = (tree, blockSelectors) => { + var _tree$settings, _tree$settings2; + + const nodes = []; + + if (!(tree !== null && tree !== void 0 && tree.settings)) { + return nodes; + } + + const pickPresets = treeToPickFrom => { + const presets = {}; + PRESET_METADATA.forEach(({ + path + }) => { + const value = Object(external_lodash_["get"])(treeToPickFrom, path, false); + + if (value !== false) { + Object(external_lodash_["set"])(presets, path, value); + } + }); + return presets; + }; // Top-level. + + + const presets = pickPresets(tree.settings); + const custom = (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.custom; + + if (!Object(external_lodash_["isEmpty"])(presets) || !!custom) { + nodes.push({ + presets, + custom, + selector: ROOT_BLOCK_SELECTOR + }); + } // Blocks. + + + Object(external_lodash_["forEach"])((_tree$settings2 = tree.settings) === null || _tree$settings2 === void 0 ? void 0 : _tree$settings2.blocks, (node, blockName) => { + const blockPresets = pickPresets(node); + const blockCustom = node.custom; + + if (!Object(external_lodash_["isEmpty"])(blockPresets) || !!blockCustom) { + nodes.push({ + presets: blockPresets, + custom: blockCustom, + selector: blockSelectors[blockName].selector + }); + } + }); + return nodes; +}; +const toCustomProperties = (tree, blockSelectors) => { + const settings = getNodesWithSettings(tree, blockSelectors); + let ruleset = ''; + settings.forEach(({ + presets, + custom, + selector + }) => { + const declarations = getPresetsDeclarations(presets); + const customProps = flattenTree(custom, '--wp--custom--', '--'); + + if (customProps.length > 0) { + declarations.push(...customProps); + } + + if (declarations.length > 0) { + ruleset = ruleset + `${selector}{${declarations.join(';')};}`; + } + }); + return ruleset; +}; +const toStyles = (tree, blockSelectors) => { + const nodesWithStyles = getNodesWithStyles(tree, blockSelectors); + const nodesWithSettings = getNodesWithSettings(tree, blockSelectors); + let ruleset = '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; + nodesWithStyles.forEach(({ + selector, + styles + }) => { + const declarations = getStylesDeclarations(styles); + + if (declarations.length === 0) { + return; + } + + ruleset = ruleset + `${selector}{${declarations.join(';')};}`; + }); + nodesWithSettings.forEach(({ + selector, + presets + }) => { + if (ROOT_BLOCK_SELECTOR === selector) { + // Do not add extra specificity for top-level classes. + selector = ''; + } + + const classes = getPresetsClasses(selector, presets); + + if (!Object(external_lodash_["isEmpty"])(classes)) { + ruleset = ruleset + classes; + } + }); + return ruleset; +}; + +const getBlockSelectors = blockTypes => { + const result = {}; + blockTypes.forEach(blockType => { + var _blockType$supports$_, _blockType$supports; + + const name = blockType.name; + const selector = (_blockType$supports$_ = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports = blockType.supports) === null || _blockType$supports === void 0 ? void 0 : _blockType$supports.__experimentalSelector) !== null && _blockType$supports$_ !== void 0 ? _blockType$supports$_ : '.wp-block-' + name.replace('core/', '').replace('/', '-'); + result[name] = { + name, + selector + }; + }); + return result; +}; + +function useGlobalStylesOutput() { + const [stylesheets, setStylesheets] = Object(external_wp_element_["useState"])([]); + const [settings, setSettings] = Object(external_wp_element_["useState"])({}); + const { + merged: mergedConfig + } = Object(external_wp_element_["useContext"])(GlobalStylesContext); + Object(external_wp_element_["useEffect"])(() => { + if (!(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.styles) || !(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.settings)) { + return; + } + + const blockSelectors = getBlockSelectors(Object(external_wp_blocks_["getBlockTypes"])()); + const customProperties = toCustomProperties(mergedConfig, blockSelectors); + const globalStyles = toStyles(mergedConfig, blockSelectors); + setStylesheets([{ + css: customProperties, + isGlobalStyles: true, + __experimentalNoWrapper: true + }, { + css: globalStyles, + isGlobalStyles: true + }]); + setSettings(mergedConfig.settings); + }, [mergedConfig]); + return [stylesheets, settings]; +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/global-styles/index.js + + + + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/global-styles-sidebar.js + + +/** + * WordPress dependencies + */ + + + +/** + * Internal dependencies + */ + + + +function GlobalStylesSidebar() { + const [canReset, onReset] = useGlobalStylesReset(); + return Object(external_wp_element_["createElement"])(DefaultSidebar, { + className: "edit-site-global-styles-sidebar", + identifier: "edit-site/global-styles", + title: Object(external_wp_i18n_["__"])('Styles'), + icon: library_styles, + closeLabel: Object(external_wp_i18n_["__"])('Close global styles sidebar'), + header: Object(external_wp_element_["createElement"])(external_wp_components_["Flex"], null, Object(external_wp_element_["createElement"])(external_wp_components_["FlexBlock"], null, Object(external_wp_element_["createElement"])("strong", null, Object(external_wp_i18n_["__"])('Styles')), Object(external_wp_element_["createElement"])("span", { + className: "edit-site-global-styles-sidebar__beta" + }, Object(external_wp_i18n_["__"])('Beta'))), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["DropdownMenu"], { + icon: more_vertical["a" /* default */], + label: Object(external_wp_i18n_["__"])('More Global Styles Actions'), + toggleProps: { + disabled: !canReset + }, + controls: [{ + title: Object(external_wp_i18n_["__"])('Reset to defaults'), + onClick: onReset + }] + }))) + }, Object(external_wp_element_["createElement"])(ui, null)); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/constants.js +const SIDEBAR_TEMPLATE = 'edit-site/template'; +const SIDEBAR_BLOCK = 'edit-site/block-inspector'; + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/settings-header/index.js + + +/** + * WordPress dependencies + */ + + + + +/** + * Internal dependencies + */ + + + + +const SettingsHeader = ({ + sidebarName +}) => { + const { + enableComplementaryArea + } = Object(external_wp_data_["useDispatch"])(build_module["i" /* store */]); + + const openTemplateSettings = () => enableComplementaryArea(STORE_NAME, SIDEBAR_TEMPLATE); + + const openBlockSettings = () => enableComplementaryArea(STORE_NAME, SIDEBAR_BLOCK); + + const [templateAriaLabel, templateActiveClass] = sidebarName === SIDEBAR_TEMPLATE ? // translators: ARIA label for the Template sidebar tab, selected. + [Object(external_wp_i18n_["__"])('Template (selected)'), 'is-active'] : // translators: ARIA label for the Template Settings Sidebar tab, not selected. + [Object(external_wp_i18n_["__"])('Template'), '']; + const [blockAriaLabel, blockActiveClass] = sidebarName === SIDEBAR_BLOCK ? // translators: ARIA label for the Block Settings Sidebar tab, selected. + [Object(external_wp_i18n_["__"])('Block (selected)'), 'is-active'] : // translators: ARIA label for the Block Settings Sidebar tab, not selected. + [Object(external_wp_i18n_["__"])('Block'), '']; + /* Use a list so screen readers will announce how many tabs there are. */ + + return Object(external_wp_element_["createElement"])("ul", null, Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + onClick: openTemplateSettings, + className: `edit-site-sidebar__panel-tab ${templateActiveClass}`, + "aria-label": templateAriaLabel // translators: Data label for the Template Settings Sidebar tab. + , + "data-label": Object(external_wp_i18n_["__"])('Template') + }, // translators: Text label for the Template Settings Sidebar tab. + Object(external_wp_i18n_["__"])('Template'))), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + onClick: openBlockSettings, + className: `edit-site-sidebar__panel-tab ${blockActiveClass}`, + "aria-label": blockAriaLabel // translators: Data label for the Block Settings Sidebar tab. + , + "data-label": Object(external_wp_i18n_["__"])('Block') + }, // translators: Text label for the Block Settings Sidebar tab. + Object(external_wp_i18n_["__"])('Block')))); +}; + +/* harmony default export */ var settings_header = (SettingsHeader); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/template-card/template-areas.js + + +/** + * WordPress dependencies + */ + + + + + +/** + * Internal dependencies + */ + + + + +function TemplateAreaItem({ + area, + clientId +}) { + const { + selectBlock, + toggleBlockHighlight + } = Object(external_wp_data_["useDispatch"])(external_wp_blockEditor_["store"]); + + const highlightBlock = () => toggleBlockHighlight(clientId, true); + + const cancelHighlightBlock = () => toggleBlockHighlight(clientId, false); + + return Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-template-card__template-areas-item", + icon: Object(external_wp_editor_["getTemplatePartIcon"])(area), + onMouseOver: highlightBlock, + onMouseLeave: cancelHighlightBlock, + onFocus: highlightBlock, + onBlur: cancelHighlightBlock, + onClick: () => { + selectBlock(clientId); + } + }, TEMPLATE_PART_AREA_TO_NAME[area]); +} + +function template_areas_TemplateAreas() { + const templateParts = Object(external_wp_data_["useSelect"])(select => select(store).getCurrentTemplateTemplateParts(), []); + + if (!templateParts.length) { + return null; + } + + return Object(external_wp_element_["createElement"])("section", { + className: "edit-site-template-card__template-areas" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalHeading"], { + level: 3, + className: "edit-site-template-card__template-areas-title" + }, Object(external_wp_i18n_["__"])('Areas')), Object(external_wp_element_["createElement"])("ul", { + className: "edit-site-template-card__template-areas-list" + }, templateParts.map(({ + templatePart, + block + }) => Object(external_wp_element_["createElement"])("li", { + key: templatePart.slug + }, Object(external_wp_element_["createElement"])(TemplateAreaItem, { + area: templatePart.area, + clientId: block.clientId + }))))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/template-card/index.js + + +/** + * WordPress dependencies + */ + + + + +/** + * Internal dependencies + */ + + + +function TemplateCard() { + const { + title, + description, + icon + } = Object(external_wp_data_["useSelect"])(select => { + const { + getEditedPostType, + getEditedPostId + } = select(store); + const { + getEntityRecord + } = select(external_wp_coreData_["store"]); + const { + __experimentalGetTemplateInfo: getTemplateInfo + } = select(external_wp_editor_["store"]); + const postType = getEditedPostType(); + const postId = getEditedPostId(); + const record = getEntityRecord('postType', postType, postId); + const info = record ? getTemplateInfo(record) : {}; + return info; + }, []); + + if (!title && !description) { + return null; + } + + return Object(external_wp_element_["createElement"])("div", { + className: "edit-site-template-card" + }, Object(external_wp_element_["createElement"])(external_wp_components_["Icon"], { + className: "edit-site-template-card__icon", + icon: icon + }), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-template-card__content" + }, Object(external_wp_element_["createElement"])("h2", { + className: "edit-site-template-card__title" + }, title), Object(external_wp_element_["createElement"])("div", { + className: "edit-site-template-card__description" + }, description), Object(external_wp_element_["createElement"])(template_areas_TemplateAreas, null))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/sidebar/index.js + + +/** + * WordPress dependencies + */ + + + + + + + +/** + * Internal dependencies + */ + + + + + + + +const { + Slot: InspectorSlot, + Fill: InspectorFill +} = Object(external_wp_components_["createSlotFill"])('EditSiteSidebarInspector'); +const SidebarInspectorFill = InspectorFill; +function SidebarComplementaryAreaFills() { + const { + sidebar, + isEditorSidebarOpened, + hasBlockSelection + } = Object(external_wp_data_["useSelect"])(select => { + const _sidebar = select(build_module["i" /* store */]).getActiveComplementaryArea(STORE_NAME); + + const _isEditorSidebarOpened = [SIDEBAR_BLOCK, SIDEBAR_TEMPLATE].includes(_sidebar); + + return { + sidebar: _sidebar, + isEditorSidebarOpened: _isEditorSidebarOpened, + hasBlockSelection: !!select(external_wp_blockEditor_["store"]).getBlockSelectionStart() + }; + }, []); + const { + enableComplementaryArea + } = Object(external_wp_data_["useDispatch"])(build_module["i" /* store */]); + Object(external_wp_element_["useEffect"])(() => { + if (!isEditorSidebarOpened) return; + + if (hasBlockSelection) { + enableComplementaryArea(STORE_NAME, SIDEBAR_BLOCK); + } else { + enableComplementaryArea(STORE_NAME, SIDEBAR_TEMPLATE); + } + }, [hasBlockSelection, isEditorSidebarOpened]); + let sidebarName = sidebar; + + if (!isEditorSidebarOpened) { + sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE; + } + + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(DefaultSidebar, { + identifier: sidebarName, + title: Object(external_wp_i18n_["__"])('Settings'), + icon: cog["a" /* default */], + closeLabel: Object(external_wp_i18n_["__"])('Close settings sidebar'), + header: Object(external_wp_element_["createElement"])(settings_header, { + sidebarName: sidebarName + }), + headerClassName: "edit-site-sidebar__panel-tabs" + }, sidebarName === SIDEBAR_TEMPLATE && Object(external_wp_element_["createElement"])(external_wp_components_["PanelBody"], null, Object(external_wp_element_["createElement"])(TemplateCard, null)), sidebarName === SIDEBAR_BLOCK && Object(external_wp_element_["createElement"])(InspectorSlot, { + bubblesVirtually: true + })), Object(external_wp_element_["createElement"])(GlobalStylesSidebar, null)); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/template-part-converter/convert-to-regular.js + + +/** + * WordPress dependencies + */ + + + + +function ConvertToRegularBlocks({ + clientId +}) { + const { + getBlocks + } = Object(external_wp_data_["useSelect"])(external_wp_blockEditor_["store"]); + const { + replaceBlocks + } = Object(external_wp_data_["useDispatch"])(external_wp_blockEditor_["store"]); + return Object(external_wp_element_["createElement"])(external_wp_blockEditor_["BlockSettingsMenuControls"], null, ({ + onClose + }) => Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + onClick: () => { + replaceBlocks(clientId, getBlocks(clientId)); + onClose(); + } + }, Object(external_wp_i18n_["__"])('Detach blocks from template part'))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/template-part-converter/convert-to-template-part.js + + +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ + + + + + + + + + + + + +/** + * Internal dependencies + */ + + +function ConvertToTemplatePart({ + clientIds, + blocks +}) { + const instanceId = Object(external_wp_compose_["useInstanceId"])(ConvertToTemplatePart); + const [isModalOpen, setIsModalOpen] = Object(external_wp_element_["useState"])(false); + const [title, setTitle] = Object(external_wp_element_["useState"])(''); + const { + replaceBlocks + } = Object(external_wp_data_["useDispatch"])(external_wp_blockEditor_["store"]); + const { + saveEntityRecord + } = Object(external_wp_data_["useDispatch"])(external_wp_coreData_["store"]); + const { + createSuccessNotice + } = Object(external_wp_data_["useDispatch"])(external_wp_notices_["store"]); + const [area, setArea] = Object(external_wp_element_["useState"])(TEMPLATE_PART_AREA_GENERAL); + const templatePartAreas = Object(external_wp_data_["useSelect"])(select => select(external_wp_editor_["store"]).__experimentalGetDefaultTemplatePartAreas(), []); + + const onConvert = async templatePartTitle => { + const defaultTitle = Object(external_wp_i18n_["__"])('Untitled Template Part'); + + const templatePart = await saveEntityRecord('postType', 'wp_template_part', { + slug: Object(external_lodash_["kebabCase"])(templatePartTitle || defaultTitle), + title: templatePartTitle || defaultTitle, + content: Object(external_wp_blocks_["serialize"])(blocks), + area + }); + replaceBlocks(clientIds, Object(external_wp_blocks_["createBlock"])('core/template-part', { + slug: templatePart.slug, + theme: templatePart.theme + })); + createSuccessNotice(Object(external_wp_i18n_["__"])('Template part created.'), { + type: 'snackbar' + }); + }; + + return Object(external_wp_element_["createElement"])(external_wp_blockEditor_["BlockSettingsMenuControls"], null, ({ + onClose + }) => Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + onClick: () => { + setIsModalOpen(true); + } + }, Object(external_wp_i18n_["__"])('Make template part')), isModalOpen && Object(external_wp_element_["createElement"])(external_wp_components_["Modal"], { + title: Object(external_wp_i18n_["__"])('Create a template part'), + closeLabel: Object(external_wp_i18n_["__"])('Close'), + onRequestClose: () => { + setIsModalOpen(false); + setTitle(''); + }, + overlayClassName: "edit-site-template-part-converter__modal" + }, Object(external_wp_element_["createElement"])("form", { + onSubmit: event => { + event.preventDefault(); + onConvert(title); + setIsModalOpen(false); + setTitle(''); + onClose(); + } + }, Object(external_wp_element_["createElement"])(external_wp_components_["TextControl"], { + label: Object(external_wp_i18n_["__"])('Name'), + value: title, + onChange: setTitle + }), Object(external_wp_element_["createElement"])(external_wp_components_["BaseControl"], { + label: Object(external_wp_i18n_["__"])('Area'), + id: `edit-site-template-part-converter__area-selection-${instanceId}`, + className: "edit-site-template-part-converter__area-base-control" + }, Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalRadioGroup"], { + label: Object(external_wp_i18n_["__"])('Area'), + className: "edit-site-template-part-converter__area-radio-group", + id: `edit-site-template-part-converter__area-selection-${instanceId}`, + onChange: setArea, + checked: area + }, templatePartAreas.map(({ + icon, + label, + area: value, + description + }) => Object(external_wp_element_["createElement"])(external_wp_components_["__experimentalRadio"], { + key: label, + value: value, + className: "edit-site-template-part-converter__area-radio" + }, Object(external_wp_element_["createElement"])(external_wp_components_["Flex"], { + align: "start", + justify: "start" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["Icon"], { + icon: icon + })), Object(external_wp_element_["createElement"])(external_wp_components_["FlexBlock"], { + className: "edit-site-template-part-converter__option-label" + }, label, Object(external_wp_element_["createElement"])("div", null, description)), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], { + className: "edit-site-template-part-converter__checkbox" + }, area === value && Object(external_wp_element_["createElement"])(external_wp_components_["Icon"], { + icon: check["a" /* default */] + }))))))), Object(external_wp_element_["createElement"])(external_wp_components_["Flex"], { + className: "edit-site-template-part-converter__convert-modal-actions", + justify: "flex-end" + }, Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + variant: "secondary", + onClick: () => { + setIsModalOpen(false); + setTitle(''); + } + }, Object(external_wp_i18n_["__"])('Cancel'))), Object(external_wp_element_["createElement"])(external_wp_components_["FlexItem"], null, Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + variant: "primary", + type: "submit" + }, Object(external_wp_i18n_["__"])('Create')))))))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/template-part-converter/index.js + + +/** + * WordPress dependencies + */ + + +/** + * Internal dependencies + */ + + + +function TemplatePartConverter() { + var _blocks$; + + const { + clientIds, + blocks + } = Object(external_wp_data_["useSelect"])(select => { + const { + getSelectedBlockClientIds, + getBlocksByClientId + } = select(external_wp_blockEditor_["store"]); + const selectedBlockClientIds = getSelectedBlockClientIds(); + return { + clientIds: selectedBlockClientIds, + blocks: getBlocksByClientId(selectedBlockClientIds) + }; + }, []); // Allow converting a single template part to standard blocks. + + if (blocks.length === 1 && ((_blocks$ = blocks[0]) === null || _blocks$ === void 0 ? void 0 : _blocks$.name) === 'core/template-part') { + return Object(external_wp_element_["createElement"])(ConvertToRegularBlocks, { + clientId: clientIds[0] + }); + } + + return Object(external_wp_element_["createElement"])(ConvertToTemplatePart, { + clientIds: clientIds, + blocks: blocks + }); +} + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/edit.js + 1 modules +var edit = __webpack_require__("B9Az"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/navigate-to-link/index.js + + +/** + * WordPress dependencies + */ + + + + + + + +function NavigateToLink({ + type, + id, + activePage, + onActivePageChange +}) { + const post = Object(external_wp_data_["useSelect"])(select => type && id && type !== 'URL' && select(external_wp_coreData_["store"]).getEntityRecord('postType', type, id), [type, id]); + const onClick = Object(external_wp_element_["useMemo"])(() => { + if (!(post !== null && post !== void 0 && post.link)) return null; + const path = Object(external_wp_url_["getPathAndQueryString"])(post.link); + if (path === (activePage === null || activePage === void 0 ? void 0 : activePage.path)) return null; + return () => onActivePageChange({ + type, + slug: post.slug, + path, + context: { + postType: post.type, + postId: post.id + } + }); + }, [post, activePage === null || activePage === void 0 ? void 0 : activePage.path, onActivePageChange]); + return onClick && Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + icon: edit["a" /* default */], + label: Object(external_wp_i18n_["__"])('Edit Page Template'), + onClick: onClick + }); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/block-editor/block-inspector-button.js + + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + + + +function BlockInspectorButton({ + onClick = () => {} +}) { + const { + shortcut, + isBlockInspectorOpen + } = Object(external_wp_data_["useSelect"])(select => ({ + shortcut: select(external_wp_keyboardShortcuts_["store"]).getShortcutRepresentation('core/edit-site/toggle-block-settings-sidebar'), + isBlockInspectorOpen: select(build_module["i" /* store */]).getActiveComplementaryArea(store.name) === SIDEBAR_BLOCK + }), []); + const { + enableComplementaryArea, + disableComplementaryArea + } = Object(external_wp_data_["useDispatch"])(build_module["i" /* store */]); + const label = isBlockInspectorOpen ? Object(external_wp_i18n_["__"])('Hide more settings') : Object(external_wp_i18n_["__"])('Show more settings'); + return Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + onClick: () => { + if (isBlockInspectorOpen) { + disableComplementaryArea(STORE_NAME); + Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('Block settings closed')); + } else { + enableComplementaryArea(STORE_NAME, SIDEBAR_BLOCK); + Object(external_wp_a11y_["speak"])(Object(external_wp_i18n_["__"])('Additional settings are now available in the Editor block settings sidebar')); + } // Close dropdown menu. + + + onClick(); + }, + shortcut: shortcut + }, label); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/edit-template-part-menu-button/index.js + + +/** + * WordPress dependencies + */ + + + + + + +/** + * Internal dependencies + */ + + +function EditTemplatePartMenuButton() { + return Object(external_wp_element_["createElement"])(external_wp_blockEditor_["BlockSettingsMenuControls"], null, ({ + selectedClientIds, + onClose + }) => Object(external_wp_element_["createElement"])(EditTemplatePartMenuItem, { + selectedClientId: selectedClientIds[0], + onClose: onClose + })); +} + +function EditTemplatePartMenuItem({ + selectedClientId, + onClose +}) { + const selectedTemplatePart = Object(external_wp_data_["useSelect"])(select => { + const block = select(external_wp_blockEditor_["store"]).getBlock(selectedClientId); + + if (block && Object(external_wp_blocks_["isTemplatePart"])(block)) { + const { + theme, + slug + } = block.attributes; + return select(external_wp_coreData_["store"]).getEntityRecord('postType', 'wp_template_part', // Ideally this should be an official public API. + `${theme}//${slug}`); + } + }, [selectedClientId]); + const { + pushTemplatePart + } = Object(external_wp_data_["useDispatch"])(store); + + if (!selectedTemplatePart) { + return null; + } + + return Object(external_wp_element_["createElement"])(external_wp_components_["MenuItem"], { + onClick: () => { + pushTemplatePart(selectedTemplatePart.id); + onClose(); + } + }, + /* translators: %s: template part title */ + Object(external_wp_i18n_["sprintf"])(Object(external_wp_i18n_["__"])('Edit %s'), selectedTemplatePart.slug)); +} + +// EXTERNAL MODULE: ./node_modules/@wordpress/icons/build-module/library/arrow-left.js +var arrow_left = __webpack_require__("cjQ8"); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/block-editor/back-button.js + + +/** + * WordPress dependencies + */ + + + + +/** + * Internal dependencies + */ + + + +function BackButton() { + const { + isTemplatePart, + previousTemplateId + } = Object(external_wp_data_["useSelect"])(select => { + const { + getEditedPostType, + getPreviousEditedPostId + } = select(store); + return { + isTemplatePart: getEditedPostType() === 'wp_template_part', + previousTemplateId: getPreviousEditedPostId() + }; + }, []); + const { + goBack + } = Object(external_wp_data_["useDispatch"])(store); + + if (!isTemplatePart || !previousTemplateId) { + return null; + } + + return Object(external_wp_element_["createElement"])(external_wp_components_["Button"], { + className: "edit-site-visual-editor__back-button", + icon: arrow_left["a" /* default */], + onClick: () => { + goBack(); + } + }, Object(external_wp_i18n_["__"])('Back')); +} + +/* harmony default export */ var back_button = (BackButton); + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/block-editor/resize-handle.js + + +/** + * WordPress dependencies + */ + + + +const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels. + +function ResizeHandle({ + direction, + resizeWidthBy +}) { + function handleKeyDown(event) { + const { + keyCode + } = event; + + if (direction === 'left' && keyCode === external_wp_keycodes_["LEFT"] || direction === 'right' && keyCode === external_wp_keycodes_["RIGHT"]) { + resizeWidthBy(DELTA_DISTANCE); + } else if (direction === 'left' && keyCode === external_wp_keycodes_["RIGHT"] || direction === 'right' && keyCode === external_wp_keycodes_["LEFT"]) { + resizeWidthBy(-DELTA_DISTANCE); + } + } + + return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])("button", { + className: `resizable-editor__drag-handle is-${direction}`, + "aria-label": Object(external_wp_i18n_["__"])('Drag to resize'), + "aria-describedby": `resizable-editor__resize-help-${direction}`, + onKeyDown: handleKeyDown + }), Object(external_wp_element_["createElement"])(external_wp_components_["VisuallyHidden"], { + id: `resizable-editor__resize-help-${direction}` + }, Object(external_wp_i18n_["__"])('Use left and right arrow keys to resize the canvas.'))); +} + +// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/block-editor/resizable-editor.js + + + +/** + * WordPress dependencies + */ + + + + + +/** + * Internal dependencies + */ + + + +const DEFAULT_STYLES = { + width: '100%', + height: '100%' +}; // Removes the inline styles in the drag handles. + +const HANDLE_STYLES_OVERRIDE = { + position: undefined, + userSelect: undefined, + cursor: undefined, + width: undefined, + height: undefined, + top: undefined, + right: undefined, + bottom: undefined, + left: undefined +}; + +function ResizableEditor({ + enableResizing, + settings, + ...props +}) { + const deviceType = Object(external_wp_data_["useSelect"])(select => select(store).__experimentalGetPreviewDeviceType(), []); + const deviceStyles = Object(external_wp_blockEditor_["__experimentalUseResizeCanvas"])(deviceType); + const [width, setWidth] = Object(external_wp_element_["useState"])(DEFAULT_STYLES.width); + const [height, setHeight] = Object(external_wp_element_["useState"])(DEFAULT_STYLES.height); + const iframeRef = Object(external_wp_element_["useRef"])(); + const mouseMoveTypingResetRef = Object(external_wp_blockEditor_["__unstableUseMouseMoveTypingReset"])(); + const ref = Object(external_wp_compose_["useMergeRefs"])([iframeRef, mouseMoveTypingResetRef]); + Object(external_wp_element_["useEffect"])(function autoResizeIframeHeight() { + const iframe = iframeRef.current; + + if (!iframe || !enableResizing) { + return; + } + + const resizeObserver = new iframe.contentWindow.ResizeObserver(() => { + setHeight(iframe.contentDocument.querySelector(`.edit-site-block-editor__block-list`).offsetHeight); + }); // Observing the rather than the because the latter + // gets destroyed and remounted after initialization in