@wordpress/block-library 9.30.1-next.6870dfe5b.0 → 9.30.1-next.836ecdcae.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/navigation-link/link-ui.js +82 -34
- package/build/navigation-link/link-ui.js.map +1 -1
- package/build/navigation-link/page-creator.js +18 -12
- package/build/navigation-link/page-creator.js.map +1 -1
- package/build-module/navigation-link/link-ui.js +85 -37
- package/build-module/navigation-link/link-ui.js.map +1 -1
- package/build-module/navigation-link/page-creator.js +19 -12
- package/build-module/navigation-link/page-creator.js.map +1 -1
- package/package.json +35 -35
- package/src/navigation-link/link-ui.js +95 -32
- package/src/navigation-link/page-creator.js +20 -13
- package/build/navigation-link/block-inserter.js +0 -69
- package/build/navigation-link/block-inserter.js.map +0 -1
- package/build/navigation-link/dialog-wrapper.js +0 -80
- package/build/navigation-link/dialog-wrapper.js.map +0 -1
- package/build-module/navigation-link/block-inserter.js +0 -61
- package/build-module/navigation-link/block-inserter.js.map +0 -1
- package/build-module/navigation-link/dialog-wrapper.js +0 -75
- package/build-module/navigation-link/dialog-wrapper.js.map +0 -1
- package/src/navigation-link/block-inserter.js +0 -65
- package/src/navigation-link/dialog-wrapper.js +0 -74
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _components = require("@wordpress/components");
|
|
8
|
-
var _i18n = require("@wordpress/i18n");
|
|
9
|
-
var _icons = require("@wordpress/icons");
|
|
10
|
-
var _compose = require("@wordpress/compose");
|
|
11
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
/**
|
|
13
|
-
* WordPress dependencies
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Shared BackButton component for consistent navigation across LinkUI sub-components.
|
|
18
|
-
*
|
|
19
|
-
* @param {Object} props Component props.
|
|
20
|
-
* @param {string} props.className CSS class name for the button.
|
|
21
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
22
|
-
*/function BackButton({
|
|
23
|
-
className,
|
|
24
|
-
onBack
|
|
25
|
-
}) {
|
|
26
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
|
|
27
|
-
className: className,
|
|
28
|
-
icon: (0, _i18n.isRTL)() ? _icons.chevronRightSmall : _icons.chevronLeftSmall,
|
|
29
|
-
onClick: e => {
|
|
30
|
-
e.preventDefault();
|
|
31
|
-
onBack();
|
|
32
|
-
},
|
|
33
|
-
size: "small",
|
|
34
|
-
children: (0, _i18n.__)('Back')
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.
|
|
40
|
-
*
|
|
41
|
-
* @param {Object} props Component props.
|
|
42
|
-
* @param {string} props.className CSS class name for the dialog container.
|
|
43
|
-
* @param {string} props.title Dialog title for accessibility.
|
|
44
|
-
* @param {string} props.description Dialog description for accessibility.
|
|
45
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
46
|
-
* @param {Object} props.children Child components to render inside the dialog.
|
|
47
|
-
*/
|
|
48
|
-
function DialogWrapper({
|
|
49
|
-
className,
|
|
50
|
-
title,
|
|
51
|
-
description,
|
|
52
|
-
onBack,
|
|
53
|
-
children
|
|
54
|
-
}) {
|
|
55
|
-
const dialogTitleId = (0, _compose.useInstanceId)(DialogWrapper, 'link-ui-dialog-title');
|
|
56
|
-
const dialogDescriptionId = (0, _compose.useInstanceId)(DialogWrapper, 'link-ui-dialog-description');
|
|
57
|
-
const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
|
|
58
|
-
const backButtonClassName = `${className}__back`;
|
|
59
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
60
|
-
className: className,
|
|
61
|
-
role: "dialog",
|
|
62
|
-
"aria-labelledby": dialogTitleId,
|
|
63
|
-
"aria-describedby": dialogDescriptionId,
|
|
64
|
-
ref: focusOnMountRef,
|
|
65
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.VisuallyHidden, {
|
|
66
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
|
|
67
|
-
id: dialogTitleId,
|
|
68
|
-
children: title
|
|
69
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
70
|
-
id: dialogDescriptionId,
|
|
71
|
-
children: description
|
|
72
|
-
})]
|
|
73
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(BackButton, {
|
|
74
|
-
className: backButtonClassName,
|
|
75
|
-
onBack: onBack
|
|
76
|
-
}), children]
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
var _default = exports.default = DialogWrapper;
|
|
80
|
-
//# sourceMappingURL=dialog-wrapper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_components","require","_i18n","_icons","_compose","_jsxRuntime","BackButton","className","onBack","jsx","Button","icon","isRTL","chevronRightSmall","chevronLeftSmall","onClick","e","preventDefault","size","children","__","DialogWrapper","title","description","dialogTitleId","useInstanceId","dialogDescriptionId","focusOnMountRef","useFocusOnMount","backButtonClassName","jsxs","role","ref","VisuallyHidden","id","_default","exports","default"],"sources":["@wordpress/block-library/src/navigation-link/dialog-wrapper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';\nimport { useInstanceId, useFocusOnMount } from '@wordpress/compose';\n\n/**\n * Shared BackButton component for consistent navigation across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the button.\n * @param {Function} props.onBack Callback when user wants to go back.\n */\nfunction BackButton( { className, onBack } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ className }\n\t\t\ticon={ isRTL() ? chevronRightSmall : chevronLeftSmall }\n\t\t\tonClick={ ( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonBack();\n\t\t\t} }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{ __( 'Back' ) }\n\t\t</Button>\n\t);\n}\n\n/**\n * Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the dialog container.\n * @param {string} props.title Dialog title for accessibility.\n * @param {string} props.description Dialog description for accessibility.\n * @param {Function} props.onBack Callback when user wants to go back.\n * @param {Object} props.children Child components to render inside the dialog.\n */\nfunction DialogWrapper( { className, title, description, onBack, children } ) {\n\tconst dialogTitleId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-title'\n\t);\n\tconst dialogDescriptionId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-description'\n\t);\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst backButtonClassName = `${ className }__back`;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ className }\n\t\t\trole=\"dialog\"\n\t\t\taria-labelledby={ dialogTitleId }\n\t\t\taria-describedby={ dialogDescriptionId }\n\t\t\tref={ focusOnMountRef }\n\t\t>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<h2 id={ dialogTitleId }>{ title }</h2>\n\t\t\t\t<p id={ dialogDescriptionId }>{ description }</p>\n\t\t\t</VisuallyHidden>\n\n\t\t\t<BackButton className={ backButtonClassName } onBack={ onBack } />\n\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default DialogWrapper;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAAoE,IAAAI,WAAA,GAAAJ,OAAA;AANpE;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,SAASK,UAAUA,CAAE;EAAEC,SAAS;EAAEC;AAAO,CAAC,EAAG;EAC5C,oBACC,IAAAH,WAAA,CAAAI,GAAA,EAACT,WAAA,CAAAU,MAAM;IACNH,SAAS,EAAGA,SAAW;IACvBI,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,wBAAiB,GAAGC,uBAAkB;IACvDC,OAAO,EAAKC,CAAC,IAAM;MAClBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBT,MAAM,CAAC,CAAC;IACT,CAAG;IACHU,IAAI,EAAC,OAAO;IAAAC,QAAA,EAEV,IAAAC,QAAE,EAAE,MAAO;EAAC,CACP,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAAE;EAAEd,SAAS;EAAEe,KAAK;EAAEC,WAAW;EAAEf,MAAM;EAAEW;AAAS,CAAC,EAAG;EAC7E,MAAMK,aAAa,GAAG,IAAAC,sBAAa,EAClCJ,aAAa,EACb,sBACD,CAAC;EACD,MAAMK,mBAAmB,GAAG,IAAAD,sBAAa,EACxCJ,aAAa,EACb,4BACD,CAAC;EACD,MAAMM,eAAe,GAAG,IAAAC,wBAAe,EAAE,cAAe,CAAC;EACzD,MAAMC,mBAAmB,GAAG,GAAItB,SAAS,QAAS;EAElD,oBACC,IAAAF,WAAA,CAAAyB,IAAA;IACCvB,SAAS,EAAGA,SAAW;IACvBwB,IAAI,EAAC,QAAQ;IACb,mBAAkBP,aAAe;IACjC,oBAAmBE,mBAAqB;IACxCM,GAAG,EAAGL,eAAiB;IAAAR,QAAA,gBAEvB,IAAAd,WAAA,CAAAyB,IAAA,EAAC9B,WAAA,CAAAiC,cAAc;MAAAd,QAAA,gBACd,IAAAd,WAAA,CAAAI,GAAA;QAAIyB,EAAE,EAAGV,aAAe;QAAAL,QAAA,EAAGG;MAAK,CAAM,CAAC,eACvC,IAAAjB,WAAA,CAAAI,GAAA;QAAGyB,EAAE,EAAGR,mBAAqB;QAAAP,QAAA,EAAGI;MAAW,CAAK,CAAC;IAAA,CAClC,CAAC,eAEjB,IAAAlB,WAAA,CAAAI,GAAA,EAACH,UAAU;MAACC,SAAS,EAAGsB,mBAAqB;MAACrB,MAAM,EAAGA;IAAQ,CAAE,CAAC,EAEhEW,QAAQ;EAAA,CACN,CAAC;AAER;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEchB,aAAa","ignoreList":[]}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import { useSelect } from '@wordpress/data';
|
|
6
|
-
import { store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Internal dependencies
|
|
10
|
-
*/
|
|
11
|
-
import DialogWrapper from './dialog-wrapper';
|
|
12
|
-
import { unlock } from '../lock-unlock';
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
const {
|
|
15
|
-
PrivateQuickInserter: QuickInserter
|
|
16
|
-
} = unlock(blockEditorPrivateApis);
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Component for inserting blocks within the Navigation Link UI.
|
|
20
|
-
*
|
|
21
|
-
* @param {Object} props Component props.
|
|
22
|
-
* @param {string} props.clientId Client ID of the navigation link block.
|
|
23
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
24
|
-
* @param {Function} props.onBlockInsert Callback when a block is inserted.
|
|
25
|
-
*/
|
|
26
|
-
function LinkUIBlockInserter({
|
|
27
|
-
clientId,
|
|
28
|
-
onBack,
|
|
29
|
-
onBlockInsert
|
|
30
|
-
}) {
|
|
31
|
-
const {
|
|
32
|
-
rootBlockClientId
|
|
33
|
-
} = useSelect(select => {
|
|
34
|
-
const {
|
|
35
|
-
getBlockRootClientId
|
|
36
|
-
} = select(blockEditorStore);
|
|
37
|
-
return {
|
|
38
|
-
rootBlockClientId: getBlockRootClientId(clientId)
|
|
39
|
-
};
|
|
40
|
-
}, [clientId]);
|
|
41
|
-
if (!clientId) {
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
|
-
return /*#__PURE__*/_jsx(DialogWrapper, {
|
|
45
|
-
className: "link-ui-block-inserter",
|
|
46
|
-
title: __('Add block'),
|
|
47
|
-
description: __('Choose a block to add to your Navigation.'),
|
|
48
|
-
onBack: onBack,
|
|
49
|
-
children: /*#__PURE__*/_jsx(QuickInserter, {
|
|
50
|
-
rootClientId: rootBlockClientId,
|
|
51
|
-
clientId: clientId,
|
|
52
|
-
isAppender: false,
|
|
53
|
-
prioritizePatterns: false,
|
|
54
|
-
selectBlockOnInsert: !onBlockInsert,
|
|
55
|
-
onSelect: onBlockInsert ? onBlockInsert : undefined,
|
|
56
|
-
hasSearch: false
|
|
57
|
-
})
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
export default LinkUIBlockInserter;
|
|
61
|
-
//# sourceMappingURL=block-inserter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__","useSelect","store","blockEditorStore","privateApis","blockEditorPrivateApis","DialogWrapper","unlock","jsx","_jsx","PrivateQuickInserter","QuickInserter","LinkUIBlockInserter","clientId","onBack","onBlockInsert","rootBlockClientId","select","getBlockRootClientId","className","title","description","children","rootClientId","isAppender","prioritizePatterns","selectBlockOnInsert","onSelect","undefined","hasSearch"],"sources":["@wordpress/block-library/src/navigation-link/block-inserter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DialogWrapper from './dialog-wrapper';\nimport { unlock } from '../lock-unlock';\n\nconst { PrivateQuickInserter: QuickInserter } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Component for inserting blocks within the Navigation Link UI.\n *\n * @param {Object} props Component props.\n * @param {string} props.clientId Client ID of the navigation link block.\n * @param {Function} props.onBack Callback when user wants to go back.\n * @param {Function} props.onBlockInsert Callback when a block is inserted.\n */\nfunction LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {\n\tconst { rootBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId } = select( blockEditorStore );\n\n\t\t\treturn {\n\t\t\t\trootBlockClientId: getBlockRootClientId( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tif ( ! clientId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DialogWrapper\n\t\t\tclassName=\"link-ui-block-inserter\"\n\t\t\ttitle={ __( 'Add block' ) }\n\t\t\tdescription={ __( 'Choose a block to add to your Navigation.' ) }\n\t\t\tonBack={ onBack }\n\t\t>\n\t\t\t<QuickInserter\n\t\t\t\trootClientId={ rootBlockClientId }\n\t\t\t\tclientId={ clientId }\n\t\t\t\tisAppender={ false }\n\t\t\t\tprioritizePatterns={ false }\n\t\t\t\tselectBlockOnInsert={ ! onBlockInsert }\n\t\t\t\tonSelect={ onBlockInsert ? onBlockInsert : undefined }\n\t\t\t\thasSearch={ false }\n\t\t\t/>\n\t\t</DialogWrapper>\n\t);\n}\n\nexport default LinkUIBlockInserter;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SACCC,KAAK,IAAIC,gBAAgB,EACzBC,WAAW,IAAIC,sBAAsB,QAC/B,yBAAyB;;AAEhC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAM;EAAEC,oBAAoB,EAAEC;AAAc,CAAC,GAAGJ,MAAM,CACrDF,sBACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASO,mBAAmBA,CAAE;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAc,CAAC,EAAG;EACnE,MAAM;IAAEC;EAAkB,CAAC,GAAGf,SAAS,CACpCgB,MAAM,IAAM;IACb,MAAM;MAAEC;IAAqB,CAAC,GAAGD,MAAM,CAAEd,gBAAiB,CAAC;IAE3D,OAAO;MACNa,iBAAiB,EAAEE,oBAAoB,CAAEL,QAAS;IACnD,CAAC;EACF,CAAC,EACD,CAAEA,QAAQ,CACX,CAAC;EAED,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,IAAI;EACZ;EAEA,oBACCJ,IAAA,CAACH,aAAa;IACba,SAAS,EAAC,wBAAwB;IAClCC,KAAK,EAAGpB,EAAE,CAAE,WAAY,CAAG;IAC3BqB,WAAW,EAAGrB,EAAE,CAAE,2CAA4C,CAAG;IACjEc,MAAM,EAAGA,MAAQ;IAAAQ,QAAA,eAEjBb,IAAA,CAACE,aAAa;MACbY,YAAY,EAAGP,iBAAmB;MAClCH,QAAQ,EAAGA,QAAU;MACrBW,UAAU,EAAG,KAAO;MACpBC,kBAAkB,EAAG,KAAO;MAC5BC,mBAAmB,EAAG,CAAEX,aAAe;MACvCY,QAAQ,EAAGZ,aAAa,GAAGA,aAAa,GAAGa,SAAW;MACtDC,SAAS,EAAG;IAAO,CACnB;EAAC,CACY,CAAC;AAElB;AAEA,eAAejB,mBAAmB","ignoreList":[]}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { Button, VisuallyHidden } from '@wordpress/components';
|
|
5
|
-
import { __, isRTL } from '@wordpress/i18n';
|
|
6
|
-
import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
|
|
7
|
-
import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Shared BackButton component for consistent navigation across LinkUI sub-components.
|
|
11
|
-
*
|
|
12
|
-
* @param {Object} props Component props.
|
|
13
|
-
* @param {string} props.className CSS class name for the button.
|
|
14
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
15
|
-
*/
|
|
16
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
function BackButton({
|
|
18
|
-
className,
|
|
19
|
-
onBack
|
|
20
|
-
}) {
|
|
21
|
-
return /*#__PURE__*/_jsx(Button, {
|
|
22
|
-
className: className,
|
|
23
|
-
icon: isRTL() ? chevronRightSmall : chevronLeftSmall,
|
|
24
|
-
onClick: e => {
|
|
25
|
-
e.preventDefault();
|
|
26
|
-
onBack();
|
|
27
|
-
},
|
|
28
|
-
size: "small",
|
|
29
|
-
children: __('Back')
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.
|
|
35
|
-
*
|
|
36
|
-
* @param {Object} props Component props.
|
|
37
|
-
* @param {string} props.className CSS class name for the dialog container.
|
|
38
|
-
* @param {string} props.title Dialog title for accessibility.
|
|
39
|
-
* @param {string} props.description Dialog description for accessibility.
|
|
40
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
41
|
-
* @param {Object} props.children Child components to render inside the dialog.
|
|
42
|
-
*/
|
|
43
|
-
function DialogWrapper({
|
|
44
|
-
className,
|
|
45
|
-
title,
|
|
46
|
-
description,
|
|
47
|
-
onBack,
|
|
48
|
-
children
|
|
49
|
-
}) {
|
|
50
|
-
const dialogTitleId = useInstanceId(DialogWrapper, 'link-ui-dialog-title');
|
|
51
|
-
const dialogDescriptionId = useInstanceId(DialogWrapper, 'link-ui-dialog-description');
|
|
52
|
-
const focusOnMountRef = useFocusOnMount('firstElement');
|
|
53
|
-
const backButtonClassName = `${className}__back`;
|
|
54
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
55
|
-
className: className,
|
|
56
|
-
role: "dialog",
|
|
57
|
-
"aria-labelledby": dialogTitleId,
|
|
58
|
-
"aria-describedby": dialogDescriptionId,
|
|
59
|
-
ref: focusOnMountRef,
|
|
60
|
-
children: [/*#__PURE__*/_jsxs(VisuallyHidden, {
|
|
61
|
-
children: [/*#__PURE__*/_jsx("h2", {
|
|
62
|
-
id: dialogTitleId,
|
|
63
|
-
children: title
|
|
64
|
-
}), /*#__PURE__*/_jsx("p", {
|
|
65
|
-
id: dialogDescriptionId,
|
|
66
|
-
children: description
|
|
67
|
-
})]
|
|
68
|
-
}), /*#__PURE__*/_jsx(BackButton, {
|
|
69
|
-
className: backButtonClassName,
|
|
70
|
-
onBack: onBack
|
|
71
|
-
}), children]
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
export default DialogWrapper;
|
|
75
|
-
//# sourceMappingURL=dialog-wrapper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Button","VisuallyHidden","__","isRTL","chevronLeftSmall","chevronRightSmall","useInstanceId","useFocusOnMount","jsx","_jsx","jsxs","_jsxs","BackButton","className","onBack","icon","onClick","e","preventDefault","size","children","DialogWrapper","title","description","dialogTitleId","dialogDescriptionId","focusOnMountRef","backButtonClassName","role","ref","id"],"sources":["@wordpress/block-library/src/navigation-link/dialog-wrapper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';\nimport { useInstanceId, useFocusOnMount } from '@wordpress/compose';\n\n/**\n * Shared BackButton component for consistent navigation across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the button.\n * @param {Function} props.onBack Callback when user wants to go back.\n */\nfunction BackButton( { className, onBack } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ className }\n\t\t\ticon={ isRTL() ? chevronRightSmall : chevronLeftSmall }\n\t\t\tonClick={ ( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonBack();\n\t\t\t} }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{ __( 'Back' ) }\n\t\t</Button>\n\t);\n}\n\n/**\n * Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.\n *\n * @param {Object} props Component props.\n * @param {string} props.className CSS class name for the dialog container.\n * @param {string} props.title Dialog title for accessibility.\n * @param {string} props.description Dialog description for accessibility.\n * @param {Function} props.onBack Callback when user wants to go back.\n * @param {Object} props.children Child components to render inside the dialog.\n */\nfunction DialogWrapper( { className, title, description, onBack, children } ) {\n\tconst dialogTitleId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-title'\n\t);\n\tconst dialogDescriptionId = useInstanceId(\n\t\tDialogWrapper,\n\t\t'link-ui-dialog-description'\n\t);\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst backButtonClassName = `${ className }__back`;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ className }\n\t\t\trole=\"dialog\"\n\t\t\taria-labelledby={ dialogTitleId }\n\t\t\taria-describedby={ dialogDescriptionId }\n\t\t\tref={ focusOnMountRef }\n\t\t>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<h2 id={ dialogTitleId }>{ title }</h2>\n\t\t\t\t<p id={ dialogDescriptionId }>{ description }</p>\n\t\t\t</VisuallyHidden>\n\n\t\t\t<BackButton className={ backButtonClassName } onBack={ onBack } />\n\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default DialogWrapper;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,cAAc,QAAQ,uBAAuB;AAC9D,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACtE,SAASC,aAAa,EAAEC,eAAe,QAAQ,oBAAoB;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOA,SAASC,UAAUA,CAAE;EAAEC,SAAS;EAAEC;AAAO,CAAC,EAAG;EAC5C,oBACCL,IAAA,CAACT,MAAM;IACNa,SAAS,EAAGA,SAAW;IACvBE,IAAI,EAAGZ,KAAK,CAAC,CAAC,GAAGE,iBAAiB,GAAGD,gBAAkB;IACvDY,OAAO,EAAKC,CAAC,IAAM;MAClBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBJ,MAAM,CAAC,CAAC;IACT,CAAG;IACHK,IAAI,EAAC,OAAO;IAAAC,QAAA,EAEVlB,EAAE,CAAE,MAAO;EAAC,CACP,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASmB,aAAaA,CAAE;EAAER,SAAS;EAAES,KAAK;EAAEC,WAAW;EAAET,MAAM;EAAEM;AAAS,CAAC,EAAG;EAC7E,MAAMI,aAAa,GAAGlB,aAAa,CAClCe,aAAa,EACb,sBACD,CAAC;EACD,MAAMI,mBAAmB,GAAGnB,aAAa,CACxCe,aAAa,EACb,4BACD,CAAC;EACD,MAAMK,eAAe,GAAGnB,eAAe,CAAE,cAAe,CAAC;EACzD,MAAMoB,mBAAmB,GAAG,GAAId,SAAS,QAAS;EAElD,oBACCF,KAAA;IACCE,SAAS,EAAGA,SAAW;IACvBe,IAAI,EAAC,QAAQ;IACb,mBAAkBJ,aAAe;IACjC,oBAAmBC,mBAAqB;IACxCI,GAAG,EAAGH,eAAiB;IAAAN,QAAA,gBAEvBT,KAAA,CAACV,cAAc;MAAAmB,QAAA,gBACdX,IAAA;QAAIqB,EAAE,EAAGN,aAAe;QAAAJ,QAAA,EAAGE;MAAK,CAAM,CAAC,eACvCb,IAAA;QAAGqB,EAAE,EAAGL,mBAAqB;QAAAL,QAAA,EAAGG;MAAW,CAAK,CAAC;IAAA,CAClC,CAAC,eAEjBd,IAAA,CAACG,UAAU;MAACC,SAAS,EAAGc,mBAAqB;MAACb,MAAM,EAAGA;IAAQ,CAAE,CAAC,EAEhEM,QAAQ;EAAA,CACN,CAAC;AAER;AAEA,eAAeC,aAAa","ignoreList":[]}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import { useSelect } from '@wordpress/data';
|
|
6
|
-
import {
|
|
7
|
-
store as blockEditorStore,
|
|
8
|
-
privateApis as blockEditorPrivateApis,
|
|
9
|
-
} from '@wordpress/block-editor';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import DialogWrapper from './dialog-wrapper';
|
|
15
|
-
import { unlock } from '../lock-unlock';
|
|
16
|
-
|
|
17
|
-
const { PrivateQuickInserter: QuickInserter } = unlock(
|
|
18
|
-
blockEditorPrivateApis
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Component for inserting blocks within the Navigation Link UI.
|
|
23
|
-
*
|
|
24
|
-
* @param {Object} props Component props.
|
|
25
|
-
* @param {string} props.clientId Client ID of the navigation link block.
|
|
26
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
27
|
-
* @param {Function} props.onBlockInsert Callback when a block is inserted.
|
|
28
|
-
*/
|
|
29
|
-
function LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {
|
|
30
|
-
const { rootBlockClientId } = useSelect(
|
|
31
|
-
( select ) => {
|
|
32
|
-
const { getBlockRootClientId } = select( blockEditorStore );
|
|
33
|
-
|
|
34
|
-
return {
|
|
35
|
-
rootBlockClientId: getBlockRootClientId( clientId ),
|
|
36
|
-
};
|
|
37
|
-
},
|
|
38
|
-
[ clientId ]
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
if ( ! clientId ) {
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<DialogWrapper
|
|
47
|
-
className="link-ui-block-inserter"
|
|
48
|
-
title={ __( 'Add block' ) }
|
|
49
|
-
description={ __( 'Choose a block to add to your Navigation.' ) }
|
|
50
|
-
onBack={ onBack }
|
|
51
|
-
>
|
|
52
|
-
<QuickInserter
|
|
53
|
-
rootClientId={ rootBlockClientId }
|
|
54
|
-
clientId={ clientId }
|
|
55
|
-
isAppender={ false }
|
|
56
|
-
prioritizePatterns={ false }
|
|
57
|
-
selectBlockOnInsert={ ! onBlockInsert }
|
|
58
|
-
onSelect={ onBlockInsert ? onBlockInsert : undefined }
|
|
59
|
-
hasSearch={ false }
|
|
60
|
-
/>
|
|
61
|
-
</DialogWrapper>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default LinkUIBlockInserter;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { Button, VisuallyHidden } from '@wordpress/components';
|
|
5
|
-
import { __, isRTL } from '@wordpress/i18n';
|
|
6
|
-
import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
|
|
7
|
-
import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Shared BackButton component for consistent navigation across LinkUI sub-components.
|
|
11
|
-
*
|
|
12
|
-
* @param {Object} props Component props.
|
|
13
|
-
* @param {string} props.className CSS class name for the button.
|
|
14
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
15
|
-
*/
|
|
16
|
-
function BackButton( { className, onBack } ) {
|
|
17
|
-
return (
|
|
18
|
-
<Button
|
|
19
|
-
className={ className }
|
|
20
|
-
icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
|
|
21
|
-
onClick={ ( e ) => {
|
|
22
|
-
e.preventDefault();
|
|
23
|
-
onBack();
|
|
24
|
-
} }
|
|
25
|
-
size="small"
|
|
26
|
-
>
|
|
27
|
-
{ __( 'Back' ) }
|
|
28
|
-
</Button>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.
|
|
34
|
-
*
|
|
35
|
-
* @param {Object} props Component props.
|
|
36
|
-
* @param {string} props.className CSS class name for the dialog container.
|
|
37
|
-
* @param {string} props.title Dialog title for accessibility.
|
|
38
|
-
* @param {string} props.description Dialog description for accessibility.
|
|
39
|
-
* @param {Function} props.onBack Callback when user wants to go back.
|
|
40
|
-
* @param {Object} props.children Child components to render inside the dialog.
|
|
41
|
-
*/
|
|
42
|
-
function DialogWrapper( { className, title, description, onBack, children } ) {
|
|
43
|
-
const dialogTitleId = useInstanceId(
|
|
44
|
-
DialogWrapper,
|
|
45
|
-
'link-ui-dialog-title'
|
|
46
|
-
);
|
|
47
|
-
const dialogDescriptionId = useInstanceId(
|
|
48
|
-
DialogWrapper,
|
|
49
|
-
'link-ui-dialog-description'
|
|
50
|
-
);
|
|
51
|
-
const focusOnMountRef = useFocusOnMount( 'firstElement' );
|
|
52
|
-
const backButtonClassName = `${ className }__back`;
|
|
53
|
-
|
|
54
|
-
return (
|
|
55
|
-
<div
|
|
56
|
-
className={ className }
|
|
57
|
-
role="dialog"
|
|
58
|
-
aria-labelledby={ dialogTitleId }
|
|
59
|
-
aria-describedby={ dialogDescriptionId }
|
|
60
|
-
ref={ focusOnMountRef }
|
|
61
|
-
>
|
|
62
|
-
<VisuallyHidden>
|
|
63
|
-
<h2 id={ dialogTitleId }>{ title }</h2>
|
|
64
|
-
<p id={ dialogDescriptionId }>{ description }</p>
|
|
65
|
-
</VisuallyHidden>
|
|
66
|
-
|
|
67
|
-
<BackButton className={ backButtonClassName } onBack={ onBack } />
|
|
68
|
-
|
|
69
|
-
{ children }
|
|
70
|
-
</div>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export default DialogWrapper;
|