const { __ } = wp.i18n;
const {addFilter} = wp.hooks;
const {createHigherOrderComponent} = wp.compose;
const {Fragmento, useEffect} = wp.element;
const {InspectorControls,InspectorAdvancedControls} = wp.blockEditor;
const {PanelBody, SelectControl, TextControl, __experimentalNumberControl: NumberControl} = wp.components;
/**
* Agregar atributo de tamaño al bloque de párrafo
*
* @param {Objeto} configuración Configuración del bloque original
* @param {string} nombre Nombre del bloque
* @return {Objeto} Configuración de bloque filtrado
*/
función agregarAtributos(configuración, nombre) {
if (nombre === ‘núcleo/párrafo’) {
devolver asignar({}, configuración, {
//Eliminando el Panel avanzado que se procesa desde WordPress.
admite: fusionar (configuración.admite, {
nombre de clase personalizado: falso,
ancla: falsa,
}),
tamaño de fuente móvil: {
tipo: ‘cadena’,
por defecto: »,
},
ID de bloque: {
tipo: ‘cadena’,
por defecto: »,
},
htmlAncla:{
tipo: ‘cadena’,
por defecto:»
},
clasesCSS adicionales:{
tipo: ‘cadena’,
por defecto:»
}
}),
});
}
configuración de retorno;
}
agregarfiltro(
‘bloques.registerBlockType’,
‘agregar-tamaño-de-fuente-móvil/bloque-de-párrafo/agregar-atributos’,
agregar atributos,
);
const addInlineStylesheetEditor = createHigherOrderComponent((BlockListBlock) => {
retorno (accesorios) => {
constante {
atributos,
atributos: {mobileFontSize, blockID,htmlAnchor,additionalCSSClasses,icon},
nombre de clase,
nombre,
ID de cliente,
establecer atributos
} = accesorios;
if (nombre! == ‘núcleo/párrafo’) {
devolver
}
utilizarEfecto(() => {
setAttributes({ blockID: clientId });
});
const {contenido} = accesorios.atributos;
// Función para agregar una clase para anclar etiquetas dentro del bloque de párrafo
const modificarContenido = (contenido, icono) => {
analizador constante = nuevo DOMParser();
const doc = parser.parseFromString(contenido, ‘texto/html’);
// Obtener el elemento del cuerpo
cuerpo constante = doc.cuerpo;
// Seleccionar todas las etiquetas de anclaje
const AnchorTags = body.querySelectorAll(‘a’);
// Comprobar si se proporciona un valor personalizado antes de modificar la salida
si (mobileFontSize === «») {
devolver
}
devolver (
__html:
@media (max-width: 767px) {
p#block-${blockID},
._${blockID} p {
${
}
nombre de clase = {(nombre de clase)}
/>
);
};
}, ‘withEditorInlineStylesheet’);
agregarfiltro(
‘editor.BlockListBlock’,
‘agregar-tamaño-de-fuente-móvil/bloque-de-párrafo/agregar-clase-de-editor’,
agregarInlineStylesheetEditor,
);