@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 4.16 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/navigation/edit/use-layout-custom-properties.js"],
"sourcesContent": ["import { useSettings, useStyleOverride } from '@wordpress/block-editor';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { unlock } from '../../lock-unlock';\n\nconst { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );\n\nconst JUSTIFICATION_VALUES = {\n\tleft: 'flex-start',\n\tcenter: 'center',\n\tright: 'flex-end',\n\t'space-between': 'space-between',\n};\n\n/**\n * Adds responsive Navigation layout custom properties to the editor canvas.\n *\n * @param {Object} options Options.\n * @param {string} options.clientId Block client ID.\n * @param {Object} options.layout Base layout configuration.\n * @param {Object} options.style Block style attribute.\n */\nexport default function useLayoutCustomProperties( {\n\tclientId,\n\tlayout,\n\tstyle,\n} ) {\n\tconst [ viewportSettings ] = useSettings( 'viewport' );\n\tconst selector = `#block-${ clientId }`;\n\tconst css = Object.entries( getResponsiveMediaQueries( viewportSettings ) )\n\t\t.map( ( [ viewport, mediaQuery ] ) => {\n\t\t\tconst viewportLayout = style?.[ viewport ]?.layout;\n\t\t\tif (\n\t\t\t\t! viewportLayout ||\n\t\t\t\ttypeof viewportLayout !== 'object' ||\n\t\t\t\tArray.isArray( viewportLayout ) ||\n\t\t\t\t! Object.keys( viewportLayout ).length\n\t\t\t) {\n\t\t\t\treturn '';\n\t\t\t}\n\n\t\t\tconst effectiveLayout = { ...layout, ...viewportLayout };\n\t\t\tconst justifyContent = Object.hasOwn(\n\t\t\t\tJUSTIFICATION_VALUES,\n\t\t\t\teffectiveLayout.justifyContent\n\t\t\t)\n\t\t\t\t? effectiveLayout.justifyContent\n\t\t\t\t: 'left';\n\t\t\tconst justification = JUSTIFICATION_VALUES[ justifyContent ];\n\t\t\tconst isVertical = effectiveLayout.orientation === 'vertical';\n\t\t\tlet align = 'center';\n\t\t\tif ( isVertical ) {\n\t\t\t\talign = [ 'center', 'right' ].includes( justifyContent )\n\t\t\t\t\t? justification\n\t\t\t\t\t: 'flex-start';\n\t\t\t}\n\t\t\tconst justify =\n\t\t\t\tisVertical && justifyContent === 'left'\n\t\t\t\t\t? 'initial'\n\t\t\t\t\t: justification;\n\t\t\tconst declarations = {\n\t\t\t\t'--navigation-layout-justification-setting': justification,\n\t\t\t\t'--navigation-layout-direction': isVertical ? 'column' : 'row',\n\t\t\t\t'--navigation-layout-wrap':\n\t\t\t\t\teffectiveLayout.flexWrap === 'nowrap' ? 'nowrap' : 'wrap',\n\t\t\t\t'--navigation-layout-justify': justify,\n\t\t\t\t'--navigation-layout-align': align,\n\t\t\t};\n\t\t\tconst cssDeclarations = Object.entries( declarations )\n\t\t\t\t.map( ( [ property, value ] ) => `${ property }: ${ value };` )\n\t\t\t\t.join( '' );\n\n\t\t\treturn `${ mediaQuery }{${ selector } {${ cssDeclarations }}}`;\n\t\t} )\n\t\t.join( '' );\n\n\tuseStyleOverride( { css } );\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA8C;AAC9C,kCAA6D;AAC7D,yBAAuB;AAEvB,IAAM,EAAE,0BAA0B,QAAI,2BAAQ,4BAAAA,WAA8B;AAE5E,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAClB;AAUe,SAAR,0BAA4C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,gBAAiB,QAAI,iCAAa,UAAW;AACrD,QAAM,WAAW,UAAW,QAAS;AACrC,QAAM,MAAM,OAAO,QAAS,0BAA2B,gBAAiB,CAAE,EACxE,IAAK,CAAE,CAAE,UAAU,UAAW,MAAO;AACrC,UAAM,iBAAiB,QAAS,QAAS,GAAG;AAC5C,QACC,CAAE,kBACF,OAAO,mBAAmB,YAC1B,MAAM,QAAS,cAAe,KAC9B,CAAE,OAAO,KAAM,cAAe,EAAE,QAC/B;AACD,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,EAAE,GAAG,QAAQ,GAAG,eAAe;AACvD,UAAM,iBAAiB,OAAO;AAAA,MAC7B;AAAA,MACA,gBAAgB;AAAA,IACjB,IACG,gBAAgB,iBAChB;AACH,UAAM,gBAAgB,qBAAsB,cAAe;AAC3D,UAAM,aAAa,gBAAgB,gBAAgB;AACnD,QAAI,QAAQ;AACZ,QAAK,YAAa;AACjB,cAAQ,CAAE,UAAU,OAAQ,EAAE,SAAU,cAAe,IACpD,gBACA;AAAA,IACJ;AACA,UAAM,UACL,cAAc,mBAAmB,SAC9B,YACA;AACJ,UAAM,eAAe;AAAA,MACpB,6CAA6C;AAAA,MAC7C,iCAAiC,aAAa,WAAW;AAAA,MACzD,4BACC,gBAAgB,aAAa,WAAW,WAAW;AAAA,MACpD,+BAA+B;AAAA,MAC/B,6BAA6B;AAAA,IAC9B;AACA,UAAM,kBAAkB,OAAO,QAAS,YAAa,EACnD,IAAK,CAAE,CAAE,UAAU,KAAM,MAAO,GAAI,QAAS,KAAM,KAAM,GAAI,EAC7D,KAAM,EAAG;AAEX,WAAO,GAAI,UAAW,IAAK,QAAS,KAAM,eAAgB;AAAA,EAC3D,CAAE,EACD,KAAM,EAAG;AAEX,4CAAkB,EAAE,IAAI,CAAE;AAC3B;",
"names": ["globalStylesEnginePrivateApis"]
}