@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 3.99 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/separator/edit.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetColorClassName,\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalUseColorProps as useColorProps,\n} from '@wordpress/block-editor';\nimport { HorizontalRule, SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useDeprecatedOpacity from './use-deprecated-opacity';\n\nconst HtmlElementControl = ( { tagName, setAttributes } ) => {\n\treturn (\n\t\t<SelectControl\n\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\tvalue={ tagName }\n\t\t\tonChange={ ( newValue ) => setAttributes( { tagName: newValue } ) }\n\t\t\toptions={ [\n\t\t\t\t{ label: __( 'Default (<hr>)' ), value: 'hr' },\n\t\t\t\t{ label: '<div>', value: 'div' },\n\t\t\t] }\n\t\t\thelp={\n\t\t\t\ttagName === 'hr'\n\t\t\t\t\t? __(\n\t\t\t\t\t\t\t'Only select <hr> if the separator conveys important information and should be announced by screen readers.'\n\t\t\t\t\t )\n\t\t\t\t\t: __(\n\t\t\t\t\t\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t\t\t\t\t )\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n};\n\nexport default function SeparatorEdit( { attributes, setAttributes } ) {\n\tconst { backgroundColor, opacity, style, tagName } = attributes;\n\tconst colorProps = useColorProps( attributes );\n\tconst currentColor = colorProps?.style?.backgroundColor;\n\tconst hasCustomColor = !! style?.color?.background;\n\n\tuseDeprecatedOpacity( opacity, currentColor, setAttributes );\n\n\t// The dots styles uses text for the dots, to change those dots color is\n\t// using color, not backgroundColor.\n\tconst colorClass = getColorClassName( 'color', backgroundColor );\n\n\tconst className = clsx(\n\t\t{\n\t\t\t'has-text-color': backgroundColor || currentColor,\n\t\t\t[ colorClass ]: colorClass,\n\t\t\t'has-css-opacity': opacity === 'css',\n\t\t\t'has-alpha-channel-opacity': opacity === 'alpha-channel',\n\t\t},\n\t\tcolorProps.className\n\t);\n\n\tconst styles = {\n\t\tcolor: currentColor,\n\t\tbackgroundColor: currentColor,\n\t};\n\tconst Wrapper = tagName === 'hr' ? HorizontalRule : tagName;\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<HtmlElementControl\n\t\t\t\t\ttagName={ tagName }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<Wrapper\n\t\t\t\t{ ...useBlockProps( {\n\t\t\t\t\tclassName,\n\t\t\t\t\tstyle: hasCustomColor ? styles : undefined,\n\t\t\t\t} ) }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,UAAU;AAKnB,OAAO,0BAA0B;AAI/B,SAmDA,UAnDA,KAmDA,YAnDA;AAFF,IAAM,qBAAqB,CAAE,EAAE,SAAS,cAAc,MAAO;AAC5D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,UAAW,CAAE,aAAc,cAAe,EAAE,SAAS,SAAS,CAAE;AAAA,MAChE,SAAU;AAAA,QACT,EAAE,OAAO,GAAI,gBAAiB,GAAG,OAAO,KAAK;AAAA,QAC7C,EAAE,OAAO,SAAS,OAAO,MAAM;AAAA,MAChC;AAAA,MACA,MACC,YAAY,OACT;AAAA,QACA;AAAA,MACA,IACA;AAAA,QACA;AAAA,MACA;AAAA,MAEJ,uBAAqB;AAAA;AAAA,EACtB;AAEF;AAEe,SAAR,cAAgC,EAAE,YAAY,cAAc,GAAI;AACtE,QAAM,EAAE,iBAAiB,SAAS,OAAO,QAAQ,IAAI;AACrD,QAAM,aAAa,cAAe,UAAW;AAC7C,QAAM,eAAe,YAAY,OAAO;AACxC,QAAM,iBAAiB,CAAC,CAAE,OAAO,OAAO;AAExC,uBAAsB,SAAS,cAAc,aAAc;AAI3D,QAAM,aAAa,kBAAmB,SAAS,eAAgB;AAE/D,QAAM,YAAY;AAAA,IACjB;AAAA,MACC,kBAAkB,mBAAmB;AAAA,MACrC,CAAE,UAAW,GAAG;AAAA,MAChB,mBAAmB,YAAY;AAAA,MAC/B,6BAA6B,YAAY;AAAA,IAC1C;AAAA,IACA,WAAW;AAAA,EACZ;AAEA,QAAM,SAAS;AAAA,IACd,OAAO;AAAA,IACP,iBAAiB;AAAA,EAClB;AACA,QAAM,UAAU,YAAY,OAAO,iBAAiB;AAEpD,SACC,iCACC;AAAA,wBAAC,qBAAkB,OAAM,YACxB;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,cAAe;AAAA,UACnB;AAAA,UACA,OAAO,iBAAiB,SAAS;AAAA,QAClC,CAAE;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
"names": []
}