UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 9.49 kB
{ "version": 3, "sources": ["../../src/post-featured-image/dimension-controls.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tSelectControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useSettings } from '@wordpress/block-editor';\n\nconst SCALE_OPTIONS = (\n\t<>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"cover\"\n\t\t\tlabel={ _x( 'Cover', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"contain\"\n\t\t\tlabel={ _x(\n\t\t\t\t'Contain',\n\t\t\t\t'Scale option for Image dimension control'\n\t\t\t) }\n\t\t/>\n\t\t<ToggleGroupControlOption\n\t\t\tvalue=\"fill\"\n\t\t\tlabel={ _x( 'Fill', 'Scale option for Image dimension control' ) }\n\t\t/>\n\t</>\n);\n\nconst DEFAULT_SCALE = 'cover';\n\nconst scaleHelp = {\n\tcover: __(\n\t\t'Image is scaled and cropped to fill the entire space without being distorted.'\n\t),\n\tcontain: __(\n\t\t'Image is scaled to fill the space without clipping nor distorting.'\n\t),\n\tfill: __(\n\t\t'Image will be stretched and distorted to completely fill the space.'\n\t),\n};\n\nconst DimensionControls = ( {\n\tclientId,\n\tattributes: { aspectRatio, width, height, scale },\n\tsetAttributes,\n} ) => {\n\tconst [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =\n\t\tuseSettings(\n\t\t\t'spacing.units',\n\t\t\t'dimensions.aspectRatios.default',\n\t\t\t'dimensions.aspectRatios.theme',\n\t\t\t'dimensions.defaultAspectRatios'\n\t\t);\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],\n\t} );\n\n\tconst onDimensionChange = ( dimension, nextValue ) => {\n\t\tconst parsedValue = parseFloat( nextValue );\n\t\t/**\n\t\t * If we have no value set and we change the unit,\n\t\t * we don't want to set the attribute, as it would\n\t\t * end up having the unit as value without any number.\n\t\t */\n\t\tif ( isNaN( parsedValue ) && nextValue ) {\n\t\t\treturn;\n\t\t}\n\t\tsetAttributes( {\n\t\t\t[ dimension ]: parsedValue < 0 ? '0' : nextValue,\n\t\t} );\n\t};\n\tconst scaleLabel = _x( 'Scale', 'Image scaling options' );\n\n\tconst showScaleControl =\n\t\theight || ( aspectRatio && aspectRatio !== 'auto' );\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ () => !! aspectRatio }\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { aspectRatio: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\taspectRatio: undefined,\n\t\t\t\t} ) }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<SelectControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\t\tvalue={ aspectRatio }\n\t\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\t\tonChange={ ( nextAspectRatio ) =>\n\t\t\t\t\t\tsetAttributes( { aspectRatio: nextAspectRatio } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t<ToolsPanelItem\n\t\t\t\tclassName=\"single-column\"\n\t\t\t\thasValue={ () => !! height }\n\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { height: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\theight: undefined,\n\t\t\t\t} ) }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tvalue={ height || '' }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ ( nextHeight ) =>\n\t\t\t\t\t\tonDimensionChange( 'height', nextHeight )\n\t\t\t\t\t}\n\t\t\t\t\tunits={ units }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t<ToolsPanelItem\n\t\t\t\tclassName=\"single-column\"\n\t\t\t\thasValue={ () => !! width }\n\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { width: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\twidth: undefined,\n\t\t\t\t} ) }\n\t\t\t\tisShownByDefault\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tvalue={ width || '' }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ ( nextWidth ) =>\n\t\t\t\t\t\tonDimensionChange( 'width', nextWidth )\n\t\t\t\t\t}\n\t\t\t\t\tunits={ units }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t{ showScaleControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! scale && scale !== DEFAULT_SCALE }\n\t\t\t\t\tlabel={ scaleLabel }\n\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tscale: DEFAULT_SCALE,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\t\tscale: DEFAULT_SCALE,\n\t\t\t\t\t} ) }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ scaleLabel }\n\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\thelp={ scaleHelp[ scale ] }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tscale: value,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t{ SCALE_OPTIONS }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default DimensionControls;\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuB;AACvB,wBAOO;AACP,0BAA4B;AAG3B;AADD,IAAM,gBACL,4EACC;AAAA;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,WAAQ,gBAAI,SAAS,0CAA2C;AAAA;AAAA,EACjE;AAAA,EACA;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,WAAQ;AAAA,QACP;AAAA,QACA;AAAA,MACD;AAAA;AAAA,EACD;AAAA,EACA;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,WAAQ,gBAAI,QAAQ,0CAA2C;AAAA;AAAA,EAChE;AAAA,GACD;AAGD,IAAM,gBAAgB;AAEtB,IAAM,YAAY;AAAA,EACjB,WAAO;AAAA,IACN;AAAA,EACD;AAAA,EACA,aAAS;AAAA,IACR;AAAA,EACD;AAAA,EACA,UAAM;AAAA,IACL;AAAA,EACD;AACD;AAEA,IAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY,EAAE,aAAa,OAAO,QAAQ,MAAM;AAAA,EAChD;AACD,MAAO;AACN,QAAM,CAAE,gBAAgB,eAAe,aAAa,iBAAkB,QACrE;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD,QAAM,YAAQ,kBAAAC,8BAAgB;AAAA,IAC7B,gBAAgB,kBAAkB,CAAE,MAAM,KAAK,MAAM,MAAM,KAAM;AAAA,EAClE,CAAE;AAEF,QAAM,oBAAoB,CAAE,WAAW,cAAe;AACrD,UAAM,cAAc,WAAY,SAAU;AAM1C,QAAK,MAAO,WAAY,KAAK,WAAY;AACxC;AAAA,IACD;AACA,kBAAe;AAAA,MACd,CAAE,SAAU,GAAG,cAAc,IAAI,MAAM;AAAA,IACxC,CAAE;AAAA,EACH;AACA,QAAM,iBAAa,gBAAI,SAAS,uBAAwB;AAExD,QAAM,mBACL,UAAY,eAAe,gBAAgB;AAE5C,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,WAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,EACrC;AAEA,SACC,4EACC;AAAA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,UAAW,MAAM,CAAC,CAAE;AAAA,QACpB,WAAQ,gBAAI,cAAe;AAAA,QAC3B,YAAa,MAAM,cAAe,EAAE,aAAa,OAAU,CAAE;AAAA,QAC7D,gBAAiB,OAAQ;AAAA,UACxB,aAAa;AAAA,QACd;AAAA,QACA,kBAAgB;AAAA,QAChB,SAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAQ,gBAAI,cAAe;AAAA,YAC3B,OAAQ;AAAA,YACR,SAAU;AAAA,YACV,UAAW,CAAE,oBACZ,cAAe,EAAE,aAAa,gBAAgB,CAAE;AAAA;AAAA,QAElD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC,kBAAAA;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,UAAW,MAAM,CAAC,CAAE;AAAA,QACpB,WAAQ,gBAAI,QAAS;AAAA,QACrB,YAAa,MAAM,cAAe,EAAE,QAAQ,OAAU,CAAE;AAAA,QACxD,gBAAiB,OAAQ;AAAA,UACxB,QAAQ;AAAA,QACT;AAAA,QACA,kBAAgB;AAAA,QAChB,SAAU;AAAA,QAEV;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAQ,gBAAI,QAAS;AAAA,YACrB,eAAc;AAAA,YACd,OAAQ,UAAU;AAAA,YAClB,KAAM;AAAA,YACN,UAAW,CAAE,eACZ,kBAAmB,UAAU,UAAW;AAAA,YAEzC;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC,kBAAAD;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,UAAW,MAAM,CAAC,CAAE;AAAA,QACpB,WAAQ,gBAAI,OAAQ;AAAA,QACpB,YAAa,MAAM,cAAe,EAAE,OAAO,OAAU,CAAE;AAAA,QACvD,gBAAiB,OAAQ;AAAA,UACxB,OAAO;AAAA,QACR;AAAA,QACA,kBAAgB;AAAA,QAChB,SAAU;AAAA,QAEV;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAQ,gBAAI,OAAQ;AAAA,YACpB,eAAc;AAAA,YACd,OAAQ,SAAS;AAAA,YACjB,KAAM;AAAA,YACN,UAAW,CAAE,cACZ,kBAAmB,SAAS,SAAU;AAAA,YAEvC;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACE,oBACD;AAAA,MAAC,kBAAAD;AAAA,MAAA;AAAA,QACA,UAAW,MAAM,CAAC,CAAE,SAAS,UAAU;AAAA,QACvC,OAAQ;AAAA,QACR,YAAa,MACZ,cAAe;AAAA,UACd,OAAO;AAAA,QACR,CAAE;AAAA,QAEH,gBAAiB,OAAQ;AAAA,UACxB,OAAO;AAAA,QACR;AAAA,QACA,kBAAgB;AAAA,QAChB,SAAU;AAAA,QAEV;AAAA,UAAC,kBAAAE;AAAA,UAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,OAAQ;AAAA,YACR,OAAQ;AAAA,YACR,MAAO,UAAW,KAAM;AAAA,YACxB,UAAW,CAAE,UACZ,cAAe;AAAA,cACd,OAAO;AAAA,YACR,CAAE;AAAA,YAEH,SAAO;AAAA,YAEL;AAAA;AAAA,QACH;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,6BAAQ;", "names": ["ToggleGroupControlOption", "useCustomUnits", "ToolsPanelItem", "UnitControl", "ToggleGroupControl"] }