Issue #3284733 by jidrone: Provide a width percentage control (50b690fe) · Commits · project / gutenberg_content_embed

css/sass/styles.scss

+6 −0

Original line number	Diff line number	Diff line
		@@ -35,3 +35,9 @@
		}
		}
		}
		.wp-block[data-align=center] {
		.gutenberg-content-embed {
		margin-left: auto;
		margin-right: auto;
		}
		}

css/styles.css

+5 −0

Original line number	Diff line number	Diff line
		@@ -41,4 +41,9 @@
		color: #777777;
		}

		.wp-block[data-align=center] .gutenberg-content-embed {
		margin-left: auto;
		margin-right: auto;
		}

		/# sourceMappingURL=styles.css.map /
		No newline at end of file

css/styles.css.map

+1 −1

Original line number	Diff line number	Diff line
		{"version":3,"sourceRoot":"","sources":["sass/styles.scss"],"names":[],"mappings":"AAAA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE","file":"styles.css"}
		No newline at end of file
		{"version":3,"sourceRoot":"","sources":["sass/styles.scss"],"names":[],"mappings":"AAAA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE;;;AAMN;EACE;EACA","file":"styles.css"}
		No newline at end of file

js/components/drupal-content-embed.es6.js

+24 −4

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@
		(function(wp, $, Drupal, DrupalGutenberg, drupalSettings) {
		const { element, components, blockEditor } = wp;
		const { Component, Fragment } = element;
		const { Placeholder, PanelBody, SelectControl } = components;
		const { Placeholder, PanelBody, SelectControl, RangeControl } = components;
		const { InspectorControls, BlockIcon } = blockEditor;
		const __ = Drupal.t;

		@@ -179,7 +179,7 @@
		userInput
		}
		} = this;
		const { className, viewModes, attributes, setAttributes, contentTypeLabel } = this.props;
		const { className, viewModes, attributes, setAttributes, contentTypeLabel, widthControl } = this.props;
		// Suggestions List.
		let suggestionsListComponent;
		if (showSuggestions && userInput) {
		@@ -217,13 +217,18 @@
		viewModesOptions.push({ value: viewModeId, label: viewModeLabel });
		}
		}
		// Add width to class name.
		let componentClass = className;
		if (widthControl.includes(attributes.viewMode)) {
		componentClass += ' width-' + attributes.pageWidth;
		}
		// Render.
		return (
		<Fragment>
		{ html ?
		<Fragment>
		<div
		className={className}
		className={componentClass}
		// eslint-disable-next-line react/no-danger
		dangerouslySetInnerHTML={{ __html: processHtml(html) }}
		/>
		@@ -243,7 +248,8 @@
		options={viewModesOptions}
		onChange={newViewMode => {
		setAttributes({
		viewMode: newViewMode
		viewMode: newViewMode,
		pageWidth: 100
		});
		getContent(attributes.nodeId, newViewMode)
		.then(content => {
		@@ -259,6 +265,20 @@
		}}
		/>
		</PanelBody>
		{ widthControl.includes(attributes.viewMode) &&
		<PanelBody title={ __('Content Width Percentage') }>
		<RangeControl
		value={ attributes.pageWidth }
		onChange={ ( width ) => setAttributes({
		pageWidth: width
		}) }
		min={ 25 }
		max={ 100 }
		step={ 25 }
		help={ __('Content width percentage relative to the total page width on Desktop/Large devices.') }
		/>
		</PanelBody>
		}
		</Fragment>
		</InspectorControls>
		</Fragment>

js/components/drupal-content-embed.js

+26 −4

Original line number	Diff line number	Diff line
		@@ -40,7 +40,8 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
		Fragment = element.Fragment;
		var Placeholder = components.Placeholder,
		PanelBody = components.PanelBody,
		SelectControl = components.SelectControl;
		SelectControl = components.SelectControl,
		RangeControl = components.RangeControl;
		var InspectorControls = blockEditor.InspectorControls,
		BlockIcon = blockEditor.BlockIcon;
		var __ = Drupal.t;
		@@ -267,7 +268,8 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
		viewModes = _this$props.viewModes,
		attributes = _this$props.attributes,
		setAttributes = _this$props.setAttributes,
		contentTypeLabel = _this$props.contentTypeLabel;
		contentTypeLabel = _this$props.contentTypeLabel,
		widthControl = _this$props.widthControl;
		var suggestionsListComponent;

		if (showSuggestions && userInput) {
		@@ -307,8 +309,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
		}
		}

		var componentClass = className;

		if (widthControl.includes(attributes.viewMode)) {
		componentClass += ' width-' + attributes.pageWidth;
		}

		return React.createElement(Fragment, null, html ? React.createElement(Fragment, null, React.createElement("div", {
		className: className,
		className: componentClass,
		dangerouslySetInnerHTML: {
		__html: processHtml(html)
		}
		@@ -324,7 +332,8 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
		options: viewModesOptions,
		onChange: function onChange(newViewMode) {
		setAttributes({
		viewMode: newViewMode
		viewMode: newViewMode,
		pageWidth: 100
		});
		getContent(attributes.nodeId, newViewMode).then(function (content) {
		_this4.setState({
		@@ -336,6 +345,19 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
		});
		});
		}
		})), widthControl.includes(attributes.viewMode) && React.createElement(PanelBody, {
		title: __('Content Width Percentage')
		}, React.createElement(RangeControl, {
		value: attributes.pageWidth,
		onChange: function onChange(width) {
		return setAttributes({
		pageWidth: width
		});
		},
		min: 25,
		max: 100,
		step: 25,
		help: __('Content width percentage relative to the total page width on Desktop/Large devices.')
		}))))) : React.createElement(Fragment, null, React.createElement(Placeholder, {
		icon: React.createElement(BlockIcon, {
		icon: "media-document"