|
|
( function (blocks, editor, components, i18n, element ) {
|
|
|
|
|
|
var el = wp.element.createElement
|
|
|
var registerBlockType = wp.blocks.registerBlockType
|
|
|
var BlockControls = wp.editor.BlockControls
|
|
|
var InspectorControls = wp.editor.InspectorControls
|
|
|
var TextControl = components.TextControl
|
|
|
const anchor_icon = el(
|
|
|
'svg', { xmlms: 'http://www.w3.org/2000/svg', 'xmlns:xlink': 'http://www.w3.org/1999/xlink' },
|
|
|
el(
|
|
|
'path', { d: "M 22.476562 13.65625 C 22.339844 13.414062 22.167969 13.039062 21.785156 12.890625 C 21.609375 12.816406 21.347656 12.832031 21.140625 12.925781 C 20.695312 13.121094 19.265625 14.011719 18.65625 14.632812 C 18.414062 14.878906 18.394531 15.082031 18.464844 15.210938 C 18.550781 15.363281 18.6875 15.417969 18.984375 15.441406 C 19.230469 15.460938 19.5 15.390625 19.683594 15.566406 C 20.050781 15.914062 18.632812 17.492188 18.503906 17.628906 C 17.917969 18.253906 17.269531 18.835938 16.492188 19.25 C 15.871094 19.574219 14.644531 19.839844 14.164062 19.199219 C 13.757812 18.664062 13.765625 17.8125 13.683594 17.191406 C 13.554688 16.203125 13.445312 15.226562 13.34375 14.234375 C 13.300781 13.816406 13.179688 13.25 13.441406 12.871094 C 13.824219 12.316406 16.015625 12.019531 16.25 11.957031 C 16.71875 11.832031 16.921875 11.605469 16.921875 11.140625 C 16.921875 10.730469 16.710938 10.339844 16.242188 10.273438 C 15.742188 10.199219 15.199219 10.21875 14.691406 10.21875 C 14.304688 10.21875 13.453125 10.125 13.199219 9.839844 C 13.113281 9.742188 13.070312 9.601562 13.054688 9.480469 C 12.996094 9.011719 12.84375 8.359375 13.132812 7.929688 C 13.296875 7.6875 13.601562 7.585938 13.839844 7.425781 C 13.972656 7.367188 14.105469 7.300781 14.230469 7.226562 C 15.683594 6.375 16.484375 4.628906 16.144531 3.0625 C 15.753906 1.28125 13.941406 0.167969 12 0.101562 C 10.058594 0.167969 8.246094 1.28125 7.859375 3.0625 C 7.519531 4.628906 8.320312 6.371094 9.769531 7.226562 C 9.894531 7.300781 10.03125 7.363281 10.164062 7.421875 C 10.402344 7.585938 10.707031 7.6875 10.867188 7.925781 C 11.15625 8.359375 11.003906 9.007812 10.945312 9.476562 C 10.929688 9.601562 10.886719 9.742188 10.804688 9.839844 C 10.546875 10.125 9.699219 10.21875 9.3125 10.214844 C 8.804688 10.214844 8.261719 10.199219 7.761719 10.269531 C 7.292969 10.339844 7.082031 10.726562 7.082031 11.136719 C 7.082031 11.605469 7.285156 11.832031 7.75 11.953125 C 7.988281 12.019531 10.175781 12.316406 10.558594 12.871094 C 10.820312 13.246094 10.703125 13.816406 10.660156 14.230469 C 10.558594 15.222656 10.445312 16.203125 10.316406 17.1875 C 10.234375 17.8125 10.242188 18.664062 9.839844 19.195312 C 9.355469 19.835938 8.132812 19.574219 7.511719 19.246094 C 6.730469 18.835938 6.082031 18.253906 5.496094 17.625 C 5.371094 17.488281 3.953125 15.914062 4.320312 15.5625 C 4.503906 15.390625 4.769531 15.457031 5.015625 15.4375 C 5.316406 15.417969 5.453125 15.359375 5.535156 15.210938 C 5.609375 15.082031 5.585938 14.878906 5.34375 14.632812 C 4.734375 14.011719 3.308594 13.121094 2.859375 12.921875 C 2.652344 12.828125 2.390625 12.816406 2.21875 12.886719 C 1.832031 13.039062 1.660156 13.414062 1.527344 13.65625 C 1.253906 14.152344 0.523438 16.238281 0.652344 16.765625 C 0.710938 17.007812 1 17.109375 1.285156 16.988281 C 1.550781 16.871094 1.8125 16.273438 2.234375 16.515625 C 2.359375 16.589844 2.417969 16.832031 2.460938 16.941406 C 2.527344 17.105469 2.605469 17.269531 2.667969 17.425781 C 3.507812 19.496094 4.945312 21.4375 7.039062 22.570312 C 8.515625 23.371094 10.261719 23.847656 12 23.898438 C 13.738281 23.847656 15.484375 23.375 16.960938 22.570312 C 19.050781 21.433594 20.492188 19.496094 21.332031 17.425781 C 21.394531 17.269531 21.472656 17.105469 21.539062 16.941406 C 21.582031 16.832031 21.640625 16.589844 21.765625 16.515625 C 22.1875 16.273438 22.449219 16.871094 22.714844 16.988281 C 23 17.109375 23.289062 17.007812 23.347656 16.765625 C 23.476562 16.238281 22.75 14.152344 22.476562 13.65625 Z M 10.375 3.902344 C 10.375 3.003906 11.105469 2.277344 12 2.277344 C 12.894531 2.277344 13.625 3.003906 13.625 3.902344 C 13.625 4.796875 12.894531 5.527344 12 5.527344 C 11.105469 5.527344 10.375 4.796875 10.375 3.902344 Z M 10.375 3.902344", 'fill': '#005ab3' }
|
|
|
),
|
|
|
);
|
|
|
|
|
|
registerBlockType( 'anchor-block/standard', {
|
|
|
title: i18n.__( 'Anchor Block' ),
|
|
|
description: i18n.__( 'Use this block to add custom anchors and create navigation points to the different sections of your page. What a lovely block for building a plain sailing for your in-page navigation!' ) + ' 🐬',
|
|
|
icon: anchor_icon,
|
|
|
keywords: [ i18n.__( 'anchor' ), i18n.__( 'link' ), i18n.__( 'section' ) ],
|
|
|
category: 'layout',
|
|
|
attributes: {
|
|
|
anchor: {
|
|
|
type: 'string',
|
|
|
source: 'attribute',
|
|
|
selector: 'div',
|
|
|
attribute: 'id'
|
|
|
},
|
|
|
anchor_padding: {
|
|
|
type: 'string',
|
|
|
source: 'attribute',
|
|
|
selector: 'div',
|
|
|
attribute: 'data-anchor-padding'
|
|
|
},
|
|
|
},
|
|
|
|
|
|
edit: function (props) {
|
|
|
var attributes = props.attributes
|
|
|
var anchor = props.attributes.anchor
|
|
|
var anchor_padding = props.attributes.anchor_padding
|
|
|
var sentences = [
|
|
|
i18n.__( 'Chock-a-block, sailor!' ),
|
|
|
i18n.__( 'Cut & Run, sailor!' ),
|
|
|
i18n.__( 'By and large, deckman!' ),
|
|
|
i18n.__( 'You know the ropes, deckman!' ),
|
|
|
i18n.__( 'All sails set & flying flag of the Word!' ),
|
|
|
];
|
|
|
var sentence = sentences[Math.floor(Math.random()*sentences.length)];
|
|
|
|
|
|
return [
|
|
|
el(
|
|
|
'div', { className: 'wrapper-anchor-block' },
|
|
|
el(
|
|
|
'div', { className: 'anchor-block-title' }, i18n.__( 'Anchor' ),
|
|
|
),
|
|
|
el(
|
|
|
'div', { className: 'anchor-block-link' }, i18n.__( 'Link to this section:' ) + ' ',
|
|
|
el(
|
|
|
'code', { className: 'anchor-block-value' }, '#' + ( anchor ? anchor : '' ),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
el(
|
|
|
InspectorControls,
|
|
|
{ key: 'inspector' },
|
|
|
el(
|
|
|
components.PanelBody, {
|
|
|
title: i18n.__( 'Anchor block' ),
|
|
|
className: 'anchor-block',
|
|
|
initialOpen: true
|
|
|
},
|
|
|
el(
|
|
|
TextControl, {
|
|
|
type: 'string',
|
|
|
label: i18n.__( 'Choose a nice ID for your anchor. Should be a URL friendly slug name.' ),
|
|
|
value: anchor,
|
|
|
onChange: function (new_anchor) {
|
|
|
props.setAttributes({ anchor: new_anchor })
|
|
|
}
|
|
|
}
|
|
|
),
|
|
|
el( 'p', {}, i18n.__( 'If you’re using a fixed/sticky header, you may want to add a top padding on your anchor so it won’t be hidden under the header.' ) ),
|
|
|
el(
|
|
|
TextControl, {
|
|
|
type: 'number',
|
|
|
label: i18n.__( 'Optional top margin (in pixels)' ),
|
|
|
value: anchor_padding,
|
|
|
onChange: function (new_anchor_padding) {
|
|
|
props.setAttributes({ anchor_padding: new_anchor_padding })
|
|
|
}
|
|
|
}
|
|
|
),
|
|
|
el( 'p', { className: 'anchor-block-randomquote' }, sentence ),
|
|
|
)
|
|
|
),
|
|
|
]
|
|
|
},
|
|
|
|
|
|
save: function (props) {
|
|
|
var attributes = props.attributes
|
|
|
var anchor = props.attributes.anchor
|
|
|
var anchor_padding = props.attributes.anchor_padding
|
|
|
|
|
|
return (
|
|
|
el(
|
|
|
'div', {
|
|
|
className: props.className,
|
|
|
'id': anchor ? anchor : '',
|
|
|
'data-anchor-padding': anchor_padding ? anchor_padding : '',
|
|
|
'style': '--data-anchor-padding: ' + ( anchor_padding ? anchor_padding : 0 ) + 'px',
|
|
|
},
|
|
|
)
|
|
|
)
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})(
|
|
|
window.wp.blocks,
|
|
|
window.wp.editor,
|
|
|
window.wp.components,
|
|
|
window.wp.i18n,
|
|
|
window.wp.element
|
|
|
) |