@wordpress/block-editor
Version:
8 lines (7 loc) • 5.98 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/hooks/use-color-props.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport {\n\t__experimentalGetGradientClass,\n\tgetGradientValueBySlug,\n} from '../components/gradients';\nimport { useSettings } from '../components/use-settings';\n\n// The code in this file has largely been lifted from the color block support\n// hook.\n//\n// This utility is intended to assist where the serialization of the colors\n// block support is being skipped for a block but the color related CSS classes\n// & styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's color support\n * attributes.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Color block support derived CSS classes & styles.\n */\nexport function getColorClassesAndStyles( attributes ) {\n\tconst { backgroundColor, textColor, gradient, style } = attributes;\n\n\t// Collect color CSS classes.\n\tconst backgroundClass = getColorClassName(\n\t\t'background-color',\n\t\tbackgroundColor\n\t);\n\tconst textClass = getColorClassName( 'color', textColor );\n\n\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\tconst hasGradient = gradientClass || style?.color?.gradient;\n\n\t// Determine color CSS class name list.\n\tconst className = clsx( textClass, gradientClass, {\n\t\t// Don't apply the background class if there's a gradient.\n\t\t[ backgroundClass ]: ! hasGradient && !! backgroundClass,\n\t\t'has-text-color': textColor || style?.color?.text,\n\t\t'has-background':\n\t\t\tbackgroundColor ||\n\t\t\tstyle?.color?.background ||\n\t\t\tgradient ||\n\t\t\tstyle?.color?.gradient,\n\t\t'has-link-color': style?.elements?.link?.color,\n\t} );\n\n\t// Collect inline styles for colors.\n\tconst colorStyles = style?.color || {};\n\tconst styleProp = getInlineStyles( { color: colorStyles } );\n\n\treturn {\n\t\tclassName: className || undefined,\n\t\tstyle: styleProp,\n\t};\n}\n\n/**\n * Determines the color related props for a block derived from its color block\n * support attributes.\n *\n * Inline styles are forced for named colors to ensure these selections are\n * reflected when themes do not load their color stylesheets in the editor.\n *\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} ClassName & style props from colors block support.\n */\nexport function useColorProps( attributes ) {\n\tconst { backgroundColor, textColor, gradient } = attributes;\n\n\tconst [\n\t\tuserPalette,\n\t\tthemePalette,\n\t\tdefaultPalette,\n\t\tuserGradients,\n\t\tthemeGradients,\n\t\tdefaultGradients,\n\t] = useSettings(\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default',\n\t\t'color.gradients.custom',\n\t\t'color.gradients.theme',\n\t\t'color.gradients.default'\n\t);\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( userPalette || [] ),\n\t\t\t...( themePalette || [] ),\n\t\t\t...( defaultPalette || [] ),\n\t\t],\n\t\t[ userPalette, themePalette, defaultPalette ]\n\t);\n\tconst gradients = useMemo(\n\t\t() => [\n\t\t\t...( userGradients || [] ),\n\t\t\t...( themeGradients || [] ),\n\t\t\t...( defaultGradients || [] ),\n\t\t],\n\t\t[ userGradients, themeGradients, defaultGradients ]\n\t);\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t// Force inline styles to apply colors when themes do not load their color\n\t// stylesheets in the editor.\n\tif ( backgroundColor ) {\n\t\tconst backgroundColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tbackgroundColor\n\t\t);\n\n\t\tcolorProps.style.backgroundColor = backgroundColorObject.color;\n\t}\n\n\tif ( gradient ) {\n\t\tcolorProps.style.background = getGradientValueBySlug(\n\t\t\tgradients,\n\t\t\tgradient\n\t\t);\n\t}\n\n\tif ( textColor ) {\n\t\tconst textColorObject = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\ttextColor\n\t\t);\n\n\t\tcolorProps.style.color = textColorObject.color;\n\t}\n\n\treturn colorProps;\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAwB;AAKxB,mBAAgC;AAChC,oBAGO;AACP,uBAGO;AACP,0BAA4B;AAiBrB,SAAS,yBAA0B,YAAa;AACtD,QAAM,EAAE,iBAAiB,WAAW,UAAU,MAAM,IAAI;AAGxD,QAAM,sBAAkB;AAAA,IACvB;AAAA,IACA;AAAA,EACD;AACA,QAAM,gBAAY,iCAAmB,SAAS,SAAU;AAExD,QAAM,oBAAgB,iDAAgC,QAAS;AAC/D,QAAM,cAAc,iBAAiB,OAAO,OAAO;AAGnD,QAAM,gBAAY,YAAAA,SAAM,WAAW,eAAe;AAAA;AAAA,IAEjD,CAAE,eAAgB,GAAG,CAAE,eAAe,CAAC,CAAE;AAAA,IACzC,kBAAkB,aAAa,OAAO,OAAO;AAAA,IAC7C,kBACC,mBACA,OAAO,OAAO,cACd,YACA,OAAO,OAAO;AAAA,IACf,kBAAkB,OAAO,UAAU,MAAM;AAAA,EAC1C,CAAE;AAGF,QAAM,cAAc,OAAO,SAAS,CAAC;AACrC,QAAM,gBAAY,8BAAiB,EAAE,OAAO,YAAY,CAAE;AAE1D,SAAO;AAAA,IACN,WAAW,aAAa;AAAA,IACxB,OAAO;AAAA,EACR;AACD;AAaO,SAAS,cAAe,YAAa;AAC3C,QAAM,EAAE,iBAAiB,WAAW,SAAS,IAAI;AAEjD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,aAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAK,eAAe,CAAC;AAAA,MACrB,GAAK,gBAAgB,CAAC;AAAA,MACtB,GAAK,kBAAkB,CAAC;AAAA,IACzB;AAAA,IACA,CAAE,aAAa,cAAc,cAAe;AAAA,EAC7C;AACA,QAAM,gBAAY;AAAA,IACjB,MAAM;AAAA,MACL,GAAK,iBAAiB,CAAC;AAAA,MACvB,GAAK,kBAAkB,CAAC;AAAA,MACxB,GAAK,oBAAoB,CAAC;AAAA,IAC3B;AAAA,IACA,CAAE,eAAe,gBAAgB,gBAAiB;AAAA,EACnD;AAEA,QAAM,aAAa,yBAA0B,UAAW;AAIxD,MAAK,iBAAkB;AACtB,UAAM,4BAAwB;AAAA,MAC7B;AAAA,MACA;AAAA,IACD;AAEA,eAAW,MAAM,kBAAkB,sBAAsB;AAAA,EAC1D;AAEA,MAAK,UAAW;AACf,eAAW,MAAM,iBAAa;AAAA,MAC7B;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,MAAK,WAAY;AAChB,UAAM,sBAAkB;AAAA,MACvB;AAAA,MACA;AAAA,IACD;AAEA,eAAW,MAAM,QAAQ,gBAAgB;AAAA,EAC1C;AAEA,SAAO;AACR;",
"names": ["clsx"]
}