a22573bf0b
- WordPress core y plugins - Tema Twenty Twenty-Four configurado - Plugin allow-unfiltered-html.php simplificado - .gitignore configurado para excluir wp-config.php y uploads 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
537 lines
11 KiB
JavaScript
Executable File
537 lines
11 KiB
JavaScript
Executable File
(() => {
|
|
window.wp.domReady(() => {
|
|
init(window.wp);
|
|
});
|
|
|
|
function init(wp) {
|
|
/**
|
|
* Shortcut variables
|
|
*/
|
|
const el = wp.element.createElement,
|
|
registerBlockType = wp.blocks.registerBlockType,
|
|
RawHTML = wp.element.RawHTML,
|
|
aaGut = window.advadsGutenberg,
|
|
i18n = aaGut.i18n,
|
|
textFlow = aaGut.textFlow,
|
|
safeHTML = wp.dom.safeHTML,
|
|
editor = wp.blockEditor,
|
|
comp = wp.components;
|
|
|
|
/**
|
|
* Custom SVG icon
|
|
* could move to a separated file if we need it in other places, too
|
|
*
|
|
* <source> https://gist.github.com/zgordon/e837e29f77c343d29ebb7290a1a75eea
|
|
*/
|
|
const advadsIconEl = el(
|
|
'svg',
|
|
{
|
|
width: '24px',
|
|
height: '24px',
|
|
viewBox: '1.396 3276 24 24',
|
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
x: '0px',
|
|
y: '0px',
|
|
},
|
|
el(
|
|
'g',
|
|
{},
|
|
el('path', {
|
|
fill: '#1C1B3A',
|
|
d: 'M18.602,3286.2v8.53H6.677v-11.925h8.53c-0.355-0.804-0.545-1.684-0.545-2.625s0.205-1.82,0.545-2.625 h-2.57H1.406v18.266l0.6,0.6l-0.6-0.6c0,2.304,1.875,4.179,4.18,4.179l0,0h7.05h11.216v-13.821 c-0.805,0.355-1.705,0.566-2.645,0.566C20.286,3286.745,19.406,3286.541,18.602,3286.2z',
|
|
}),
|
|
el('circle', {
|
|
fill: '#0E75A4',
|
|
cx: '21.206',
|
|
cy: '3280.179',
|
|
r: '4.18',
|
|
})
|
|
)
|
|
);
|
|
|
|
/**
|
|
* Register the single ad block type
|
|
*/
|
|
registerBlockType('advads/gblock', {
|
|
apiVersion: 2,
|
|
title: i18n.advads,
|
|
icon: advadsIconEl,
|
|
category: 'common',
|
|
attributes: {
|
|
className: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
itemID: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
width: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
height: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
align: {
|
|
type: 'string',
|
|
default: 'default',
|
|
},
|
|
},
|
|
// todo: make the keywords translatable
|
|
keywords: ['advert', 'adsense', 'banner'],
|
|
edit: (props) => {
|
|
const itemID = props.attributes.itemID;
|
|
|
|
/**
|
|
* Update itemID
|
|
*
|
|
* @param {Event} event change event on the select input.
|
|
*/
|
|
function setID(event) {
|
|
props.setAttributes({
|
|
itemID: event.target.querySelector('option:checked')
|
|
.value,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Update width
|
|
*
|
|
* @param {Event} event change event on the number input.
|
|
*/
|
|
function setWidth(event) {
|
|
props.setAttributes({ width: event.target.value });
|
|
}
|
|
|
|
/**
|
|
* Update height
|
|
*
|
|
* @param {Event} event change event on the number input.
|
|
*/
|
|
function setHeight(event) {
|
|
props.setAttributes({ height: event.target.value });
|
|
}
|
|
|
|
/**
|
|
* Request hints related to the item.
|
|
*
|
|
* @param {string} ID Item ID.
|
|
*/
|
|
function requestHints(ID) {
|
|
if (!ID || 0 !== ID.indexOf('group_')) {
|
|
setHints([]);
|
|
|
|
return;
|
|
}
|
|
|
|
const data = new FormData();
|
|
data.append('action', 'advads-get-block-hints');
|
|
data.append('nonce', window.advadsglobal.ajax_nonce);
|
|
data.append('itemID', itemID);
|
|
|
|
fetch(window.ajaxurl, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
body: data,
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
if (json.success) {
|
|
setHints(json.data);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// eslint-disable-next-line no-console -- Might help experienced users
|
|
console.info(error);
|
|
});
|
|
}
|
|
|
|
function createSizeInputs(label, name, onchange) {
|
|
const randomID =
|
|
'advanced-ads-size' +
|
|
(Math.random() + 1).toString(36).substring(1);
|
|
return el(
|
|
'div',
|
|
{ className: 'size-group' },
|
|
el(
|
|
'label',
|
|
{ htmlFor: randomID },
|
|
el('span', { className: 'head' }, label)
|
|
),
|
|
el(
|
|
'div',
|
|
{ className: 'size-input' },
|
|
el('input', {
|
|
type: 'number',
|
|
inputMode: 'numeric',
|
|
id: randomID,
|
|
value: props.attributes[name],
|
|
name,
|
|
min: 0,
|
|
max: Infinity,
|
|
step: 1,
|
|
onChange: onchange,
|
|
}),
|
|
el('span', { className: 'suffix' }, 'px')
|
|
)
|
|
);
|
|
}
|
|
|
|
const [hints, setHints] = window.wp.element.useState([]);
|
|
window.wp.element.useEffect(() => {
|
|
requestHints(itemID);
|
|
}, [itemID]);
|
|
|
|
// the form children elements
|
|
const children = [];
|
|
|
|
// argument list (in array form) for the children creation
|
|
const args = [],
|
|
ads = [],
|
|
groups = [],
|
|
placements = [];
|
|
|
|
args.push('select');
|
|
args.push({
|
|
value: props.attributes.itemID,
|
|
onChange: setID,
|
|
key: 'advads-select-item',
|
|
});
|
|
args.push(el('option', { key: 'empty' }, i18n['--empty--']));
|
|
|
|
for (const adID in aaGut.ads) {
|
|
if (typeof aaGut.ads[adID].id === 'undefined') {
|
|
continue;
|
|
}
|
|
ads.push(
|
|
el(
|
|
'option',
|
|
{
|
|
value: 'ad_' + aaGut.ads[adID].id,
|
|
key: adID,
|
|
},
|
|
aaGut.ads[adID].title
|
|
)
|
|
);
|
|
}
|
|
|
|
for (const GID in aaGut.groups) {
|
|
if ('undefined' === typeof aaGut.groups[GID].id) {
|
|
continue;
|
|
}
|
|
groups.push(
|
|
el(
|
|
'option',
|
|
{
|
|
value: 'group_' + aaGut.groups[GID].id,
|
|
key: GID,
|
|
},
|
|
aaGut.groups[GID].name
|
|
)
|
|
);
|
|
}
|
|
|
|
if (aaGut.placements) {
|
|
for (const pid in aaGut.placements) {
|
|
if ('undefined' === typeof aaGut.placements[pid].id) {
|
|
continue;
|
|
}
|
|
placements.push(
|
|
el(
|
|
'option',
|
|
{
|
|
value: 'place_' + aaGut.placements[pid].id,
|
|
key: pid,
|
|
},
|
|
aaGut.placements[pid].name
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
if (aaGut.placements) {
|
|
args.push(
|
|
el(
|
|
'optgroup',
|
|
{
|
|
label: i18n.placements,
|
|
key: 'placements',
|
|
},
|
|
placements
|
|
)
|
|
);
|
|
}
|
|
|
|
args.push(
|
|
el(
|
|
'optgroup',
|
|
{
|
|
label: i18n.adGroups,
|
|
key: 'adGroups',
|
|
},
|
|
groups
|
|
)
|
|
);
|
|
|
|
args.push(el('optgroup', { label: i18n.ads, key: 'ads' }, ads));
|
|
|
|
// add a <label /> first and style it.
|
|
children.push(
|
|
el(
|
|
'div',
|
|
{
|
|
className: 'components-placeholder__label',
|
|
key: 'advads-block-title',
|
|
},
|
|
advadsIconEl,
|
|
el(
|
|
'label',
|
|
{ style: { display: 'block' } },
|
|
i18n.advads
|
|
)
|
|
)
|
|
);
|
|
|
|
if (itemID && i18n['--empty--'] !== itemID) {
|
|
let url = '#';
|
|
if (0 === itemID.indexOf('place_')) {
|
|
url = aaGut.editLinks.placement;
|
|
} else if (0 === itemID.indexOf('group_')) {
|
|
url = aaGut.editLinks.group;
|
|
} else if (0 === itemID.indexOf('ad_')) {
|
|
url = aaGut.editLinks.ad.replace(
|
|
'%ID%',
|
|
itemID.substr(3)
|
|
);
|
|
}
|
|
|
|
children.push(
|
|
el(
|
|
'div',
|
|
{
|
|
className: 'components-placeholder__fieldset',
|
|
key: 'advads-select-wrap',
|
|
},
|
|
// then add the <select /> input with its own children
|
|
el.apply(null, args),
|
|
el('a', {
|
|
className: 'dashicons dashicons-external',
|
|
style: {
|
|
margin: 5,
|
|
},
|
|
href: url,
|
|
target: '_blank',
|
|
key: 'advads-item-link',
|
|
})
|
|
)
|
|
);
|
|
|
|
hints.forEach(function (item, index) {
|
|
children.push(
|
|
el(
|
|
RawHTML,
|
|
{
|
|
key: index,
|
|
className:
|
|
'advads-block-hint advads-notice-inline advads-error',
|
|
},
|
|
safeHTML(item)
|
|
)
|
|
);
|
|
});
|
|
} else {
|
|
children.push(el.apply(null, args));
|
|
}
|
|
|
|
if (!aaGut.ads.length) {
|
|
children.push(
|
|
el(
|
|
'div',
|
|
{
|
|
className: 'components-placeholder__label',
|
|
key: 'advads-first-ad',
|
|
},
|
|
'',
|
|
el(
|
|
'a',
|
|
{
|
|
href: window.advadsglobal.create_ad_url,
|
|
className: 'button',
|
|
target: '_blank',
|
|
style: {
|
|
display: 'block',
|
|
marginTop: '10px',
|
|
},
|
|
},
|
|
window.advadsglobal.create_your_first_ad
|
|
)
|
|
)
|
|
);
|
|
}
|
|
|
|
const sizePanel = el(
|
|
'div',
|
|
{ id: 'advanced-ads-size-wrap' },
|
|
el(
|
|
'div',
|
|
null,
|
|
createSizeInputs(i18n.width, 'width', setWidth),
|
|
createSizeInputs(i18n.height, 'height', setHeight)
|
|
)
|
|
);
|
|
|
|
const sidebar = el(
|
|
editor.InspectorControls,
|
|
{ key: 'advads-sidebar' },
|
|
el(
|
|
comp.PanelBody,
|
|
{
|
|
title: i18n.size,
|
|
initialOpen: true,
|
|
},
|
|
sizePanel
|
|
)
|
|
);
|
|
|
|
children.push(sidebar);
|
|
|
|
const alignmentItems = [];
|
|
|
|
for (const slug in textFlow) {
|
|
const isSelected = props.attributes.align === slug;
|
|
alignmentItems.push(
|
|
el(
|
|
comp.MenuItem,
|
|
{
|
|
key: slug,
|
|
label: textFlow[slug].label,
|
|
onClick: () =>
|
|
props.setAttributes({ align: slug }),
|
|
isSelected,
|
|
},
|
|
el(
|
|
'div',
|
|
{
|
|
className:
|
|
'text-flow-wrap' +
|
|
(isSelected ? ' current' : ''),
|
|
},
|
|
el(
|
|
'div',
|
|
{
|
|
className: 'text-flow-icon',
|
|
},
|
|
el('img', {
|
|
src: `${aaGut.imagesUrl}${slug}.png`,
|
|
alt: slug,
|
|
title: textFlow[slug].label,
|
|
className: 'standard',
|
|
}),
|
|
el('img', {
|
|
src: `${aaGut.imagesUrl}${slug}-alt.png`,
|
|
alt: slug,
|
|
title: textFlow[slug].label,
|
|
className: 'alternate',
|
|
})
|
|
),
|
|
el(
|
|
'div',
|
|
{
|
|
className: 'text-flow-label',
|
|
title: textFlow[slug].description,
|
|
},
|
|
el('span', {}, textFlow[slug].label)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
|
|
const toolBar = el(
|
|
editor.BlockControls,
|
|
{
|
|
key: 'advads-toolbar',
|
|
group: 'block',
|
|
},
|
|
el(
|
|
comp.ToolbarGroup,
|
|
{
|
|
title: 'Alignment',
|
|
},
|
|
el(comp.ToolbarDropdownMenu, {
|
|
icon: 'editor-alignleft',
|
|
label: 'Choose an alignment',
|
|
children: () =>
|
|
el(
|
|
'div',
|
|
{ className: 'advads-align-dropdown' },
|
|
alignmentItems
|
|
),
|
|
})
|
|
)
|
|
);
|
|
|
|
// return the complete form
|
|
return el(
|
|
'div',
|
|
editor.useBlockProps(),
|
|
el(
|
|
'form',
|
|
{
|
|
className: 'components-placeholder is-large',
|
|
},
|
|
children
|
|
),
|
|
toolBar
|
|
);
|
|
},
|
|
|
|
save: () => {
|
|
// server side rendering
|
|
return null;
|
|
},
|
|
|
|
// Transforms legacy widget to Advanced Ads block.
|
|
transforms: {
|
|
from: [
|
|
{
|
|
type: 'block',
|
|
blocks: ['core/legacy-widget'],
|
|
isMatch: (attributes) => {
|
|
if (
|
|
!attributes.instance ||
|
|
!attributes.instance.raw
|
|
) {
|
|
// Can't transform if raw instance is not shown in REST API.
|
|
return false;
|
|
}
|
|
return attributes.idBase === 'advads_ad_widget';
|
|
},
|
|
transform: (attributes) => {
|
|
const instance = attributes.instance.raw;
|
|
const transformedBlock = wp.blocks.createBlock(
|
|
'advads/gblock',
|
|
{
|
|
name: instance.name,
|
|
itemID: instance.item_id,
|
|
}
|
|
);
|
|
if (!instance.title) {
|
|
return transformedBlock;
|
|
}
|
|
return [
|
|
wp.blocks.createBlock('core/heading', {
|
|
content: instance.title,
|
|
}),
|
|
transformedBlock,
|
|
];
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
}
|
|
})();
|