49 | { isSelected || ! menu ? (
50 |
54 |
60 |
61 | ) : (
62 |
63 |
67 |
68 | ) }
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/editor.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied inside the editor only.
3 | *
4 | * Replace them with your own styles or remove the file completely.
5 | */
6 |
7 | .wp-block-spacedmonkey-classic-menu-block {
8 |
9 | .components-base-control__field {
10 | min-width: 180px;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { registerBlockType } from '@wordpress/blocks';
5 | import { __ } from '@wordpress/i18n';
6 | import { navigation as icon } from '@wordpress/icons';
7 |
8 | /**
9 | * Internal dependencies
10 | */
11 | import './style.scss';
12 | import Edit from './edit';
13 | import metadata from './block';
14 |
15 | const { name, category, attributes, supports } = metadata;
16 |
17 | /**
18 | * Every block starts by registering a new block type definition.
19 | *
20 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
21 | */
22 | registerBlockType( name, {
23 | title: __( 'Classic menu', 'classic-menu-block' ),
24 | description: __(
25 | 'Render classic menu data as a block',
26 | 'classic-menu-block'
27 | ),
28 | keywords: [
29 | __( 'classic', 'classic-menu-block' ),
30 | __( 'menu', 'classic-menu-block' ),
31 | __( 'navigation', 'classic-menu-block' ),
32 | ],
33 | category,
34 | attributes,
35 | supports,
36 | icon,
37 | /**
38 | * @see ./edit.js
39 | */
40 | edit: Edit,
41 | } );
42 |
--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | .wp-classic-menu-block {
2 |
3 | > .menu {
4 | margin: 0;
5 | padding: 0;
6 | list-style: none;
7 | width: 100%;
8 | text-align: left;
9 |
10 | ul {
11 | margin: 0;
12 | padding: 0;
13 | list-style: none;
14 | position: absolute;
15 | left: -999em;
16 | }
17 |
18 | li {
19 | display: inline-block;
20 | position: relative;
21 | text-align: left;
22 | padding-right: var(--wp--style--block-gap, 2em);
23 |
24 | &:hover {
25 |
26 | > ul {
27 | left: auto;
28 | }
29 | }
30 |
31 | li {
32 | display: block;
33 |
34 | &:hover {
35 |
36 | > ul {
37 | left: 100%;
38 | top: 0;
39 | }
40 | }
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/use-navigation-entities.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { useSelect } from '@wordpress/data';
5 | import { store as coreStore } from '@wordpress/core-data';
6 |
7 | /**
8 | * @typedef {Object} NavigationEntitiesData
9 | * @property {Array|undefined} menus - a collection of Menu entity objects.
10 | * @property {boolean} isResolvingMenus - indicates whether the request to fetch menus is currently resolving.
11 | * @property {boolean} hasResolvedMenus - indicates whether the request to fetch menus has finished resolving.
12 | * @property {Array|undefined} menusItems - a collection of Menu Item entity objects for the current menuId.
13 | * @property {boolean} hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.
14 | * @property {boolean} hasPages - indicates whether there is currently any data for pages.
15 | * @property {boolean} hasMenus - indicates whether there is currently any data for menus.
16 | */
17 |
18 | /**
19 | * Manages fetching and resolution state for all entities required
20 | * for the Navigation block.
21 | *
22 | * @return { NavigationEntitiesData } the entity data.
23 | */
24 | export default function useNavigationEntities() {
25 | const { menus, isResolvingMenus, hasResolvedMenus } = useSelect(
26 | ( select ) => {
27 | const { getMenus, isResolving, hasFinishedResolution } =
28 | select( coreStore );
29 |
30 | const menusParameters = [ { per_page: -1, context: 'view' } ];
31 |
32 | return {
33 | menus: getMenus( ...menusParameters ),
34 | isResolvingMenus: isResolving( 'getMenus', menusParameters ),
35 | hasResolvedMenus: hasFinishedResolution(
36 | 'getMenus',
37 | menusParameters
38 | ),
39 | };
40 | },
41 | []
42 | );
43 |
44 | return {
45 | menus,
46 | isResolvingMenus,
47 | hasResolvedMenus,
48 | hasMenus: !! ( hasResolvedMenus && menus?.length ),
49 | };
50 | }
51 |
--------------------------------------------------------------------------------