@wordpress/block-library
Version:
Block library for the WordPress editor.
261 lines (256 loc) • 9.02 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _keycodes = require("@wordpress/keycodes");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _blocks = require("@wordpress/blocks");
var _socialList = require("./social-list");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const SocialLinkURLPopover = ({
url,
setAttributes,
setPopover,
popoverAnchor,
clientId
}) => {
const {
removeBlock
} = (0, _data.useDispatch)(_blockEditor.store);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.URLPopover, {
anchor: popoverAnchor,
"aria-label": (0, _i18n.__)('Edit social link'),
onClose: () => {
setPopover(false);
popoverAnchor?.focus();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
className: "block-editor-url-popover__link-editor",
onSubmit: event => {
event.preventDefault();
setPopover(false);
popoverAnchor?.focus();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-url-input",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.URLInput, {
value: url,
onChange: nextURL => setAttributes({
url: nextURL
}),
placeholder: (0, _i18n.__)('Enter social link'),
label: (0, _i18n.__)('Enter social link'),
hideLabelFromVision: true,
disableSuggestions: true,
onKeyDown: event => {
if (!!url || event.defaultPrevented || ![_keycodes.BACKSPACE, _keycodes.DELETE].includes(event.keyCode)) {
return;
}
removeBlock(clientId);
},
suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
icon: _icons.keyboardReturn,
label: (0, _i18n.__)('Apply'),
type: "submit",
size: "small"
})
})
})
})
})
});
};
const SocialLinkEdit = ({
attributes,
context,
isSelected,
setAttributes,
clientId,
name
}) => {
const {
url,
service,
label = '',
rel
} = attributes;
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
const {
showLabels,
iconColor,
iconColorValue,
iconBackgroundColor,
iconBackgroundColorValue
} = context;
const [showURLPopover, setPopover] = (0, _element.useState)(false);
const wrapperClasses = (0, _clsx.default)('wp-social-link',
// Manually adding this class for backwards compatibility of CSS when moving the
// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
'wp-block-social-link', 'wp-social-link-' + service, {
'wp-social-link__is-incomplete': !url,
[`has-${iconColor}-color`]: iconColor,
[`has-${iconBackgroundColor}-background-color`]: iconBackgroundColor
});
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
const isContentOnlyMode = (0, _blockEditor.useBlockEditingMode)() === 'contentOnly';
const {
activeVariation
} = (0, _data.useSelect)(select => {
const {
getActiveBlockVariation
} = select(_blocks.store);
return {
activeVariation: getActiveBlockVariation(name, attributes)
};
}, [name, attributes]);
const {
icon,
label: socialLinkName
} = (0, _socialList.getSocialService)(activeVariation);
// The initial label (ie. the link text) is an empty string.
// We want to prevent empty links so that the link text always fallbacks to
// the social name, even when users enter and save an empty string or only
// spaces. The PHP render callback fallbacks to the social name as well.
const socialLinkText = label.trim() === '' ? socialLinkName : label;
const ref = (0, _element.useRef)();
const blockProps = (0, _blockEditor.useBlockProps)({
className: 'wp-block-social-link-anchor',
ref: (0, _compose.useMergeRefs)([setPopoverAnchor, ref]),
onClick: () => setPopover(true),
onKeyDown: event => {
if (event.keyCode === _keycodes.ENTER) {
event.preventDefault();
setPopover(true);
}
}
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [isContentOnlyMode && showLabels &&
/*#__PURE__*/
// Add an extra control to modify the label attribute when content only mode is active.
// With content only mode active, the inspector is hidden, so users need another way
// to edit this attribute.
(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
group: "other",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: {
placement: 'bottom-start'
},
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
onClick: onToggle,
"aria-haspopup": "true",
"aria-expanded": isOpen,
children: (0, _i18n.__)('Text')
}),
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
className: "wp-block-social-link__toolbar_content_text",
label: (0, _i18n.__)('Text'),
help: (0, _i18n.__)('Provide a text label or use the default.'),
value: label,
onChange: value => setAttributes({
label: value
}),
placeholder: socialLinkName
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setAttributes({
label: undefined
});
},
dropdownMenuProps: dropdownMenuProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
isShownByDefault: true,
label: (0, _i18n.__)('Text'),
hasValue: () => !!label,
onDeselect: () => {
setAttributes({
label: undefined
});
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Text'),
help: (0, _i18n.__)('The text is visible when enabled from the parent Social Icons block.'),
value: label,
onChange: value => setAttributes({
label: value
}),
placeholder: socialLinkName
})
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
group: "advanced",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Link rel'),
value: rel || '',
onChange: value => setAttributes({
rel: value
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
role: "presentation",
className: wrapperClasses,
style: {
color: iconColorValue,
backgroundColor: iconBackgroundColorValue
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
"aria-haspopup": "dialog",
...blockProps,
role: "button",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _clsx.default)('wp-block-social-link-label', {
'screen-reader-text': !showLabels
}),
children: socialLinkText
})]
}), isSelected && showURLPopover && /*#__PURE__*/(0, _jsxRuntime.jsx)(SocialLinkURLPopover, {
url: url,
setAttributes: setAttributes,
setPopover: setPopover,
popoverAnchor: popoverAnchor,
clientId: clientId
})]
})]
});
};
var _default = exports.default = SocialLinkEdit;
//# sourceMappingURL=edit.js.map