: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const formatUppercase = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
/* harmony default export */ const format_uppercase = (formatUppercase);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-lowercase.js
const formatLowercase = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
/* harmony default export */ const format_lowercase = (formatLowercase);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-capitalize.js
const formatCapitalize = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7.1 6.8L3.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H7.1zm-.8 6.8L8 8.9l1.7 4.7H6.3zm14.5-1.5c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2 .1.8-.2 1.4-.6 2z"
/* harmony default export */ const format_capitalize = (formatCapitalize);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/text-transform-control/index.js
const TEXT_TRANSFORMS = [{
label: (0,external_wp_i18n_namespaceObject.__)('None'),
label: (0,external_wp_i18n_namespaceObject.__)('Uppercase'),
label: (0,external_wp_i18n_namespaceObject.__)('Lowercase'),
label: (0,external_wp_i18n_namespaceObject.__)('Capitalize'),
* Control to facilitate text transform selections.
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
* @return {Element} Text transform control.
function TextTransformControl({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SegmentedTextControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Letter case'),
options: TEXT_TRANSFORMS,
className: dist_clsx('block-editor-text-transform-control', className),
onChange(newValue === value ? undefined : newValue);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-underline.js
const formatUnderline = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7 18v1h10v-1H7zm5-2c1.5 0 2.6-.4 3.4-1.2.8-.8 1.1-2 1.1-3.5V5H15v5.8c0 1.2-.2 2.1-.6 2.8-.4.7-1.2 1-2.4 1s-2-.3-2.4-1c-.4-.7-.6-1.6-.6-2.8V5H7.5v6.2c0 1.5.4 2.7 1.1 3.5.8.9 1.9 1.3 3.4 1.3z"
/* harmony default export */ const format_underline = (formatUnderline);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/format-strikethrough.js
const formatStrikethrough = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M9.1 9v-.5c0-.6.2-1.1.7-1.4.5-.3 1.2-.5 2-.5.7 0 1.4.1 2.1.3.7.2 1.4.5 2.1.9l.2-1.9c-.6-.3-1.2-.5-1.9-.7-.8-.1-1.6-.2-2.4-.2-1.5 0-2.7.3-3.6 1-.8.7-1.2 1.5-1.2 2.6V9h2zM20 12H4v1h8.3c.3.1.6.2.8.3.5.2.9.5 1.1.8.3.3.4.7.4 1.2 0 .7-.2 1.1-.8 1.5-.5.3-1.2.5-2.1.5-.8 0-1.6-.1-2.4-.3-.8-.2-1.5-.5-2.2-.8L7 18.1c.5.2 1.2.4 2 .6.8.2 1.6.3 2.4.3 1.7 0 3-.3 3.9-1 .9-.7 1.3-1.6 1.3-2.8 0-.9-.2-1.7-.7-2.2H20v-1z"
/* harmony default export */ const format_strikethrough = (formatStrikethrough);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/text-decoration-control/index.js
const TEXT_DECORATIONS = [{
label: (0,external_wp_i18n_namespaceObject.__)('None'),
label: (0,external_wp_i18n_namespaceObject.__)('Underline'),
label: (0,external_wp_i18n_namespaceObject.__)('Strikethrough'),
icon: format_strikethrough
* Control to facilitate text decoration selections.
* @param {Object} props Component props.
* @param {string} props.value Currently selected text decoration.
* @param {Function} props.onChange Handles change in text decoration selection.
* @param {string} props.className Additional class name to apply.
* @return {Element} Text decoration control.
function TextDecorationControl({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SegmentedTextControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Decoration'),
options: TEXT_DECORATIONS,
className: dist_clsx('block-editor-text-decoration-control', className),
onChange(newValue === value ? undefined : newValue);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/text-horizontal.js
const textHorizontal = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M8.2 14.4h3.9L13 17h1.7L11 6.5H9.3L5.6 17h1.7l.9-2.6zm2-5.5 1.4 4H8.8l1.4-4zm7.4 7.5-1.3.8.8 1.4H5.5V20h14.3l-2.2-3.6z"
/* harmony default export */ const text_horizontal = (textHorizontal);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/text-vertical.js
const textVertical = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M7 5.6v1.7l2.6.9v3.9L7 13v1.7L17.5 11V9.3L7 5.6zm4.2 6V8.8l4 1.4-4 1.4zm-5.7 5.6V5.5H4v14.3l3.6-2.2-.8-1.3-1.3.9z"
/* harmony default export */ const text_vertical = (textVertical);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/writing-mode-control/index.js
label: (0,external_wp_i18n_namespaceObject.__)('Horizontal'),
label: (0,external_wp_i18n_namespaceObject.__)('Vertical'),
value: (0,external_wp_i18n_namespaceObject.isRTL)() ? 'vertical-lr' : 'vertical-rl',
* Control to facilitate writing mode selections.
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected writing mode.
* @param {Function} props.onChange Handles change in the writing mode selection.
* @return {Element} Writing Mode control.
function WritingModeControl({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SegmentedTextControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Orientation'),
className: dist_clsx('block-editor-writing-mode-control', className),
onChange(newValue === value ? undefined : newValue);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/typography-panel.js
const MIN_TEXT_COLUMNS = 1;
const MAX_TEXT_COLUMNS = 6;
function useHasTypographyPanel(settings) {
const hasFontFamily = useHasFontFamilyControl(settings);
const hasLineHeight = useHasLineHeightControl(settings);
const hasFontAppearance = useHasAppearanceControl(settings);
const hasLetterSpacing = useHasLetterSpacingControl(settings);
const hasTextAlign = useHasTextAlignmentControl(settings);
const hasTextTransform = useHasTextTransformControl(settings);
const hasTextDecoration = useHasTextDecorationControl(settings);
const hasWritingMode = useHasWritingModeControl(settings);
const hasTextColumns = useHasTextColumnsControl(settings);
const hasFontSize = useHasFontSizeControl(settings);
return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasWritingMode || hasTextColumns;
function useHasFontSizeControl(settings) {
return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
function useHasFontFamilyControl(settings) {
return ['default', 'theme', 'custom'].some(key => settings?.typography?.fontFamilies?.[key]?.length);
function useHasLineHeightControl(settings) {
return settings?.typography?.lineHeight;
function useHasAppearanceControl(settings) {
return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
function useAppearanceControlLabel(settings) {
if (!settings?.typography?.fontStyle) {
return (0,external_wp_i18n_namespaceObject.__)('Font weight');
if (!settings?.typography?.fontWeight) {
return (0,external_wp_i18n_namespaceObject.__)('Font style');
return (0,external_wp_i18n_namespaceObject.__)('Appearance');
function useHasLetterSpacingControl(settings) {
return settings?.typography?.letterSpacing;
function useHasTextTransformControl(settings) {
return settings?.typography?.textTransform;
function useHasTextAlignmentControl(settings) {
return settings?.typography?.textAlign;
function useHasTextDecorationControl(settings) {
return settings?.typography?.textDecoration;
function useHasWritingModeControl(settings) {
return settings?.typography?.writingMode;
function useHasTextColumnsControl(settings) {
return settings?.typography?.textColumns;
* Concatenate all the font sizes into a single list for the font size picker.
* @param {Object} settings The global styles settings.
* @return {Array} The merged font sizes.
function getMergedFontSizes(settings) {
var _fontSizes$custom, _fontSizes$theme, _fontSizes$default;
const fontSizes = settings?.typography?.fontSizes;
const defaultFontSizesEnabled = !!settings?.typography?.defaultFontSizes;
return [...((_fontSizes$custom = fontSizes?.custom) !== null && _fontSizes$custom !== void 0 ? _fontSizes$custom : []), ...((_fontSizes$theme = fontSizes?.theme) !== null && _fontSizes$theme !== void 0 ? _fontSizes$theme : []), ...(defaultFontSizesEnabled ? (_fontSizes$default = fontSizes?.default) !== null && _fontSizes$default !== void 0 ? _fontSizes$default : [] : [])];
function TypographyToolsPanel({
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const updatedValue = resetAllFilter(value);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Typography'),
dropdownMenuProps: dropdownMenuProps,
const typography_panel_DEFAULT_CONTROLS = {
function TypographyPanel({
as: Wrapper = TypographyToolsPanel,
defaultControls = typography_panel_DEFAULT_CONTROLS
const decodeValue = rawValue => getValueFromVariable({
const hasFontFamilyEnabled = useHasFontFamilyControl(settings);
const fontFamilies = settings?.typography?.fontFamilies;
const mergedFontFamilies = (0,external_wp_element_namespaceObject.useMemo)(() => {
return ['default', 'theme', 'custom'].flatMap(key => {
return (_fontFamilies$key = fontFamilies?.[key]) !== null && _fontFamilies$key !== void 0 ? _fontFamilies$key : [];
const fontFamily = decodeValue(inheritedValue?.typography?.fontFamily);
const setFontFamily = newValue => {
const slug = mergedFontFamilies?.find(({
}) => f === newValue)?.slug;
onChange(setImmutably(value, ['typography', 'fontFamily'], slug ? `var:preset|font-family|${slug}` : newValue || undefined));
const hasFontFamily = () => !!value?.typography?.fontFamily;
const resetFontFamily = () => setFontFamily(undefined);
const hasFontSizeEnabled = useHasFontSizeControl(settings);
const disableCustomFontSizes = !settings?.typography?.customFontSize;
const mergedFontSizes = getMergedFontSizes(settings);
const fontSize = decodeValue(inheritedValue?.typography?.fontSize);
const setFontSize = (newValue, metadata) => {
const actualValue = !!metadata?.slug ? `var:preset|font-size|${metadata?.slug}` : newValue;
onChange(setImmutably(value, ['typography', 'fontSize'], actualValue || undefined));
const hasFontSize = () => !!value?.typography?.fontSize;
const resetFontSize = () => setFontSize(undefined);
const hasAppearanceControl = useHasAppearanceControl(settings);
const appearanceControlLabel = useAppearanceControlLabel(settings);
const hasFontStyles = settings?.typography?.fontStyle;
const hasFontWeights = settings?.typography?.fontWeight;
const fontStyle = decodeValue(inheritedValue?.typography?.fontStyle);
const fontWeight = decodeValue(inheritedValue?.typography?.fontWeight);
const setFontAppearance = ({
fontWeight: newFontWeight
fontStyle: newFontStyle || undefined,
fontWeight: newFontWeight || undefined
const hasFontAppearance = () => !!value?.typography?.fontStyle || !!value?.typography?.fontWeight;
const resetFontAppearance = () => {
const hasLineHeightEnabled = useHasLineHeightControl(settings);
const lineHeight = decodeValue(inheritedValue?.typography?.lineHeight);
const setLineHeight = newValue => {
onChange(setImmutably(value, ['typography', 'lineHeight'], newValue || undefined));
const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
const resetLineHeight = () => setLineHeight(undefined);
const hasLetterSpacingControl = useHasLetterSpacingControl(settings);
const letterSpacing = decodeValue(inheritedValue?.typography?.letterSpacing);
const setLetterSpacing = newValue => {
onChange(setImmutably(value, ['typography', 'letterSpacing'], newValue || undefined));
const hasLetterSpacing = () => !!value?.typography?.letterSpacing;
const resetLetterSpacing = () => setLetterSpacing(undefined);
const hasTextColumnsControl = useHasTextColumnsControl(settings);
const textColumns = decodeValue(inheritedValue?.typography?.textColumns);
const setTextColumns = newValue => {
onChange(setImmutably(value, ['typography', 'textColumns'], newValue || undefined));
const hasTextColumns = () => !!value?.typography?.textColumns;
const resetTextColumns = () => setTextColumns(undefined);
const hasTextTransformControl = useHasTextTransformControl(settings);
const textTransform = decodeValue(inheritedValue?.typography?.textTransform);
const setTextTransform = newValue => {
onChange(setImmutably(value, ['typography', 'textTransform'], newValue || undefined));
const hasTextTransform = () => !!value?.typography?.textTransform;
const resetTextTransform = () => setTextTransform(undefined);
const hasTextDecorationControl = useHasTextDecorationControl(settings);
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
