UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 4.13 kB
{ "version": 3, "sources": ["../../../src/components/block-visibility/viewport-toolbar.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport { seen, unseen } from '@wordpress/icons';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { BlockVisibilityModal } from './';\nimport { unlock } from '../../lock-unlock';\n\nexport default function BlockVisibilityViewportToolbar( { clientIds } ) {\n\tconst hasBlockVisibilityButtonShownRef = useRef( false );\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetBlockName,\n\t\t\t\tareBlocksHiddenAnywhere: _areBlocksHiddenAnywhere,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\t\t\tconst _blocks = getBlocksByClientId( clientIds );\n\t\t\treturn {\n\t\t\t\tcanToggleBlockVisibility: _blocks.every( ( { clientId } ) =>\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tgetBlockName( clientId ),\n\t\t\t\t\t\t'visibility',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t)\n\t\t\t\t),\n\t\t\t\tareBlocksHiddenAnywhere: _areBlocksHiddenAnywhere( clientIds ),\n\t\t\t};\n\t\t},\n\n\t\t[ clientIds ]\n\t);\n\n\t/*\n\t * If the block visibility button has been shown, we don't want to\n\t * remove it from the toolbar until the toolbar is rendered again\n\t * without it. Removing it beforehand can cause focus loss issues.\n\t * It needs to return focus from whence it came, and to do that,\n\t * we need to leave the button in the toolbar.\n\t */\n\tuseEffect( () => {\n\t\tif ( areBlocksHiddenAnywhere ) {\n\t\t\thasBlockVisibilityButtonShownRef.current = true;\n\t\t}\n\t}, [ areBlocksHiddenAnywhere ] );\n\n\tif (\n\t\t! areBlocksHiddenAnywhere &&\n\t\t! hasBlockVisibilityButtonShownRef.current\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarGroup className=\"block-editor-block-visibility-toolbar\">\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tdisabled={ ! canToggleBlockVisibility }\n\t\t\t\t\ticon={ areBlocksHiddenAnywhere ? unseen : seen }\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tareBlocksHiddenAnywhere\n\t\t\t\t\t\t\t? __( 'Hidden' )\n\t\t\t\t\t\t\t: __( 'Visible' )\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\taria-expanded={ isModalOpen }\n\t\t\t\t\taria-haspopup={ ! isModalOpen ? 'dialog' : undefined }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<BlockVisibilityModal\n\t\t\t\t\tclientIds={ clientIds }\n\t\t\t\t\tonClose={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"], "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,eAAe,oBAAoB;AAC5C,SAAS,QAAQ,WAAW,gBAAgB;AAC5C,SAAS,MAAM,cAAc;AAC7B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,4BAA4B;AACrC,SAAS,cAAc;AAiDrB,mBAEE,KAFF;AA/Ca,SAAR,+BAAiD,EAAE,UAAU,GAAI;AACvE,QAAM,mCAAmC,OAAQ,KAAM;AACvD,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,KAAM;AACxD,QAAM,EAAE,0BAA0B,wBAAwB,IAAI;AAAA,IAC7D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA,yBAAyB;AAAA,MAC1B,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AACvC,YAAM,UAAU,oBAAqB,SAAU;AAC/C,aAAO;AAAA,QACN,0BAA0B,QAAQ;AAAA,UAAO,CAAE,EAAE,SAAS,MACrD;AAAA,YACC,aAAc,QAAS;AAAA,YACvB;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,QACA,yBAAyB,yBAA0B,SAAU;AAAA,MAC9D;AAAA,IACD;AAAA,IAEA,CAAE,SAAU;AAAA,EACb;AASA,YAAW,MAAM;AAChB,QAAK,yBAA0B;AAC9B,uCAAiC,UAAU;AAAA,IAC5C;AAAA,EACD,GAAG,CAAE,uBAAwB,CAAE;AAE/B,MACC,CAAE,2BACF,CAAE,iCAAiC,SAClC;AACD,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA,wBAAC,gBAAa,WAAU,yCACvB;AAAA,MAAC;AAAA;AAAA,QACA,UAAW,CAAE;AAAA,QACb,MAAO,0BAA0B,SAAS;AAAA,QAC1C,OACC,0BACG,GAAI,QAAS,IACb,GAAI,SAAU;AAAA,QAElB,SAAU,MAAM,eAAgB,IAAK;AAAA,QACrC,iBAAgB;AAAA,QAChB,iBAAgB,CAAE,cAAc,WAAW;AAAA;AAAA,IAC5C,GACD;AAAA,IACE,eACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAU,MAAM,eAAgB,KAAM;AAAA;AAAA,IACvC;AAAA,KAEF;AAEF;", "names": [] }