@wordpress/block-library
Version:
Block library for the WordPress editor.
257 lines (251 loc) • 8.71 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SocialLinksEdit = SocialLinksEdit;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const sizeOptions = [{
label: (0, _i18n.__)('Default'),
value: ''
}, {
label: (0, _i18n.__)('Small'),
value: 'has-small-icon-size'
}, {
label: (0, _i18n.__)('Normal'),
value: 'has-normal-icon-size'
}, {
label: (0, _i18n.__)('Large'),
value: 'has-large-icon-size'
}, {
label: (0, _i18n.__)('Huge'),
value: 'has-huge-icon-size'
}];
function SocialLinksEdit(props) {
var _attributes$layout$or;
const {
clientId,
attributes,
iconBackgroundColor,
iconColor,
isSelected,
setAttributes,
setIconBackgroundColor,
setIconColor
} = props;
const {
iconBackgroundColorValue,
iconColorValue,
openInNewTab,
showLabels,
size
} = attributes;
const {
hasSocialIcons,
hasSelectedChild
} = (0, _data.useSelect)(select => {
const {
getBlockCount,
hasSelectedInnerBlock
} = select(_blockEditor.store);
return {
hasSocialIcons: getBlockCount(clientId) > 0,
hasSelectedChild: hasSelectedInnerBlock(clientId)
};
}, [clientId]);
const hasAnySelected = isSelected || hasSelectedChild;
const logosOnly = attributes.className?.includes('is-style-logos-only');
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
// Remove icon background color when logos only style is selected or
// restore it when any other style is selected.
(0, _element.useEffect)(() => {
if (logosOnly) {
let restore;
setAttributes(prev => {
restore = {
iconBackgroundColor: prev.iconBackgroundColor,
iconBackgroundColorValue: prev.iconBackgroundColorValue,
customIconBackgroundColor: prev.customIconBackgroundColor
};
return {
iconBackgroundColor: undefined,
iconBackgroundColorValue: undefined,
customIconBackgroundColor: undefined
};
});
return () => setAttributes({
...restore
});
}
}, [logosOnly, setAttributes]);
// Fallback color values are used maintain selections in case switching
// themes and named colors in palette do not match.
const className = (0, _clsx.default)(size, {
'has-visible-labels': showLabels,
'has-icon-color': iconColor.color || iconColorValue,
'has-icon-background-color': iconBackgroundColor.color || iconBackgroundColorValue
});
const blockProps = (0, _blockEditor.useBlockProps)({
className
});
const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
templateLock: false,
orientation: (_attributes$layout$or = attributes.layout?.orientation) !== null && _attributes$layout$or !== void 0 ? _attributes$layout$or : 'horizontal',
__experimentalAppenderTagName: 'li',
renderAppender: !hasSocialIcons || hasAnySelected ? _blockEditor.InnerBlocks.ButtonBlockAppender : undefined
});
const colorSettings = [{
// Use custom attribute as fallback to prevent loss of named color selection when
// switching themes to a new theme that does not have a matching named color.
value: iconColor.color || iconColorValue,
onChange: colorValue => {
setIconColor(colorValue);
setAttributes({
iconColorValue: colorValue
});
},
label: (0, _i18n.__)('Icon color'),
resetAllFilter: () => {
setIconColor(undefined);
setAttributes({
iconColorValue: undefined
});
}
}];
if (!logosOnly) {
colorSettings.push({
// Use custom attribute as fallback to prevent loss of named color selection when
// switching themes to a new theme that does not have a matching named color.
value: iconBackgroundColor.color || iconBackgroundColorValue,
onChange: colorValue => {
setIconBackgroundColor(colorValue);
setAttributes({
iconBackgroundColorValue: colorValue
});
},
label: (0, _i18n.__)('Icon background'),
resetAllFilter: () => {
setIconBackgroundColor(undefined);
setAttributes({
iconBackgroundColorValue: undefined
});
}
});
}
const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
openInNewTab: false,
showLabels: false,
size: undefined
});
},
dropdownMenuProps: dropdownMenuProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
isShownByDefault: true,
hasValue: () => !!size,
label: (0, _i18n.__)('Icon size'),
onDeselect: () => setAttributes({
size: undefined
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Icon Size'),
onChange: newSize => {
setAttributes({
size: newSize === '' ? undefined : newSize
});
},
value: size !== null && size !== void 0 ? size : '',
options: sizeOptions
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
isShownByDefault: true,
label: (0, _i18n.__)('Show text'),
hasValue: () => !!showLabels,
onDeselect: () => setAttributes({
showLabels: false
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Show text'),
checked: showLabels,
onChange: () => setAttributes({
showLabels: !showLabels
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
isShownByDefault: true,
label: (0, _i18n.__)('Open links in new tab'),
hasValue: () => !!openInNewTab,
onDeselect: () => setAttributes({
openInNewTab: false
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Open links in new tab'),
checked: openInNewTab,
onChange: () => setAttributes({
openInNewTab: !openInNewTab
})
})
})]
})
}), colorGradientSettings.hasColorsOrGradients && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
group: "color",
children: [colorSettings.map(({
onChange,
label,
value,
resetAllFilter
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
__experimentalIsRenderedInSidebar: true,
settings: [{
colorValue: value,
label,
onColorChange: onChange,
isShownByDefault: true,
resetAllFilter,
enableAlpha: true,
clearable: true
}],
panelId: clientId,
...colorGradientSettings
}, `social-links-color-${label}`)), !logosOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ContrastChecker, {
textColor: iconColorValue,
backgroundColor: iconBackgroundColorValue,
isLargeText: false
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
...innerBlocksProps
})]
});
}
const iconColorAttributes = {
iconColor: 'icon-color',
iconBackgroundColor: 'icon-background-color'
};
var _default = exports.default = (0, _blockEditor.withColors)(iconColorAttributes)(SocialLinksEdit);
//# sourceMappingURL=edit.js.map