corvée(dépendances) ajoute Carbon Fields

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/association/index.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
+import { get, find } from 'lodash';
+
+/**
+ * Carbon Fields dependencies.
+ */
+import { withProps } from '@carbon-fields/core';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+addFilter( 'carbon-fields.association.block', 'carbon-fields/blocks', withProps( ( props ) => {
+	return {
+		hierarchyResolver() {
+			// Get the block that contains the field.
+			const block = select( 'core/block-editor' ).getBlock( props.blockId );
+
+			// Get the path.
+			const path = props.id.split( '__' );
+
+			// Remove the chunk that contains the block identifier.
+			path.shift();
+
+			// Get the hierarchy.
+			let hierarchy = path.shift();
+			let accessor = `data.${ hierarchy }`;
+
+			// Visit every branch in the tree so we can get the full hierarchy.
+			while ( path.length > 0 ) {
+				const chunk = path.shift();
+				const isGroup = chunk.indexOf( 'cf-' ) === 0;
+
+				if ( isGroup ) {
+					const groups = get( block.attributes, `${ accessor }` );
+					const group = find( groups, [ '_id', chunk ] );
+					const groupIndex = groups.indexOf( group );
+
+					accessor = `${ accessor }.${ groupIndex }`;
+					hierarchy = `${ hierarchy }[${ groupIndex }]:${ group._type }/`;
+				} else {
+					accessor = `${ accessor }.${ chunk }`;
+					hierarchy = `${ hierarchy }${ chunk }`;
+				}
+			}
+
+			return hierarchy;
+		}
+	};
+} ) );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/association/style.scss

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   Association
+   ========================================================================== */
+
+.cf-association__cols {
+	.block-editor & {
+		border-top-width: 1px;
+		margin-top: 4px;
+	}
+
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+		flex-direction: column;
+	}
+
+	.edit-post-sidebar &::before {
+		background-color: $gb-dark-gray-150;
+		display: none;
+	}
+}
+
+.cf-association__counter {
+	.edit-post-sidebar & {
+		display: none;
+	}
+}
+
+.cf-association__option {
+	.edit-post-sidebar & {
+		height: 40px;
+	}
+
+	.edit-post-sidebar & + & {
+		border-top-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-association__option-thumb {
+	.edit-post-sidebar & {
+		display: none;
+	}
+}
+
+.cf-association__option-content {
+	.edit-post-sidebar & {
+		align-items: flex-start;
+		flex-direction: column;
+		min-width: 0;
+	}
+}
+
+.cf-association__option-title {
+	.edit-post-sidebar & {
+		width: 100%;
+	}
+}
+
+.cf-association__option-actions {
+	.edit-post-sidebar .cf-association__col:first-child & {
+		min-width: 0;
+	}
+
+	.edit-post-sidebar & {
+		margin-left: auto;
+	}
+}
+
+.cf-association__option-action {
+	.edit-post-sidebar &--edit {
+		display: none;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/block-preview/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/block-preview/style.scss

@@ -0,0 +1,15 @@
+/* ------------------------------------------------------------ *\ 
+    Block Preview iFrame
+\* ------------------------------------------------------------ */
+
+body.block-editor-iframe__body {
+    .cf-block-preview {
+        display: block;
+    }
+
+    // Hide all other fields except the HTML fields with preview
+    // Also check if there is preview field at all or just show all fields
+    .cf-block__fields:has(.cf-block-preview) .cf-field:not(.cf-block-preview) {
+        display: none;
+    }
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/complex/index.js

@@ -0,0 +1,325 @@
+/**
+ * External dependencies.
+ */
+import produce from 'immer';
+import { Component } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import {
+	get,
+	set,
+	find,
+	omit,
+	assign,
+	mapKeys,
+	without,
+	cloneDeep,
+	findIndex
+} from 'lodash';
+
+/**
+ * Carbon Fields dependencies.
+ */
+import { uniqueId } from '@carbon-fields/core';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+import Field from '../../components/field';
+
+class ComplexField extends Component {
+	/**
+	 * Local state.
+	 *
+	 * @type {Object}
+	 */
+	state = {
+		collapsedGroups: this.props.value.reduce( ( accumulator, { _id, _type } ) => {
+			const group = find( this.props.field.groups, [ 'name', _type ] );
+
+			if ( ! group.collapsed ) {
+				return accumulator;
+			}
+
+			return accumulator.concat( _id );
+		}, [] )
+	};
+
+	/**
+	 * Returns a list of group values.
+	 *
+	 * @return {Array}
+	 */
+	getGroupValues() {
+		return this.props.value.map( ( group ) => {
+			const values = mapKeys( omit( group, [ '_id', '_type' ] ), ( value, key ) => key.replace( /\-/g, '_' ) );
+
+			return [ group._type, values ];
+		} );
+	}
+
+	/**
+	 * Handles adding of group.
+	 *
+	 * @param  {Object}   group
+	 * @param  {Function} callback
+	 * @return {void}
+	 */
+	handleAddGroup = ( group, callback ) => {
+		const {
+			id,
+			value,
+			onChange
+		} = this.props;
+
+		const data = {};
+
+		data._id = uniqueId();
+		data._type = group.name;
+
+		group.fields.reduce( ( accumulator, field ) => {
+			accumulator[ field.base_name ] = field.default_value;
+
+			return accumulator;
+		}, data );
+
+		onChange( id, value.concat( data ) );
+
+		callback( data );
+	}
+
+	/**
+	 * Handles cloning of group.
+	 *
+	 * @param  {Object}   group
+	 * @param  {Function} callback
+	 * @return {void}
+	 */
+	handleCloneGroup = ( group, callback ) => {
+		const {
+			id,
+			value,
+			onChange
+		} = this.props;
+
+		const index = value.indexOf( group );
+		const clonedGroup = cloneDeep( group );
+
+		clonedGroup._id = uniqueId();
+
+		onChange( id, produce( value, ( draft ) => {
+			draft.splice( index + 1, 0, clonedGroup );
+		} ) );
+
+		callback( clonedGroup );
+	}
+
+	/**
+	 * Handles removing of group.
+	 *
+	 * @param  {Object} group
+	 * @return {void}
+	 */
+	handleRemoveGroup = ( group ) => {
+		const {
+			id,
+			value,
+			onChange
+		} = this.props;
+
+		const groupIndex = findIndex( value, [ '_id', group._id ] );
+
+		onChange( id, produce( value, ( draft ) => {
+			draft.splice( groupIndex, 1 );
+		} ) );
+
+		this.setState( ( { collapsedGroups } ) => ( {
+			collapsedGroups: without( collapsedGroups, group._id )
+		} ) );
+	}
+
+	/**
+	 * Handles expanding/collapsing of group.
+	 *
+	 * @param  {string} groupId
+	 * @return {void}
+	 */
+	handleToggleGroup = ( groupId ) => {
+		this.setState( ( { collapsedGroups } ) => {
+			if ( collapsedGroups.indexOf( groupId ) > -1 ) {
+				collapsedGroups = without( collapsedGroups, groupId );
+			} else {
+				collapsedGroups = [ ...collapsedGroups, groupId ];
+			}
+
+			return { collapsedGroups };
+		} );
+	}
+
+	/**
+	 * Handles expanding/collapsing of all groups.
+	 *
+	 * @return {void}
+	 */
+	handleToggleAllGroups = () => {
+		const { value } = this.props;
+
+		this.setState( ( { collapsedGroups } ) => {
+			if ( collapsedGroups.length !== value.length ) {
+				collapsedGroups = value.map( ( group ) => group._id );
+			} else {
+				collapsedGroups = [];
+			}
+
+			return { collapsedGroups };
+		} );
+	}
+
+	/**
+	 * Handles setuping of group.
+	 *
+	 * @param  {Object} group
+	 * @param  {Object} props
+	 * @return {Object}
+	 */
+	handleGroupSetup = ( group, props ) => {
+		const fields = get( find( this.props.field.groups, [ 'name', group._type ] ), 'fields', [] );
+		const values = omit( group, [ '_id', '_type' ] );
+
+		return assign( {}, props, {
+			id: group._id,
+			fields: fields,
+			collapsed: this.state.collapsedGroups.indexOf( group._id ) > -1,
+			context: 'block',
+			values
+		} );
+	}
+
+	/**
+	 * Handles setuping of group's field.
+	 *
+	 * @param  {Object} field
+	 * @param  {Object} props
+	 * @param  {Object} groupProps
+	 * @return {Array}
+	 */
+	handleGroupFieldSetup = ( field, props, groupProps ) => {
+		const { blockId } = this.props;
+		const id = `${ this.props.id }__${ groupProps.id }__${ field.base_name }`;
+		const value = get( groupProps, `values.${ field.base_name }` );
+
+		return [ Field, assign( {}, props, {
+			key: id,
+			id: id,
+			name: field.base_name,
+			containerId: this.props.containerId,
+			blockId,
+			field,
+			value,
+			onChange: this.handleGroupFieldChange
+		} ) ];
+	}
+
+	/**
+	 * Handles the change of group field.
+	 *
+	 * @param  {string} fieldId
+	 * @param  {mixed}  fieldValue
+	 * @return {void}
+	 */
+	handleGroupFieldChange = ( fieldId, fieldValue ) => {
+		const {
+			id,
+			value,
+			onChange
+		} = this.props;
+
+		onChange( id, produce( value, ( draft ) => {
+			const path = fieldId.split( '__' );
+			const fieldName = path.pop();
+			const group = find( draft, [ '_id', path.pop() ] );
+
+			set( group, fieldName, fieldValue );
+		} ) );
+	}
+
+	/**
+	 * Renders the component.
+	 *
+	 * @return {Object}
+	 */
+	render() {
+		const {
+			handleGroupSetup,
+			handleGroupFieldSetup,
+			handleAddGroup,
+			handleCloneGroup,
+			handleRemoveGroup,
+			handleToggleGroup,
+			handleToggleAllGroups
+		} = this;
+
+		const { value, children } = this.props;
+
+		const groupValues = this.getGroupValues();
+		const allGroupsAreCollapsed = this.state.collapsedGroups.length === value.length;
+
+		return children( {
+			groupValues,
+			allGroupsAreCollapsed,
+			handleGroupSetup,
+			handleGroupFieldSetup,
+			handleAddGroup,
+			handleCloneGroup,
+			handleRemoveGroup,
+			handleToggleGroup,
+			handleToggleAllGroups
+		} );
+	}
+}
+
+addFilter( 'carbon-fields.complex.block', 'carbon-fields/blocks', ( OriginalComplexField ) => ( props ) => {
+	const {
+		id,
+		name,
+		value,
+		error,
+		field
+	} = props;
+
+	return (
+		<ComplexField { ...props }>
+			{ ( {
+				groupValues,
+				allGroupsAreCollapsed,
+				handleGroupSetup,
+				handleGroupFieldSetup,
+				handleAddGroup,
+				handleCloneGroup,
+				handleRemoveGroup,
+				handleToggleGroup,
+				handleToggleAllGroups
+			} ) => (
+				<OriginalComplexField
+					groupIdKey="_id"
+					groupFilterKey="_type"
+					id={ id }
+					name={ name }
+					value={ value }
+					error={ error }
+					field={ field }
+					groupValues={ groupValues }
+					allGroupsAreCollapsed={ allGroupsAreCollapsed }
+					onGroupSetup={ handleGroupSetup }
+					onGroupFieldSetup={ handleGroupFieldSetup }
+					onAddGroup={ handleAddGroup }
+					onCloneGroup={ handleCloneGroup }
+					onRemoveGroup={ handleRemoveGroup }
+					onToggleGroup={ handleToggleGroup }
+					onToggleAllGroups={ handleToggleAllGroups }
+					onChange={ props.onChange }
+				/>
+			) }
+		</ComplexField>
+	);
+} );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/complex/style.scss

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   Complex
+   ========================================================================== */
+
+.cf-complex__placeholder-label {
+	font-size: $wp-font-size;
+	line-height: $wp-line-height;
+}
+
+.cf-complex__inserter-menu {
+	.block-editor & {
+		z-index: 10;
+		list-style: none outside none;
+		border: 1px solid $gb-light-gray-500;
+		box-shadow: 0 3px 30px rgba($gb-dark-gray-900, .1);
+		background-color: $color-white;
+
+		&::before,
+		&::after {
+			position: absolute;
+			top: 50%;
+			right: 100%;
+			width: 0;
+			height: 0;
+			border-width: 8px 8px 8px 0;
+			border-style: solid;
+			margin-top: -8px;
+			content: '';
+		}
+
+		&::before {
+			border-color: transparent $gb-light-gray-500;
+			margin-right: 1px;
+		}
+
+		&::after {
+			border-color: transparent $color-white;
+		}
+	}
+}
+
+.cf-complex__inserter-item {
+	.block-editor & {
+		color: $gb-dark-gray-600;
+
+		&:hover {
+			color: $gb-dark-gray-900;
+		}
+	}
+}
+
+.cf-complex__inserter-button {
+	.edit-post-sidebar .cf-complex__tabs & {
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-complex__tabs-item {
+	.block-editor & {
+		color: $gb-dark-gray-500;
+	}
+
+	.block-editor &--current {
+		color: $gb-dark-gray-900;
+	}
+
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-complex__group-head {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-complex__group-body {
+	.edit-post-sidebar & {
+		display: block;
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-complex__group-actions {
+	.edit-post-sidebar &--tabbed {
+		border-color: $gb-dark-gray-150;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/datetime/index.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies.
+ */
+import { format } from '@wordpress/date';
+import { Component } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+class DateTimeField extends Component {
+	/**
+	 * Handles the change.
+	 *
+	 * @param  {Date[]} selectedDates
+	 * @param  {string} selectedDateStr
+	 * @return {void}
+	 */
+	handleChange = ( selectedDates, selectedDateStr ) => {
+		const {
+			id,
+			onChange,
+			value,
+			field
+		} = this.props;
+
+		const formattedDate = format( field.storage_format, selectedDateStr );
+
+		if ( formattedDate !== value ) {
+			onChange( id, formattedDate );
+		}
+	}
+
+	/**
+	 * Renders the component.
+	 *
+	 * @return {Object}
+	 */
+	render() {
+		const { handleChange } = this;
+		const { children } = this.props;
+
+		return children( {
+			handleChange
+		} );
+	}
+}
+
+addFilter( 'carbon-fields.date_time.block', 'carbon-fields/blocks', ( OriginalDateTimeField ) => ( props ) => {
+	return (
+		<DateTimeField { ...props }>
+			{ ( {
+				handleChange
+			} ) => (
+				<OriginalDateTimeField
+					buttonText={ __( 'Select Date', 'carbon-fields-ui' ) }
+					{ ...props }
+					onChange={ handleChange }
+				/>
+			) }
+		</DateTimeField>
+	);
+} );
+
+addFilter( 'carbon-fields.date.block', 'carbon-fields/blocks', ( OriginalDateField ) => ( props ) => {
+	return (
+		<DateTimeField { ...props }>
+			{ ( {
+				handleChange
+			} ) => (
+				<OriginalDateField
+					{ ...props }
+					onChange={ handleChange }
+				/>
+			) }
+		</DateTimeField>
+	);
+} );
+
+addFilter( 'carbon-fields.time.block', 'carbon-fields/blocks', ( OriginalTimeField ) => ( props ) => {
+	return (
+		<DateTimeField { ...props }>
+			{ ( {
+				handleChange
+			} ) => (
+				<OriginalTimeField
+					{ ...props }
+					onChange={ handleChange }
+				/>
+			) }
+		</DateTimeField>
+	);
+} );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/datetime/style.scss

@@ -0,0 +1,44 @@
+/* ==========================================================================
+   DateTime
+   ========================================================================== */
+
+.cf-datetime__inner {
+	.edit-post-sidebar & {
+		position: relative;
+	}
+
+	.edit-post-sidebar &::before {
+		position: absolute;
+		top: 50%;
+		left: 9px;
+		display: inline-block;
+		margin-top: -10px;
+	}
+}
+
+.cf-datetime__input {
+	.wp-block .cf-field & {
+		min-width: 0;
+		border-color: $wp-color-gray-light-500;
+		border-radius: 0;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	.edit-post-sidebar .cf-field & {
+		padding-left: 35px;
+	}
+}
+
+.cf-datetime__button {
+	.wp-block & {
+		height: auto;
+		border-color: $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		display: none;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/file/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+addFilter( 'carbon-fields.file.block', 'carbon-fields/blocks', ( OriginalFileField ) => ( props ) => {
+	return (
+		<OriginalFileField
+			buttonLabel={ __( 'Select File', 'carbon-fields-ui' ) }
+			mediaLibraryButtonLabel={ __( 'Use File', 'carbon-fields-ui' ) }
+			mediaLibraryTitle={ __( 'Select File', 'carbon-fields-ui' ) }
+			{ ...props }
+		/>
+	);
+} );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/file/style.scss

@@ -0,0 +1,21 @@
+/* ==========================================================================
+   File
+   ========================================================================== */
+
+.cf-file__inner {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-file__content {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+	}
+}
+
+.cf-file__name {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/footer-scripts/index.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * The internal dependencies.
+ */
+import NotSupportedField from '../../components/not-supported-field';
+
+addFilter( 'carbon-fields.footer_scripts.block', 'carbon-fields/blocks', () => ( props ) => <NotSupportedField type={ props.field.type } /> );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/header-scripts/index.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * The internal dependencies.
+ */
+import NotSupportedField from '../../components/not-supported-field';
+
+addFilter( 'carbon-fields.header_scripts.block', 'carbon-fields/blocks', () => ( props ) => <NotSupportedField type={ props.field.type } /> );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/hidden/index.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * The internal dependencies.
+ */
+import NotSupportedField from '../../components/not-supported-field';
+
+addFilter( 'carbon-fields.hidden.block', 'carbon-fields/blocks', () => ( props ) => <NotSupportedField type={ props.field.type } /> );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/image/index.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+addFilter( 'carbon-fields.image.block', 'carbon-fields/blocks', ( OriginalImageField ) => ( props ) => {
+	return (
+		<OriginalImageField
+			buttonLabel={ __( 'Select Image', 'carbon-fields-ui' ) }
+			mediaLibraryButtonLabel={ __( 'Use Image', 'carbon-fields-ui' ) }
+			mediaLibraryTitle={ __( 'Select Image', 'carbon-fields-ui' ) }
+			{ ...props }
+		/>
+	);
+} );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/index.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies.
+ */
+import { compose } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { withDispatch } from '@wordpress/data';
+
+/**
+ * Carbon Fields dependencies.
+ */
+import { withValidation } from '@carbon-fields/core';
+
+/**
+ * Internal dependencies.
+ */
+import withConditionalLogic from '../hocs/with-conditional-logic';
+import isGutenberg from '../../metaboxes/utils/is-gutenberg';
+
+/**
+ * Connects every field to the store.
+ */
+addFilter( 'carbon-fields.field-edit.block', 'carbon-fields/blocks', compose(
+	withConditionalLogic,
+	withDispatch( ( dispatch ) => {
+		// Widgets support - WordPress 5.8
+		if ( isGutenberg() ) {
+			const { lockPostSaving, unlockPostSaving } = dispatch( 'core/editor' );
+
+			return {
+				lockSaving: lockPostSaving,
+				unlockSaving: unlockPostSaving
+			};
+		}
+
+		return {};
+	} ),
+	withValidation
+) );
+
+/**
+ * Internal dependencies.
+ */
+import './association';
+import './complex';
+import './datetime';
+import './file';
+import './footer-scripts';
+import './header-scripts';
+import './hidden';
+import './image';
+import './map';
+import './multiselect';
+import './media-gallery';
+import './oembed';
+import './radio';
+import './radio-image';
+import './select';
+import './set';
+import './sidebar';
+import './separator';
+import './text';
+import './textarea';
+import './block-preview';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/map/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/map/style.scss

@@ -0,0 +1,15 @@
+/* ==========================================================================
+   Map
+   ========================================================================== */
+
+.cf-map__canvas {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+		border-top-width: 1px;
+		margin-top: $size-base;
+	}
+
+	.block-editor .cf-map__search:focus-within ~ & {
+		border-color: $wp-color-medium-blue;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/media-gallery/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+addFilter( 'carbon-fields.media_gallery.block', 'carbon-fields/blocks', ( OriginalMediaGalleryField ) => ( props ) => {
+	return (
+		<OriginalMediaGalleryField
+			buttonLabel={ __( 'Select Attachments', 'carbon-fields-ui' ) }
+			mediaLibraryButtonLabel={ __( 'Use Attachments', 'carbon-fields-ui' ) }
+			mediaLibraryTitle={ __( 'Select Attachments', 'carbon-fields-ui' ) }
+			{ ...props }
+		/>
+	);
+} );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/media-gallery/style.scss

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   Media Gallery
+   ========================================================================== */
+
+.cf-media-gallery__item {
+	.block-editor & {
+		@media (min-width: 1440px) {
+			flex-basis: 16.6667%;
+		}
+
+		@media (min-width: 1680px) {
+			flex-basis: 16.6667%;
+		}
+	}
+
+	.edit-post-sidebar & {
+		flex-basis: 50%;
+	}
+}
+
+.cf-media-gallery__inner {
+	.wp-block & {
+		border: 1px solid $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		border: 1px solid $gb-dark-gray-150;
+	}
+}
+
+.cf-media-gallery__actions {
+	.wp-block & {
+		border-top: 1px solid $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		border-top: 1px solid $gb-dark-gray-150;
+	}
+}
+
+.cf-media-gallery__item-inner {
+	.wp-block & {
+		border: 1px solid $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		border: 1px solid $gb-dark-gray-150;
+	}
+}
+
+.cf-media-gallery__item-preview {
+	.block-editor & {
+		background-color: $wp-color-gray-light-200;
+	}
+}
+
+.cf-media-gallery__item-name {
+	.block-editor & {
+		background-color: $wp-color-gray-light-200;
+	}
+
+	.wp-block & {
+		border-top: 1px solid $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		border-top: 1px solid $gb-dark-gray-150;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/multiselect/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/multiselect/style.scss

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   Multiselect
+   ========================================================================== */
+
+.cf-multiselect__control  {
+	.wp-block & {
+		border-radius: 0;
+	}
+
+	.edit-post-sidebar &,
+	.edit-post-sidebar &:hover {
+		border-color: $gb-dark-gray-150;
+	}
+
+	.edit-post-sidebar &--is-focused,
+	.edit-post-sidebar &--is-focused:hover {
+		border-color: $wp-color-medium-blue;
+		box-shadow: 0 0 0 1px $wp-color-medium-blue;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/oembed/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/oembed/style.scss

@@ -0,0 +1,16 @@
+/* ==========================================================================
+   oEmbed
+   ========================================================================== */
+
+.cf-oembed__preview {
+	.edit-post-sidebar & {
+		border-color: $gb-dark-gray-150;
+		border-top-width: 1px;
+		margin-top: $size-base;
+	}
+
+	.block-editor .cf-oembed:focus-within & {
+		border-color: $wp-color-medium-blue;
+	}
+}
+

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/radio-image/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/radio-image/style.scss

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   Radio Image
+   ========================================================================== */
+
+.cf-radio__list-item {
+	.block-editor & {
+		margin: 0;
+	}
+
+	.wp-block .cf-radio-image & {
+		@media (min-width: 1440px) {
+			flex-basis: 25%;
+		}
+
+		@media (min-width: 1680px) {
+			flex-basis: 25%;
+		}
+	}
+
+	.edit-post-sidebar .cf-radio-image & {
+		flex-basis: 33.3333%;
+	}
+}
+
+.cf-radio-image__image {
+	.wp-block & {
+		border: 1px solid $wp-color-gray-light-500;
+	}
+
+	.edit-post-sidebar & {
+		border: 1px solid $gb-dark-gray-150;
+	}
+
+	.block-editor .cf-radio__input:focus ~ .cf-radio__label &,
+	.block-editor .cf-radio__input:checked ~ .cf-radio__label & {
+		outline: 2px solid $wp-color-medium-blue;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/radio/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/radio/style.scss

@@ -0,0 +1,9 @@
+/* ==========================================================================
+   Radio
+   ========================================================================== */
+
+.cf-radio__list {
+	.wp-block & {
+		list-style: none outside none;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/select/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/select/style.scss

@@ -0,0 +1,14 @@
+/* ==========================================================================
+   Select
+   ========================================================================== */
+
+.cf-select__input {
+	.wp-block .cf-field & {
+		border-color: $wp-color-gray-light-500;
+		border-radius: 0;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/separator/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/separator/style.scss

@@ -0,0 +1,9 @@
+/* ==========================================================================
+   Separator
+   ========================================================================== */
+
+.cf-separator {
+	.block-editor & h3 {
+		margin: 0;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/set/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/set/style.scss

@@ -0,0 +1,9 @@
+/* ==========================================================================
+   Set
+   ========================================================================== */
+
+.cf-set__list {
+	.wp-block & {
+		list-style: none outside none;
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/sidebar/index.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * The internal dependencies.
+ */
+import NotSupportedField from '../../components/not-supported-field';
+
+addFilter( 'carbon-fields.sidebar.block', 'carbon-fields/blocks', () => ( props ) => <NotSupportedField type={ props.field.type } /> );

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/text/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/text/style.scss

@@ -0,0 +1,14 @@
+/* ==========================================================================
+   Text
+   ========================================================================== */
+
+.cf-text__input {
+	.wp-block .cf-field & {
+		border-color: $wp-color-gray-light-500;
+		border-radius: 0;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/textarea/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies.
+ */
+import './style.scss';

web/vendor/htmlburger/carbon-fields/packages/blocks/fields/textarea/style.scss

@@ -0,0 +1,16 @@
+/* ==========================================================================
+   Textarea
+   ========================================================================== */
+
+.cf-textarea__input {
+	.wp-block .cf-field & {
+		border-color: $wp-color-gray-light-500;
+		border-radius: 0;
+		transition: border-color $transition-base;
+
+		&:focus {
+			border-color: $wp-color-medium-blue;
+			box-shadow: none;
+		}
+	}
+}