| 1 | {"version":3,"sources":["@wordpress/block-library/src/media-text/edit.js"],"names":["classnames","get","__","_x","BlockControls","InnerBlocks","InspectorControls","PanelColorSettings","withColors","Component","Fragment","PanelBody","TextareaControl","ToggleControl","Toolbar","MediaContainer","ALLOWED_BLOCKS","TEMPLATE","fontSize","placeholder","MediaTextEdit","arguments","onSelectMedia","bind","onWidthChange","commitWidthChange","state","mediaWidth","media","setAttributes","props","mediaType","src","media_type","type","mediaAlt","alt","mediaId","id","mediaUrl","url","width","setState","attributes","mediaPosition","className","backgroundColor","isSelected","setBackgroundColor","isStackedOnMobile","temporaryMediaWidth","classNames","class","widthString","style","gridTemplateColumns","color","colorSettings","value","onChange","label","toolbarControls","icon","title","isActive","onClick","onMediaAltChange","newMediaAlt","mediaTextGeneralSettings","renderMediaArea"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tBlockControls,\n\tInnerBlocks,\n\tInspectorControls,\n\tPanelColorSettings,\n\twithColors,\n} from '@wordpress/block-editor';\nimport { Component, Fragment } from '@wordpress/element';\nimport {\n\tPanelBody,\n\tTextareaControl,\n\tToggleControl,\n\tToolbar,\n} from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport MediaContainer from './media-container';\n\n/**\n * Constants\n */\nconst ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/list' ];\nconst TEMPLATE = [\n\t[ 'core/paragraph', { fontSize: 'large', placeholder: _x( 'Content…', 'content placeholder' ) } ],\n];\n\nclass MediaTextEdit extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.onSelectMedia = this.onSelectMedia.bind( this );\n\t\tthis.onWidthChange = this.onWidthChange.bind( this );\n\t\tthis.commitWidthChange = this.commitWidthChange.bind( this );\n\t\tthis.state = {\n\t\t\tmediaWidth: null,\n\t\t};\n\t}\n\n\tonSelectMedia( media ) {\n\t\tconst { setAttributes } = this.props;\n\n\t\tlet mediaType;\n\t\tlet src;\n\t\t// for media selections originated from a file upload.\n\t\tif ( media.media_type ) {\n\t\t\tif ( media.media_type === 'image' ) {\n\t\t\t\tmediaType = 'image';\n\t\t\t} else {\n\t\t\t\t// only images and videos are accepted so if the media_type is not an image we can assume it is a video.\n\t\t\t\t// video contain the media type of 'file' in the object returned from the rest api.\n\t\t\t\tmediaType = 'video';\n\t\t\t}\n\t\t} else { // for media selections originated from existing files in the media library.\n\t\t\tmediaType = media.type;\n\t\t}\n\n\t\tif ( mediaType === 'image' ) {\n\t\t\t// Try the \"large\" size URL, falling back to the \"full\" size URL below.\n\t\t\tsrc = get( media, [ 'sizes', 'large', 'url' ] ) || get( media, [ 'media_details', 'sizes', 'large', 'source_url' ] );\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tmediaAlt: media.alt,\n\t\t\tmediaId: media.id,\n\t\t\tmediaType,\n\t\t\tmediaUrl: src || media.url,\n\t\t} );\n\t}\n\n\tonWidthChange( width ) {\n\t\tthis.setState( {\n\t\t\tmediaWidth: width,\n\t\t} );\n\t}\n\n\tcommitWidthChange( width ) {\n\t\tconst { setAttributes } = this.props;\n\n\t\tsetAttributes( {\n\t\t\tmediaWidth: width,\n\t\t} );\n\t\tthis.setState( {\n\t\t\tmediaWidth: null,\n\t\t} );\n\t}\n\n\trenderMediaArea() {\n\t\tconst { attributes } = this.props;\n\t\tconst { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth } = attributes;\n\n\t\treturn (\n\t\t\t<MediaContainer\n\t\t\t\tclassName=\"block-library-media-text__media-container\"\n\t\t\t\tonSelectMedia={ this.onSelectMedia }\n\t\t\t\tonWidthChange={ this.onWidthChange }\n\t\t\t\tcommitWidthChange={ this.commitWidthChange }\n\t\t\t\t{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth } }\n\t\t\t/>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tattributes,\n\t\t\tclassName,\n\t\t\tbackgroundColor,\n\t\t\tisSelected,\n\t\t\tsetAttributes,\n\t\t\tsetBackgroundColor,\n\t\t} = this.props;\n\t\tconst {\n\t\t\tisStackedOnMobile,\n\t\t\tmediaAlt,\n\t\t\tmediaPosition,\n\t\t\tmediaType,\n\t\t\tmediaWidth,\n\t\t} = attributes;\n\t\tconst temporaryMediaWidth = this.state.mediaWidth;\n\t\tconst classNames = classnames( className, {\n\t\t\t'has-media-on-the-right': 'right' === mediaPosition,\n\t\t\t'is-selected': isSelected,\n\t\t\t[ backgroundColor.class ]: backgroundColor.class,\n\t\t\t'is-stacked-on-mobile': isStackedOnMobile,\n\t\t} );\n\t\tconst widthString = `${ temporaryMediaWidth || mediaWidth }%`;\n\t\tconst style = {\n\t\t\tgridTemplateColumns: 'right' === mediaPosition ? `auto ${ widthString }` : `${ widthString } auto`,\n\t\t\tbackgroundColor: backgroundColor.color,\n\t\t};\n\t\tconst colorSettings = [ {\n\t\t\tvalue: backgroundColor.color,\n\t\t\tonChange: setBackgroundColor,\n\t\t\tlabel: __( 'Background Color' ),\n\t\t} ];\n\t\tconst toolbarControls = [ {\n\t\t\ticon: 'align-pull-left',\n\t\t\ttitle: __( 'Show media on left' ),\n\t\t\tisActive: mediaPosition === 'left',\n\t\t\tonClick: () => setAttributes( { mediaPosition: 'left' } ),\n\t\t}, {\n\t\t\ticon: 'align-pull-right',\n\t\t\ttitle: __( 'Show media on right' ),\n\t\t\tisActive: mediaPosition === 'right',\n\t\t\tonClick: () => setAttributes( { mediaPosition: 'right' } ),\n\t\t} ];\n\t\tconst onMediaAltChange = ( newMediaAlt ) => {\n\t\t\tsetAttributes( { mediaAlt: newMediaAlt } );\n\t\t};\n\t\tconst mediaTextGeneralSettings = (\n\t\t\t<PanelBody title={ __( 'Media & Text Settings' ) }>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Stack on mobile' ) }\n\t\t\t\t\tchecked={ isStackedOnMobile }\n\t\t\t\t\tonChange={ () => setAttributes( {\n\t\t\t\t\t\tisStackedOnMobile: ! isStackedOnMobile,\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t\t{ mediaType === 'image' && ( <TextareaControl\n\t\t\t\t\tlabel={ __( 'Alt Text (Alternative Text)' ) }\n\t\t\t\t\tvalue={ mediaAlt }\n\t\t\t\t\tonChange={ onMediaAltChange }\n\t\t\t\t\thelp={ __( 'Alternative text describes your image to people who can’t see it. Add a short description with its key details.' ) }\n\t\t\t\t/> ) }\n\t\t\t</PanelBody>\n\t\t);\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<InspectorControls>\n\t\t\t\t\t{ mediaTextGeneralSettings }\n\t\t\t\t\t<PanelColorSettings\n\t\t\t\t\t\ttitle={ __( 'Color Settings' ) }\n\t\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\t\tcolorSettings={ colorSettings }\n\t\t\t\t\t/>\n\t\t\t\t</InspectorControls>\n\t\t\t\t<BlockControls>\n\t\t\t\t\t<Toolbar\n\t\t\t\t\t\tcontrols={ toolbarControls }\n\t\t\t\t\t/>\n\t\t\t\t</BlockControls>\n\t\t\t\t<div className={ classNames } style={ style } >\n\t\t\t\t\t{ this.renderMediaArea() }\n\t\t\t\t\t<InnerBlocks\n\t\t\t\t\t\tallowedBlocks={ ALLOWED_BLOCKS }\n\t\t\t\t\t\ttemplate={ TEMPLATE }\n\t\t\t\t\t\ttemplateInsertUpdatesSelection={ false }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</Fragment>\n\t\t);\n\t}\n}\n\nexport default withColors( 'backgroundColor' )( MediaTextEdit );\n"]} |