Michael Ochmann
3 weeks ago
commit
51d6a5057a
41 changed files with 21413 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||||||
|
.idea |
||||||
|
.vscode |
||||||
|
.DS_Store |
||||||
|
|
||||||
|
build/Release |
||||||
|
node_modules |
||||||
|
|
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
|
||||||
|
*.zip |
||||||
|
*.tgz |
||||||
|
.env |
||||||
|
.eslintcache |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
:root { |
||||||
|
--wpsi-accent-color: orange; |
||||||
|
} |
||||||
|
|
||||||
|
.wpsi-icons { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
||||||
|
gap: 3rem; |
||||||
|
padding: 3rem; |
||||||
|
} |
||||||
|
.wpsi-icons .icon { |
||||||
|
text-align: center; |
||||||
|
border: solid 3px #aaa; |
||||||
|
border-radius: 12px; |
||||||
|
padding: 2rem; |
||||||
|
color: #888; |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
background: rgba(255,255,255,0.8); |
||||||
|
} |
||||||
|
.wpsi-icons .wpsi { |
||||||
|
font-size: 3rem; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.wpsi-icons .name { |
||||||
|
margin: 1rem 0; |
||||||
|
font-size: 1.2rem; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.wpsi-icons input { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
border: solid 1px #ddd !important; |
||||||
|
box-shadow: none !important; |
||||||
|
border-radius: 0; |
||||||
|
outline: 0 !important; |
||||||
|
} |
||||||
|
.wpsi-icons input:focus { |
||||||
|
border: solid 1px var(--wpsi-accent-color) !important; |
||||||
|
} |
||||||
|
.wpsi-icons .icon:has(input:not(:placeholder-shown)) { |
||||||
|
border-color: var(--wpsi-accent-color); |
||||||
|
} |
||||||
|
.wpsi-icons .icon:has(input:not(:placeholder-shown)) .wpsi { |
||||||
|
color: var(--wpsi-accent-color); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,89 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: 'WP-Social-Icons'; |
||||||
|
src: |
||||||
|
url('fonts/WP-Social-Icons.ttf?iiiiaj') format('truetype'), |
||||||
|
url('fonts/WP-Social-Icons.woff?iiiiaj') format('woff'), |
||||||
|
url('fonts/WP-Social-Icons.svg?iiiiaj#WP-Social-Icons') format('svg'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: block; |
||||||
|
} |
||||||
|
|
||||||
|
[class^="wpsi-"], [class*=" wpsi-"] { |
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */ |
||||||
|
font-family: 'WP-Social-Icons' !important; |
||||||
|
speak: never; |
||||||
|
font-style: normal; |
||||||
|
font-weight: normal; |
||||||
|
font-variant: normal; |
||||||
|
text-transform: none; |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
/* Better Font Rendering =========== */ |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.wpsi-wechat:before { |
||||||
|
content: "\e900"; |
||||||
|
} |
||||||
|
.wpsi-snapchat:before { |
||||||
|
content: "\e901"; |
||||||
|
} |
||||||
|
.wpsi-baidu:before { |
||||||
|
content: "\e902"; |
||||||
|
} |
||||||
|
.wpsi-medium:before { |
||||||
|
content: "\e903"; |
||||||
|
} |
||||||
|
.wpsi-discord:before { |
||||||
|
content: "\e904"; |
||||||
|
} |
||||||
|
.wpsi-teams:before { |
||||||
|
content: "\e905"; |
||||||
|
} |
||||||
|
.wpsi-x:before { |
||||||
|
content: "\e906"; |
||||||
|
} |
||||||
|
.wpsi-mastodon:before { |
||||||
|
content: "\e907"; |
||||||
|
} |
||||||
|
.wpsi-tiktok:before { |
||||||
|
content: "\e908"; |
||||||
|
} |
||||||
|
.wpsi-whatsapp:before { |
||||||
|
content: "\e909"; |
||||||
|
} |
||||||
|
.wpsi-wordpress:before { |
||||||
|
content: "\e90a"; |
||||||
|
} |
||||||
|
.wpsi-tumblr:before { |
||||||
|
content: "\e90b"; |
||||||
|
} |
||||||
|
.wpsi-twitch:before { |
||||||
|
content: "\e90c"; |
||||||
|
} |
||||||
|
.wpsi-reddit:before { |
||||||
|
content: "\e90d"; |
||||||
|
} |
||||||
|
.wpsi-spotify:before { |
||||||
|
content: "\e90e"; |
||||||
|
} |
||||||
|
.wpsi-telegram:before { |
||||||
|
content: "\e90f"; |
||||||
|
} |
||||||
|
.wpsi-pinterest:before { |
||||||
|
content: "\e910"; |
||||||
|
} |
||||||
|
.wpsi-youtube:before { |
||||||
|
content: "\e911"; |
||||||
|
} |
||||||
|
.wpsi-xing:before { |
||||||
|
content: "\e912"; |
||||||
|
} |
||||||
|
.wpsi-instagram:before { |
||||||
|
content: "\e913"; |
||||||
|
} |
||||||
|
.wpsi-facebook:before { |
||||||
|
content: "\e914"; |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
{ |
||||||
|
"$schema": "https://schemas.wp.org/trunk/block.json", |
||||||
|
"apiVersion": 3, |
||||||
|
"name": "massivedynamic/wpsi-menu", |
||||||
|
"version": "0.0.1", |
||||||
|
"title": "WP Social Icons Menu", |
||||||
|
"category": "widgets", |
||||||
|
"icon": "networking", |
||||||
|
"description": "WP Social Icons Menu Block for Gutenberg", |
||||||
|
"example": {}, |
||||||
|
"supports": { |
||||||
|
"html": false |
||||||
|
}, |
||||||
|
"attributes": { |
||||||
|
"orientation": { |
||||||
|
"type": "string", |
||||||
|
"enum": [ |
||||||
|
"horizontal", |
||||||
|
"vertical" |
||||||
|
], |
||||||
|
"default": "horizontal" |
||||||
|
}, |
||||||
|
"alignment": { |
||||||
|
"type": "string", |
||||||
|
"enum": [ |
||||||
|
"left", |
||||||
|
"center", |
||||||
|
"right" |
||||||
|
], |
||||||
|
"default": "center" |
||||||
|
}, |
||||||
|
"exclude": { |
||||||
|
"type": "array", |
||||||
|
"default": [] |
||||||
|
} |
||||||
|
}, |
||||||
|
"textdomain": "wpsi-menu", |
||||||
|
"editorScript": "file:./index.js", |
||||||
|
"editorStyle": "file:./index.css", |
||||||
|
"style": "file:./style-index.css", |
||||||
|
"render": "file:./render.php" |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
/*!****************************************************************************************************************************************************************************************************************************************!*\ |
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! |
||||||
|
\****************************************************************************************************************************************************************************************************************************************/ |
||||||
|
.wpsi-menu { |
||||||
|
padding: 2rem 0; |
||||||
|
} |
||||||
|
.wpsi-menu a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.wpsi-menu.align-left { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.wpsi-menu.align-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.wpsi-menu.align-right { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.wpsi-menu.horizontal a:not(:last-of-type) { |
||||||
|
margin-left: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a:not(:last-of-type) { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu .wpsi { |
||||||
|
font-size: 2rem; |
||||||
|
color: #333; |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '0f8272dc7fc5d65bc4e2'); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/*!****************************************************************************************************************************************************************************************************************************************!*\ |
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! |
||||||
|
\****************************************************************************************************************************************************************************************************************************************/ |
||||||
|
.wpsi-menu { |
||||||
|
padding: 2rem 0; |
||||||
|
} |
||||||
|
.wpsi-menu a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.wpsi-menu.align-left { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.wpsi-menu.align-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.wpsi-menu.align-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.wpsi-menu.horizontal a:not(:last-of-type) { |
||||||
|
margin-right: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a:not(:last-of-type) { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu .wpsi { |
||||||
|
font-size: 2rem; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
/*# sourceMappingURL=index.css.map*/ |
||||||
@ -0,0 +1 @@ |
|||||||
|
{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;AACD;AACC;EACC;AACF;AAEC;EACC;AAAF;AAEC;EACC;AAAF;AAEC;EACC;AAAF;AAKG;EACC;AAHJ;AASE;EACC;AAPH;AASG;EACC;AAPJ;AAYC;EACC;EACA;AAVF,C","sources":["webpack://wpsi-menu/./src/editor.scss"],"sourcesContent":[".wpsi-menu {\n\tpadding: 2rem 0;\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\t&.align-left {\n\t\ttext-align: left;\n\t}\n\t&.align-center {\n\t\ttext-align: center;\n\t}\n\t&.align-right {\n\t\ttext-align: right;\n\t}\n\n\t&.horizontal {\n\t\ta {\n\t\t\t&:not(:last-of-type) {\n\t\t\t\tmargin-right: 2rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.vertical {\n\t\ta {\n\t\t\tdisplay: block;\n\t\t\t\n\t\t\t&:not(:last-of-type) {\n\t\t\t\tmargin-bottom: 2rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.wpsi {\n\t\tfont-size: 2rem;\n\t\tcolor: #333;\n\t}\n}"],"names":[],"sourceRoot":""} |
||||||
@ -0,0 +1,616 @@ |
|||||||
|
/******/ (() => { // webpackBootstrap
|
||||||
|
/******/ "use strict"; |
||||||
|
/******/ var __webpack_modules__ = ({ |
||||||
|
|
||||||
|
/***/ "./node_modules/@wordpress/icons/build-module/library/align-center.js": |
||||||
|
/*!****************************************************************************!*\ |
||||||
|
!*** ./node_modules/@wordpress/icons/build-module/library/align-center.js ***! |
||||||
|
\****************************************************************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives"); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/** |
||||||
|
* WordPress dependencies |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
const alignCenter = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { |
||||||
|
xmlns: "http://www.w3.org/2000/svg", |
||||||
|
viewBox: "0 0 24 24", |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { |
||||||
|
d: "M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z" |
||||||
|
}) |
||||||
|
}); |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (alignCenter); |
||||||
|
//# sourceMappingURL=align-center.js.map
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./node_modules/@wordpress/icons/build-module/library/align-left.js": |
||||||
|
/*!**************************************************************************!*\ |
||||||
|
!*** ./node_modules/@wordpress/icons/build-module/library/align-left.js ***! |
||||||
|
\**************************************************************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives"); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/** |
||||||
|
* WordPress dependencies |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
const alignLeft = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { |
||||||
|
xmlns: "http://www.w3.org/2000/svg", |
||||||
|
viewBox: "0 0 24 24", |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { |
||||||
|
d: "M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z" |
||||||
|
}) |
||||||
|
}); |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (alignLeft); |
||||||
|
//# sourceMappingURL=align-left.js.map
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./node_modules/@wordpress/icons/build-module/library/align-right.js": |
||||||
|
/*!***************************************************************************!*\ |
||||||
|
!*** ./node_modules/@wordpress/icons/build-module/library/align-right.js ***! |
||||||
|
\***************************************************************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives"); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/** |
||||||
|
* WordPress dependencies |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
const alignRight = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { |
||||||
|
xmlns: "http://www.w3.org/2000/svg", |
||||||
|
viewBox: "0 0 24 24", |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { |
||||||
|
d: "M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z" |
||||||
|
}) |
||||||
|
}); |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (alignRight); |
||||||
|
//# sourceMappingURL=align-right.js.map
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./node_modules/@wordpress/icons/build-module/library/justify-center-vertical.js": |
||||||
|
/*!***************************************************************************************!*\ |
||||||
|
!*** ./node_modules/@wordpress/icons/build-module/library/justify-center-vertical.js ***! |
||||||
|
\***************************************************************************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives"); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/** |
||||||
|
* WordPress dependencies |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
const justifyCenterVertical = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { |
||||||
|
xmlns: "http://www.w3.org/2000/svg", |
||||||
|
viewBox: "0 0 24 24", |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { |
||||||
|
d: "M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" |
||||||
|
}) |
||||||
|
}); |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (justifyCenterVertical); |
||||||
|
//# sourceMappingURL=justify-center-vertical.js.map
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./node_modules/@wordpress/icons/build-module/library/justify-center.js": |
||||||
|
/*!******************************************************************************!*\ |
||||||
|
!*** ./node_modules/@wordpress/icons/build-module/library/justify-center.js ***! |
||||||
|
\******************************************************************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives"); |
||||||
|
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/** |
||||||
|
* WordPress dependencies |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
const justifyCenter = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { |
||||||
|
xmlns: "http://www.w3.org/2000/svg", |
||||||
|
viewBox: "0 0 24 24", |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { |
||||||
|
d: "M12.5 15v5H11v-5H4V9h7V4h1.5v5h7v6h-7Z" |
||||||
|
}) |
||||||
|
}); |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (justifyCenter); |
||||||
|
//# sourceMappingURL=justify-center.js.map
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./src/block.json": |
||||||
|
/*!************************!*\ |
||||||
|
!*** ./src/block.json ***! |
||||||
|
\************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"massivedynamic/wpsi-menu","version":"0.0.1","title":"WP Social Icons Menu","category":"widgets","icon":"networking","description":"WP Social Icons Menu Block for Gutenberg","example":{},"supports":{"html":false},"attributes":{"orientation":{"type":"string","enum":["horizontal","vertical"],"default":"horizontal"},"alignment":{"type":"string","enum":["left","center","right"],"default":"center"},"exclude":{"type":"array","default":[]}},"textdomain":"wpsi-menu","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}'); |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./src/edit.js": |
||||||
|
/*!*********************!*\ |
||||||
|
!*** ./src/edit.js ***! |
||||||
|
\*********************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, { |
||||||
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) |
||||||
|
/* harmony export */ }); |
||||||
|
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); |
||||||
|
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); |
||||||
|
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__); |
||||||
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); |
||||||
|
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__); |
||||||
|
/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/api-fetch */ "@wordpress/api-fetch"); |
||||||
|
/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_3__); |
||||||
|
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); |
||||||
|
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__); |
||||||
|
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/justify-center.js"); |
||||||
|
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/justify-center-vertical.js"); |
||||||
|
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/align-left.js"); |
||||||
|
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/align-center.js"); |
||||||
|
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/align-right.js"); |
||||||
|
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); |
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Edit = ({ |
||||||
|
attributes, |
||||||
|
setAttributes |
||||||
|
}) => { |
||||||
|
const [items, setItems] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useState)([]); |
||||||
|
const { |
||||||
|
alignment, |
||||||
|
orientation, |
||||||
|
exclude |
||||||
|
} = attributes; |
||||||
|
const iterator = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => { |
||||||
|
const out = []; |
||||||
|
for (const [key, value] of Object.entries(items)) out.push({ |
||||||
|
key, |
||||||
|
value |
||||||
|
}); |
||||||
|
return out; |
||||||
|
}, [items]); |
||||||
|
const activeItems = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => { |
||||||
|
return iterator.filter(item => !exclude.includes(item.key)); |
||||||
|
}, [iterator, exclude]); |
||||||
|
const excludeService = service => { |
||||||
|
setAttributes({ |
||||||
|
exclude: exclude.includes(service) ? exclude.filter(item => item !== service) : [...exclude, service] |
||||||
|
}); |
||||||
|
}; |
||||||
|
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => { |
||||||
|
_wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_3___default()({ |
||||||
|
path: "/wp-social-icons/items" |
||||||
|
}).then(response => { |
||||||
|
setItems(response); |
||||||
|
}).catch(error => console.error("ERR", error)); |
||||||
|
}, []); |
||||||
|
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("section", { |
||||||
|
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(), |
||||||
|
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, { |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { |
||||||
|
title: "Active Services", |
||||||
|
initialOpen: true, |
||||||
|
children: iterator.map(item => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelRow, { |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, { |
||||||
|
label: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, { |
||||||
|
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", { |
||||||
|
className: `wpsi-${item.key}`, |
||||||
|
style: { |
||||||
|
fontSize: "1.2rem", |
||||||
|
verticalAlign: "middle", |
||||||
|
marginRight: "0.5rem" |
||||||
|
} |
||||||
|
}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", { |
||||||
|
style: { |
||||||
|
verticalAlign: "middle" |
||||||
|
}, |
||||||
|
children: item.key |
||||||
|
})] |
||||||
|
}), |
||||||
|
checked: !exclude.includes(item.key), |
||||||
|
onChange: () => excludeService(item.key) |
||||||
|
}) |
||||||
|
})) |
||||||
|
}) |
||||||
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.BlockControls, { |
||||||
|
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, { |
||||||
|
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, { |
||||||
|
isActive: orientation === "horizontal", |
||||||
|
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"], |
||||||
|
onClick: () => setAttributes({ |
||||||
|
orientation: "horizontal" |
||||||
|
}) |
||||||
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, { |
||||||
|
isActive: orientation === "vertical", |
||||||
|
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"], |
||||||
|
title: "wdwdwd", |
||||||
|
onClick: () => setAttributes({ |
||||||
|
orientation: "vertical" |
||||||
|
}) |
||||||
|
})] |
||||||
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, { |
||||||
|
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, { |
||||||
|
isActive: alignment === "left", |
||||||
|
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__["default"], |
||||||
|
title: "align left", |
||||||
|
onClick: () => setAttributes({ |
||||||
|
alignment: "left" |
||||||
|
}) |
||||||
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, { |
||||||
|
isActive: alignment === "center", |
||||||
|
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__["default"], |
||||||
|
title: "align center", |
||||||
|
onClick: () => setAttributes({ |
||||||
|
alignment: "center" |
||||||
|
}) |
||||||
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, { |
||||||
|
isActive: alignment === "right", |
||||||
|
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__["default"], |
||||||
|
title: "align right", |
||||||
|
onClick: () => setAttributes({ |
||||||
|
alignment: "right" |
||||||
|
}) |
||||||
|
})] |
||||||
|
})] |
||||||
|
}), activeItems.length < 1 ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("section", { |
||||||
|
children: "No elements" |
||||||
|
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("nav", { |
||||||
|
className: `wpsi-menu ${orientation} align-${alignment}`, |
||||||
|
children: activeItems.map(item => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("a", { |
||||||
|
href: item.value, |
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", { |
||||||
|
className: `wpsi wpsi-${item.key}` |
||||||
|
}) |
||||||
|
})) |
||||||
|
})] |
||||||
|
}); |
||||||
|
}; |
||||||
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Edit); |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./src/editor.scss": |
||||||
|
/*!*************************!*\ |
||||||
|
!*** ./src/editor.scss ***! |
||||||
|
\*************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
// extracted by mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./src/index.js": |
||||||
|
/*!**********************!*\ |
||||||
|
!*** ./src/index.js ***! |
||||||
|
\**********************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); |
||||||
|
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__); |
||||||
|
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); |
||||||
|
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./block.json */ "./src/block.json"); |
||||||
|
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss"); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_2__.name, { |
||||||
|
edit: _edit__WEBPACK_IMPORTED_MODULE_1__["default"] |
||||||
|
}); |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "./src/style.scss": |
||||||
|
/*!************************!*\ |
||||||
|
!*** ./src/style.scss ***! |
||||||
|
\************************/ |
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
||||||
|
|
||||||
|
__webpack_require__.r(__webpack_exports__); |
||||||
|
// extracted by mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/api-fetch": |
||||||
|
/*!**********************************!*\ |
||||||
|
!*** external ["wp","apiFetch"] ***! |
||||||
|
\**********************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["apiFetch"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/block-editor": |
||||||
|
/*!*************************************!*\ |
||||||
|
!*** external ["wp","blockEditor"] ***! |
||||||
|
\*************************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["blockEditor"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/blocks": |
||||||
|
/*!********************************!*\ |
||||||
|
!*** external ["wp","blocks"] ***! |
||||||
|
\********************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["blocks"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/components": |
||||||
|
/*!************************************!*\ |
||||||
|
!*** external ["wp","components"] ***! |
||||||
|
\************************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["components"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/element": |
||||||
|
/*!*********************************!*\ |
||||||
|
!*** external ["wp","element"] ***! |
||||||
|
\*********************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["element"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/i18n": |
||||||
|
/*!******************************!*\ |
||||||
|
!*** external ["wp","i18n"] ***! |
||||||
|
\******************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["i18n"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "@wordpress/primitives": |
||||||
|
/*!************************************!*\ |
||||||
|
!*** external ["wp","primitives"] ***! |
||||||
|
\************************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["wp"]["primitives"]; |
||||||
|
|
||||||
|
/***/ }), |
||||||
|
|
||||||
|
/***/ "react/jsx-runtime": |
||||||
|
/*!**********************************!*\ |
||||||
|
!*** external "ReactJSXRuntime" ***! |
||||||
|
\**********************************/ |
||||||
|
/***/ ((module) => { |
||||||
|
|
||||||
|
module.exports = window["ReactJSXRuntime"]; |
||||||
|
|
||||||
|
/***/ }) |
||||||
|
|
||||||
|
/******/ }); |
||||||
|
/************************************************************************/ |
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var __webpack_module_cache__ = {}; |
||||||
|
/******/
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) { |
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ var cachedModule = __webpack_module_cache__[moduleId]; |
||||||
|
/******/ if (cachedModule !== undefined) { |
||||||
|
/******/ return cachedModule.exports; |
||||||
|
/******/ } |
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = __webpack_module_cache__[moduleId] = { |
||||||
|
/******/ // no module.id needed
|
||||||
|
/******/ // no module.loaded needed
|
||||||
|
/******/ exports: {} |
||||||
|
/******/ }; |
||||||
|
/******/
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); |
||||||
|
/******/
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports; |
||||||
|
/******/ } |
||||||
|
/******/
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = __webpack_modules__; |
||||||
|
/******/
|
||||||
|
/************************************************************************/ |
||||||
|
/******/ /* webpack/runtime/chunk loaded */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ var deferred = []; |
||||||
|
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => { |
||||||
|
/******/ if(chunkIds) { |
||||||
|
/******/ priority = priority || 0; |
||||||
|
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; |
||||||
|
/******/ deferred[i] = [chunkIds, fn, priority]; |
||||||
|
/******/ return; |
||||||
|
/******/ } |
||||||
|
/******/ var notFulfilled = Infinity; |
||||||
|
/******/ for (var i = 0; i < deferred.length; i++) { |
||||||
|
/******/ var [chunkIds, fn, priority] = deferred[i]; |
||||||
|
/******/ var fulfilled = true; |
||||||
|
/******/ for (var j = 0; j < chunkIds.length; j++) { |
||||||
|
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) { |
||||||
|
/******/ chunkIds.splice(j--, 1); |
||||||
|
/******/ } else { |
||||||
|
/******/ fulfilled = false; |
||||||
|
/******/ if(priority < notFulfilled) notFulfilled = priority; |
||||||
|
/******/ } |
||||||
|
/******/ } |
||||||
|
/******/ if(fulfilled) { |
||||||
|
/******/ deferred.splice(i--, 1) |
||||||
|
/******/ var r = fn(); |
||||||
|
/******/ if (r !== undefined) result = r; |
||||||
|
/******/ } |
||||||
|
/******/ } |
||||||
|
/******/ return result; |
||||||
|
/******/ }; |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/compat get default export */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||||
|
/******/ __webpack_require__.n = (module) => { |
||||||
|
/******/ var getter = module && module.__esModule ? |
||||||
|
/******/ () => (module['default']) : |
||||||
|
/******/ () => (module); |
||||||
|
/******/ __webpack_require__.d(getter, { a: getter }); |
||||||
|
/******/ return getter; |
||||||
|
/******/ }; |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/define property getters */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ // define getter functions for harmony exports
|
||||||
|
/******/ __webpack_require__.d = (exports, definition) => { |
||||||
|
/******/ for(var key in definition) { |
||||||
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { |
||||||
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); |
||||||
|
/******/ } |
||||||
|
/******/ } |
||||||
|
/******/ }; |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/make namespace object */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = (exports) => { |
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
||||||
|
/******/ } |
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true }); |
||||||
|
/******/ }; |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/jsonp chunk loading */ |
||||||
|
/******/ (() => { |
||||||
|
/******/ // no baseURI
|
||||||
|
/******/
|
||||||
|
/******/ // object to store loaded and loading chunks
|
||||||
|
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||||
|
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||||
|
/******/ var installedChunks = { |
||||||
|
/******/ "index": 0, |
||||||
|
/******/ "./style-index": 0 |
||||||
|
/******/ }; |
||||||
|
/******/
|
||||||
|
/******/ // no chunk on demand loading
|
||||||
|
/******/
|
||||||
|
/******/ // no prefetching
|
||||||
|
/******/
|
||||||
|
/******/ // no preloaded
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR manifest
|
||||||
|
/******/
|
||||||
|
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0); |
||||||
|
/******/
|
||||||
|
/******/ // install a JSONP callback for chunk loading
|
||||||
|
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { |
||||||
|
/******/ var [chunkIds, moreModules, runtime] = data; |
||||||
|
/******/ // add "moreModules" to the modules object,
|
||||||
|
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||||
|
/******/ var moduleId, chunkId, i = 0; |
||||||
|
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) { |
||||||
|
/******/ for(moduleId in moreModules) { |
||||||
|
/******/ if(__webpack_require__.o(moreModules, moduleId)) { |
||||||
|
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; |
||||||
|
/******/ } |
||||||
|
/******/ } |
||||||
|
/******/ if(runtime) var result = runtime(__webpack_require__); |
||||||
|
/******/ } |
||||||
|
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); |
||||||
|
/******/ for(;i < chunkIds.length; i++) { |
||||||
|
/******/ chunkId = chunkIds[i]; |
||||||
|
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { |
||||||
|
/******/ installedChunks[chunkId][0](); |
||||||
|
/******/ } |
||||||
|
/******/ installedChunks[chunkId] = 0; |
||||||
|
/******/ } |
||||||
|
/******/ return __webpack_require__.O(result); |
||||||
|
/******/ } |
||||||
|
/******/
|
||||||
|
/******/ var chunkLoadingGlobal = globalThis["webpackChunkwpsi_menu"] = globalThis["webpackChunkwpsi_menu"] || []; |
||||||
|
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); |
||||||
|
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); |
||||||
|
/******/ })(); |
||||||
|
/******/
|
||||||
|
/************************************************************************/ |
||||||
|
/******/
|
||||||
|
/******/ // startup
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||||
|
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], () => (__webpack_require__("./src/index.js"))) |
||||||
|
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); |
||||||
|
/******/
|
||||||
|
/******/ })() |
||||||
|
; |
||||||
|
//# sourceMappingURL=index.js.map
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,11 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
use wpsocialicons\Settings; |
||||||
|
|
||||||
|
["exclude" => $exclude, "orientation" => $orientation, "alignment" => $alignment] = $attributes ?? []; |
||||||
|
$services = array_filter((array) Settings::Services(), fn ($value, $key) => !in_array($key, $exclude), ARRAY_FILTER_USE_BOTH); |
||||||
|
|
||||||
|
the_wp_social_icons([ |
||||||
|
"exclude" => $exclude, |
||||||
|
"container_class" => "wp-social-icons $orientation align-$alignment", |
||||||
|
]); |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
/*!***************************************************************************************************************************************************************************************************************************************!*\ |
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! |
||||||
|
\***************************************************************************************************************************************************************************************************************************************/ |
||||||
|
.wp-block-create-block-wpsi-menu { |
||||||
|
background-color: #21759b; |
||||||
|
color: #fff; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
nav.wp-social-icons { |
||||||
|
display: flex; |
||||||
|
padding: 2rem 0; |
||||||
|
gap: 2rem; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons > a .wpsi { |
||||||
|
font-size: 1.8rem; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-left { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-right { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-left { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-right { |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
/*!***************************************************************************************************************************************************************************************************************************************!*\ |
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! |
||||||
|
\***************************************************************************************************************************************************************************************************************************************/ |
||||||
|
.wp-block-create-block-wpsi-menu { |
||||||
|
background-color: #21759b; |
||||||
|
color: #fff; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
nav.wp-social-icons { |
||||||
|
display: flex; |
||||||
|
padding: 2rem 0; |
||||||
|
gap: 2rem; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons > a .wpsi { |
||||||
|
font-size: 1.8rem; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-left { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-right { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-left { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-right { |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
/*# sourceMappingURL=style-index.css.map*/ |
||||||
@ -0,0 +1 @@ |
|||||||
|
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;EACC;EACA;EACA;AACD;;AAEA;EACC;EACA;EACA;EACA;AACD;AAEE;EACC;AAAH;AAIC;EACC;AAFF;AAKC;EACC;AAHF;AAMC;EACC;AAJF;AAOC;EACC;AALF;AAOE;EACC;AALH;AAQE;EACC;AANH,C","sources":["webpack://wpsi-menu/./src/style.scss"],"sourcesContent":[".wp-block-create-block-wpsi-menu {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n\nnav.wp-social-icons {\n\tdisplay: flex;\n\tpadding: 2rem 0;\n\tgap: 2rem;\n\talign-items: center;\n\n\t> a {\n\t\t.wpsi {\n\t\t\tfont-size: 1.8rem;\n\t\t}\n\t}\n\n\t&.align-center {\n\t\tjustify-content: center;\n\t}\n\n\t&.align-left {\n\t\tjustify-content: flex-start;\n\t}\n\n\t&.align-right {\n\t\tjustify-content: flex-end;\n\t}\n\n\t&.vertical {\n\t\tflex-direction: column;\n\n\t\t&.align-left {\n\t\t\talign-items: flex-start;\n\t\t}\n\t\t\n\t\t&.align-right {\n\t\t\talign-items: flex-end;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"name": "wpsi-menu", |
||||||
|
"version": "0.0.1", |
||||||
|
"description": "WP Social Icons Menu Block for Gutenberg", |
||||||
|
"author": "Mike Ochmann <miko@massivedynamic.eu>", |
||||||
|
"license": "MIT", |
||||||
|
"main": "build/index.js", |
||||||
|
"scripts": { |
||||||
|
"build": "wp-scripts build", |
||||||
|
"format": "wp-scripts format", |
||||||
|
"lint:css": "wp-scripts lint-style", |
||||||
|
"lint:js": "wp-scripts lint-js", |
||||||
|
"packages-update": "wp-scripts packages-update", |
||||||
|
"plugin-zip": "wp-scripts plugin-zip", |
||||||
|
"start": "wp-scripts start" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@wordpress/scripts": "^30.19.0" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@wordpress/icons": "^10.26.0" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"$schema" : "https://schemas.wp.org/trunk/block.json", |
||||||
|
"apiVersion" : 3, |
||||||
|
"name" : "massivedynamic/wpsi-menu", |
||||||
|
"version" : "0.0.1", |
||||||
|
"title" : "WP Social Icons Menu", |
||||||
|
"category" : "widgets", |
||||||
|
"icon" : "networking", |
||||||
|
"description" : "WP Social Icons Menu Block for Gutenberg", |
||||||
|
"example" : {}, |
||||||
|
"supports" : { |
||||||
|
"html": false |
||||||
|
}, |
||||||
|
"attributes" : { |
||||||
|
"orientation" : { |
||||||
|
"type" : "string", |
||||||
|
"enum" : ["horizontal", "vertical"], |
||||||
|
"default" : "horizontal" |
||||||
|
}, |
||||||
|
"alignment" : { |
||||||
|
"type" : "string", |
||||||
|
"enum" : ["left", "center", "right"], |
||||||
|
"default" : "center" |
||||||
|
}, |
||||||
|
"exclude" : { |
||||||
|
"type" : "array", |
||||||
|
"default" : [] |
||||||
|
} |
||||||
|
}, |
||||||
|
"textdomain" : "wpsi-menu", |
||||||
|
"editorScript" : "file:./index.js", |
||||||
|
"editorStyle" : "file:./index.css", |
||||||
|
"style" : "file:./style-index.css", |
||||||
|
"render" : "file:./render.php" |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
import {__} from "@wordpress/i18n"; |
||||||
|
import {useBlockProps, BlockControls, InspectorControls} from "@wordpress/block-editor"; |
||||||
|
import {useState, useEffect, useMemo} from "@wordpress/element"; |
||||||
|
import apiFetch from "@wordpress/api-fetch"; |
||||||
|
|
||||||
|
import { |
||||||
|
Spinner, |
||||||
|
PanelBody, |
||||||
|
PanelRow, |
||||||
|
RangeControl, |
||||||
|
TextControl, |
||||||
|
ToggleControl, |
||||||
|
ToolbarButton, |
||||||
|
ToolbarGroup, |
||||||
|
Modal, |
||||||
|
Button, |
||||||
|
|
||||||
|
__experimentalToggleGroupControl as ToggleGroupControl, |
||||||
|
__experimentalToggleGroupControlOption as ToggleGroupControlOption, |
||||||
|
__experimentalText as Text, |
||||||
|
__experimentalHStack as HStack |
||||||
|
} from "@wordpress/components"; |
||||||
|
|
||||||
|
import { |
||||||
|
justifyCenter, |
||||||
|
justifyCenterVertical, |
||||||
|
alignLeft, |
||||||
|
alignCenter, |
||||||
|
alignRight |
||||||
|
} from '@wordpress/icons'; |
||||||
|
|
||||||
|
import "./editor.scss"; |
||||||
|
|
||||||
|
const Edit = ({attributes, setAttributes}) => { |
||||||
|
const [items, setItems] = useState([]); |
||||||
|
|
||||||
|
const {alignment, orientation, exclude} = attributes; |
||||||
|
|
||||||
|
const iterator = useMemo(() => { |
||||||
|
const out = []; |
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(items)) |
||||||
|
out.push({key, value}); |
||||||
|
|
||||||
|
return out; |
||||||
|
}, [items]); |
||||||
|
|
||||||
|
const activeItems = useMemo(() => { |
||||||
|
return iterator.filter(item => !exclude.includes(item.key)); |
||||||
|
}, [iterator, exclude]); |
||||||
|
|
||||||
|
const excludeService = service => { |
||||||
|
setAttributes({exclude : exclude.includes(service) ? exclude.filter(item => item !== service) : [...exclude, service]}); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
apiFetch({path : "/wp-social-icons/items"}).then(response => { |
||||||
|
setItems(response); |
||||||
|
}).catch(error => console.error("ERR", error)); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<section {...useBlockProps()}> |
||||||
|
<InspectorControls> |
||||||
|
<PanelBody title="Active Services" initialOpen={true}> |
||||||
|
{iterator.map(item => ( |
||||||
|
<PanelRow> |
||||||
|
<ToggleControl label={<><span className={`wpsi-${item.key}`} style={{fontSize : "1.2rem", verticalAlign : "middle", marginRight : "0.5rem"}}></span> <span style={{verticalAlign : "middle"}}>{item.key}</span></>} checked={!exclude.includes(item.key)} onChange={() => excludeService(item.key)} /> |
||||||
|
</PanelRow> |
||||||
|
))} |
||||||
|
</PanelBody> |
||||||
|
</InspectorControls> |
||||||
|
<BlockControls> |
||||||
|
<ToolbarGroup> |
||||||
|
<ToolbarButton isActive={orientation === "horizontal"} icon={justifyCenter} onClick={() => setAttributes({ orientation : "horizontal"})} /> |
||||||
|
<ToolbarButton isActive={orientation === "vertical"} icon={justifyCenterVertical} title="wdwdwd" onClick={() => setAttributes({orientation : "vertical"})} /> |
||||||
|
</ToolbarGroup> |
||||||
|
<ToolbarGroup> |
||||||
|
<ToolbarButton isActive={alignment === "left"} icon={alignLeft} title="align left" onClick={() => setAttributes({alignment : "left"})} /> |
||||||
|
<ToolbarButton isActive={alignment === "center"} icon={alignCenter} title="align center" onClick={() => setAttributes({alignment : "center"})} /> |
||||||
|
<ToolbarButton isActive={alignment === "right"} icon={alignRight} title="align right" onClick={() => setAttributes({alignment : "right"})} /> |
||||||
|
</ToolbarGroup> |
||||||
|
</BlockControls> |
||||||
|
{activeItems.length < 1 ? |
||||||
|
<section>No elements</section> : |
||||||
|
<nav className={`wpsi-menu ${orientation} align-${alignment}`}> |
||||||
|
{activeItems.map(item => <a href={item.value}><span className={`wpsi wpsi-${item.key}`}></span></a>)} |
||||||
|
</nav> |
||||||
|
} |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Edit; |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.wpsi-menu { |
||||||
|
padding: 2rem 0; |
||||||
|
} |
||||||
|
.wpsi-menu a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.wpsi-menu.align-left { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.wpsi-menu.align-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.wpsi-menu.align-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.wpsi-menu.horizontal a:not(:last-of-type) { |
||||||
|
margin-right: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.wpsi-menu.vertical a:not(:last-of-type) { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
.wpsi-menu .wpsi { |
||||||
|
font-size: 2rem; |
||||||
|
color: #333; |
||||||
|
}/*# sourceMappingURL=editor.css.map */ |
||||||
@ -0,0 +1 @@ |
|||||||
|
{"version":3,"sources":["editor.scss","editor.css"],"names":[],"mappings":"AAAA;EACC,eAAA;ACCD;ADCC;EACC,qBAAA;ACCF;ADEC;EACC,gBAAA;ACAF;ADEC;EACC,kBAAA;ACAF;ADEC;EACC,iBAAA;ACAF;ADKG;EACC,kBAAA;ACHJ;ADSE;EACC,cAAA;ACPH;ADSG;EACC,mBAAA;ACPJ;ADYC;EACC,eAAA;EACA,WAAA;ACVF","file":"editor.css"} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
.wpsi-menu { |
||||||
|
padding: 2rem 0; |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.align-left { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
&.align-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
&.align-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
&.horizontal { |
||||||
|
a { |
||||||
|
&:not(:last-of-type) { |
||||||
|
margin-right: 2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.vertical { |
||||||
|
a { |
||||||
|
display: block; |
||||||
|
|
||||||
|
&:not(:last-of-type) { |
||||||
|
margin-bottom: 2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.wpsi { |
||||||
|
font-size: 2rem; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import {registerBlockType} from "@wordpress/blocks"; |
||||||
|
|
||||||
|
import Edit from "./edit"; |
||||||
|
import metadata from "./block.json"; |
||||||
|
|
||||||
|
import "./style.scss"; |
||||||
|
|
||||||
|
registerBlockType(metadata.name, { |
||||||
|
edit : Edit |
||||||
|
} ); |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
use wpsocialicons\Settings; |
||||||
|
|
||||||
|
["exclude" => $exclude, "orientation" => $orientation, "alignment" => $alignment] = $attributes ?? []; |
||||||
|
$services = array_filter((array) Settings::Services(), fn ($value, $key) => !in_array($key, $exclude), ARRAY_FILTER_USE_BOTH); |
||||||
|
|
||||||
|
the_wp_social_icons([ |
||||||
|
"exclude" => $exclude, |
||||||
|
"container_class" => "wp-social-icons $orientation align-$alignment", |
||||||
|
]); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import {useBlockProps} from "@wordpress/block-editor"; |
||||||
|
|
||||||
|
import {useState, useEffect, useMemo} from "@wordpress/element"; |
||||||
|
import apiFetch from "@wordpress/api-fetch"; |
||||||
|
|
||||||
|
export default function save({attributes}) { |
||||||
|
/* |
||||||
|
const [items, setItems] = useState([]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
apiFetch({path : "/wp-social-icons/items"}).then(response => { |
||||||
|
console.log("RES", response); |
||||||
|
|
||||||
|
setItems(response); |
||||||
|
}).catch(error => console.error("ERR", error)); |
||||||
|
}, []); |
||||||
|
*/ |
||||||
|
const {orientation, alignment} = attributes; |
||||||
|
const props = useBlockProps.save(); |
||||||
|
console.log("SAVE PROPS", attributes); |
||||||
|
|
||||||
|
return ( |
||||||
|
<></> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<p> |
||||||
|
<nav className={`wpsi-menu ${orientation} align-${alignment}`}> |
||||||
|
{activeItems.map(item => <a href={item.value}><span className={`wpsi wpsi-${item.key}`}></span></a>)} |
||||||
|
</nav> |
||||||
|
</p> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
.wp-block-create-block-wpsi-menu { |
||||||
|
background-color: #21759b; |
||||||
|
color: #fff; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
nav.wp-social-icons { |
||||||
|
display: flex; |
||||||
|
padding: 2rem 0; |
||||||
|
gap: 2rem; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons > a .wpsi { |
||||||
|
font-size: 1.8rem; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-left { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.align-right { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-left { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
nav.wp-social-icons.vertical.align-right { |
||||||
|
align-items: flex-end; |
||||||
|
}/*# sourceMappingURL=style.css.map */ |
||||||
@ -0,0 +1 @@ |
|||||||
|
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,yBAAA;EACA,WAAA;EACA,YAAA;ACCD;;ADEA;EACC,aAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;ACCD;ADEE;EACC,iBAAA;ACAH;ADIC;EACC,uBAAA;ACFF;ADKC;EACC,2BAAA;ACHF;ADMC;EACC,yBAAA;ACJF;ADOC;EACC,sBAAA;ACLF;ADOE;EACC,uBAAA;ACLH;ADQE;EACC,qBAAA;ACNH","file":"style.css"} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
.wp-block-create-block-wpsi-menu { |
||||||
|
background-color: #21759b; |
||||||
|
color: #fff; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
nav.wp-social-icons { |
||||||
|
display: flex; |
||||||
|
padding: 2rem 0; |
||||||
|
gap: 2rem; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
> a { |
||||||
|
.wpsi { |
||||||
|
font-size: 1.8rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.align-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
&.align-left { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
&.align-right { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
&.vertical { |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
&.align-left { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
&.align-right { |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
const $ = selector => { |
||||||
|
const elements = document.querySelectorAll(selector); |
||||||
|
|
||||||
|
return elements.length === 1 ? elements[0] : elements; |
||||||
|
}; |
||||||
|
|
||||||
|
const Services = {}; |
||||||
|
|
||||||
|
const SaveServices = () => { |
||||||
|
const body = new FormData(); |
||||||
|
body.append("nonce", wpsi.nonce); |
||||||
|
body.append("action", "wpsi-ajax"); |
||||||
|
body.append("services", JSON.stringify(Services)); |
||||||
|
|
||||||
|
fetch(wpsi.adminURL, { |
||||||
|
method : "POST", |
||||||
|
body |
||||||
|
}).catch(error => console.error(error)); |
||||||
|
}; |
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => { |
||||||
|
inputs = $(".wpsi-icon-selector"); |
||||||
|
|
||||||
|
for (const input of inputs) { |
||||||
|
if (!(input instanceof HTMLElement)) |
||||||
|
continue; |
||||||
|
const service = input.getAttribute("data-icon"); |
||||||
|
if (!service || service === "") |
||||||
|
continue;
|
||||||
|
const value = input.value; |
||||||
|
|
||||||
|
if (value && value !== "") |
||||||
|
Services[service] = value; |
||||||
|
if (value === "") |
||||||
|
delete Services[service]; |
||||||
|
|
||||||
|
input.addEventListener("change", event => { |
||||||
|
Services[service] = event.target.value;
|
||||||
|
SaveServices();
|
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons; |
||||||
|
|
||||||
|
class Backend { |
||||||
|
public function __construct() { |
||||||
|
add_action("admin_enqueue_scripts", [$this, "loadScripts"]); |
||||||
|
} |
||||||
|
|
||||||
|
public function loadScripts() : void { |
||||||
|
$folder = trim(plugin_dir_url(dirname(__FILE__)), "/"); |
||||||
|
|
||||||
|
wp_enqueue_style("wp-social-icons-font", "$folder/fonts/wp-social-icons/style.css"); |
||||||
|
wp_enqueue_style("wp-social-icons-admin", "$folder/css/wp-social-icons.css"); |
||||||
|
|
||||||
|
wp_enqueue_script("wp-social-icons-admin", "$folder/javascript/wp-social-icons-admin.js", []); |
||||||
|
|
||||||
|
wp_localize_script("wp-social-icons-admin", "wpsi", [ |
||||||
|
"adminURL" => admin_url("admin-ajax.php"), |
||||||
|
"nonce" => wp_create_nonce("wpsi-nonce") |
||||||
|
]); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons; |
||||||
|
|
||||||
|
use WP_REST_Request; |
||||||
|
|
||||||
|
class Blocks { |
||||||
|
public function __construct(private Settings $settings) { |
||||||
|
add_action("init", [$this, "registerBlocks"]); |
||||||
|
add_action("rest_api_init", [$this, "registerAPIRoute"]); |
||||||
|
} |
||||||
|
|
||||||
|
public function registerBlocks() : void { |
||||||
|
register_block_type(dirname(__FILE__)."/../javascript/blocks/wpsi-menu/build"); |
||||||
|
} |
||||||
|
|
||||||
|
public function registerAPIRoute() : void { |
||||||
|
register_rest_route("wp-social-icons", "/items", [ |
||||||
|
"methods" => "GET", |
||||||
|
"permission_callback" => "__return_true", |
||||||
|
"callback" => function (WP_REST_Request $_) : ?array { |
||||||
|
return (array) $this->settings->get(); |
||||||
|
} |
||||||
|
]); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons { |
||||||
|
|
||||||
|
class Frontend { |
||||||
|
private const DEFAULT_ARGS = [ |
||||||
|
"container_class" => "wp-social-icons", |
||||||
|
"container" => "nav", |
||||||
|
"before" => "", |
||||||
|
"after" => "", |
||||||
|
"icon_before" => "", |
||||||
|
"icon_after" => "", |
||||||
|
"exclude" => [] |
||||||
|
]; |
||||||
|
public function __construct(private Settings $settings) { |
||||||
|
add_action("wp_enqueue_scripts", [$this, "enqueueFont"]); |
||||||
|
} |
||||||
|
|
||||||
|
public function enqueueFont() : void { |
||||||
|
wp_enqueue_style("wp-social-icons", plugin_dir_url(dirname(__FILE__))."/fonts/wp-social-icons/style.css"); |
||||||
|
} |
||||||
|
|
||||||
|
public static function MenuMarkup(array $args = []) : string { |
||||||
|
$args = array_merge(self::DEFAULT_ARGS, $args); |
||||||
|
$container = $args["container"]; |
||||||
|
$containerClass = $args["container_class"]; |
||||||
|
$before = $args["before"]; |
||||||
|
$after = $args["after"]; |
||||||
|
$iconBefore = $args["icon_before"]; |
||||||
|
$iconAfter = $args["icon_after"]; |
||||||
|
$exclude = $args["exclude"]; |
||||||
|
|
||||||
|
$out = "<$container class='$containerClass'>"; |
||||||
|
$services = Settings::Services(); |
||||||
|
|
||||||
|
foreach ($services as $service => $url) { |
||||||
|
if (in_array($service, $exclude)) |
||||||
|
continue; |
||||||
|
|
||||||
|
$out .= sprintf( |
||||||
|
"$before<a href='%s' class='wp-social-icon-link'>$iconBefore<span class='wpsi wpsi-%s'></span>$iconAfter</a>$after\n", |
||||||
|
$url, |
||||||
|
$service |
||||||
|
); |
||||||
|
} |
||||||
|
$out .= "</$container>"; |
||||||
|
|
||||||
|
return $out; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
namespace { |
||||||
|
|
||||||
|
use wpsocialicons\Frontend; |
||||||
|
|
||||||
|
function get_the_wp_social_icons(array $args = []) : string { |
||||||
|
return Frontend::MenuMarkup($args); |
||||||
|
} |
||||||
|
|
||||||
|
function the_wp_social_icons(array $args = []) : void { |
||||||
|
echo get_the_wp_social_icons($args); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons; |
||||||
|
|
||||||
|
use wpsocialicons\Backend; |
||||||
|
use wpsocialicons\Blocks; |
||||||
|
use wpsocialicons\Frontend; |
||||||
|
use wpsocialicons\Settings; |
||||||
|
|
||||||
|
class Plugin { |
||||||
|
const OPTIONS_KEY = "wpsi-services"; |
||||||
|
|
||||||
|
private Backend $backend; |
||||||
|
private Blocks $blocks; |
||||||
|
private Frontend $frontend; |
||||||
|
private Settings $settings; |
||||||
|
|
||||||
|
public readonly array $available; |
||||||
|
|
||||||
|
public function __construct() { |
||||||
|
spl_autoload_register([$this, "autoload"]); |
||||||
|
$this->loadAvailable(); |
||||||
|
|
||||||
|
$this->settings = new Settings($this); |
||||||
|
$this->backend = new Backend(); |
||||||
|
$this->blocks = new Blocks($this->settings); |
||||||
|
$this->frontend = new Frontend($this->settings); |
||||||
|
} |
||||||
|
|
||||||
|
public function autoload(string $className) : void { |
||||||
|
$className = str_replace("\\", "/", str_replace("wpsocialicons\\", "", $className)); |
||||||
|
$src = dirname(__FILE__)."/$className.php"; |
||||||
|
|
||||||
|
if (file_exists($src)) |
||||||
|
require_once($src); |
||||||
|
} |
||||||
|
|
||||||
|
private function loadAvailable() : void { |
||||||
|
$source = dirname(__FILE__)."/../fonts/wp-social-icons/selection.json"; |
||||||
|
|
||||||
|
if (!file_exists($source)) |
||||||
|
return; |
||||||
|
|
||||||
|
$content = file_get_contents($source); |
||||||
|
|
||||||
|
if (!$content) |
||||||
|
return; |
||||||
|
|
||||||
|
$json = json_decode($content); |
||||||
|
$available = array_map(fn ($item) => $item->properties->name, $json->icons); |
||||||
|
sort($available); |
||||||
|
|
||||||
|
$this->available = $available; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons; |
||||||
|
|
||||||
|
class Settings { |
||||||
|
private readonly ?object $currentServices; |
||||||
|
|
||||||
|
public function __construct(private Plugin $root) { |
||||||
|
add_action("admin_menu", [$this, "addMenuPage"]); |
||||||
|
add_action("wp_ajax_wpsi-ajax", [$this, "ajax"]); |
||||||
|
|
||||||
|
$this->currentServices = self::Services(); |
||||||
|
} |
||||||
|
|
||||||
|
public function addMenuPage() : void { |
||||||
|
add_submenu_page( |
||||||
|
"themes.php", |
||||||
|
__("Social Icons", "wpsocialicons"), |
||||||
|
__("Social Icons", "wpsocialicons"), |
||||||
|
"manage_options", |
||||||
|
"wp-social-icons", |
||||||
|
[$this, "renderSettingsPage"] |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public function renderSettingsPage() : void { |
||||||
|
global $_wp_admin_css_colors; |
||||||
|
$template = new Template("settings"); |
||||||
|
$icons = ""; |
||||||
|
|
||||||
|
$accentColor = $_wp_admin_css_colors[get_user_option("admin_color")]->colors[2]; |
||||||
|
printf(" |
||||||
|
<style> |
||||||
|
.wpsi-icons { |
||||||
|
--wpsi-accent-color: %s |
||||||
|
} |
||||||
|
</style> |
||||||
|
", $accentColor); |
||||||
|
|
||||||
|
foreach ($this->root->available as $icon) { |
||||||
|
$value = $this->currentServices->$icon ?? ""; |
||||||
|
$icons .= sprintf( |
||||||
|
"<article class=icon> |
||||||
|
<span class='wpsi wpsi-%s'></span> |
||||||
|
<span class=name>%s</span> |
||||||
|
<input class=wpsi-icon-selector data-icon=%s placeholder='https://' type=text name=wpsi-link-%s value='%s' /> |
||||||
|
</article>", |
||||||
|
$icon, |
||||||
|
ucfirst($icon), |
||||||
|
$icon, |
||||||
|
$icon, |
||||||
|
$value |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
echo $template->render([ |
||||||
|
"icons" => $icons |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
public function get() : ?object { |
||||||
|
return $this->currentServices; |
||||||
|
} |
||||||
|
|
||||||
|
public function ajax() : void { |
||||||
|
if (!wp_verify_nonce($_POST["nonce"], "wpsi-nonce") || !current_user_can("manage_options")) |
||||||
|
wp_die("Unauthorized access"); |
||||||
|
|
||||||
|
// NOTE: here we pass the result to a filter before saving, in case |
||||||
|
// someone needs to do something useful with the information |
||||||
|
// submitted. The filter is called |
||||||
|
// "wpsi_save_services" |
||||||
|
$value = json_decode(html_entity_decode(stripslashes($_POST["services"]))); |
||||||
|
$services = json_encode(apply_filters("wpsi_save_services", $value)); |
||||||
|
|
||||||
|
update_option(Plugin::OPTIONS_KEY, $services); |
||||||
|
} |
||||||
|
|
||||||
|
public static function Services() : ?object { |
||||||
|
return json_decode(html_entity_decode(stripslashes(get_option(Plugin::OPTIONS_KEY, "{}")))); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<?php declare(strict_types=1); |
||||||
|
|
||||||
|
namespace wpsocialicons; |
||||||
|
|
||||||
|
class Template { |
||||||
|
private string $template; |
||||||
|
|
||||||
|
public function __construct(string $templateName) { |
||||||
|
$this->template = file_get_contents(dirname(__FILE__)."/../views/$templateName.html"); |
||||||
|
} |
||||||
|
|
||||||
|
public function render(array $context, bool $echo = false) : string { |
||||||
|
$out = $this->template; |
||||||
|
|
||||||
|
foreach ($context as $key => $value) |
||||||
|
$out = str_replace(sprintf("{{%s}}", $key), $value, $out); |
||||||
|
|
||||||
|
if ($echo) |
||||||
|
echo $out; |
||||||
|
|
||||||
|
return $out; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
./.DS_Store |
||||||
|
./css/wp-social-icons.css |
||||||
|
./.gitignore |
||||||
|
./javascript/blocks/wpsi-menu/package-lock.json |
||||||
|
./javascript/blocks/wpsi-menu/package.json |
||||||
|
./javascript/blocks/wpsi-menu/build/block.json |
||||||
|
./javascript/blocks/wpsi-menu/build/index.asset.php |
||||||
|
./javascript/blocks/wpsi-menu/build/index.js |
||||||
|
./javascript/blocks/wpsi-menu/build/index.css |
||||||
|
./javascript/blocks/wpsi-menu/build/style-index.css.map |
||||||
|
./javascript/blocks/wpsi-menu/build/index.css.map |
||||||
|
./javascript/blocks/wpsi-menu/build/index.js.map |
||||||
|
./javascript/blocks/wpsi-menu/build/render.php |
||||||
|
./javascript/blocks/wpsi-menu/build/index-rtl.css |
||||||
|
./javascript/blocks/wpsi-menu/build/style-index.css |
||||||
|
./javascript/blocks/wpsi-menu/build/style-index-rtl.css |
||||||
|
./javascript/blocks/wpsi-menu/src/block.json |
||||||
|
./javascript/blocks/wpsi-menu/src/editor.css |
||||||
|
./javascript/blocks/wpsi-menu/src/edit.js |
||||||
|
./javascript/blocks/wpsi-menu/src/style.css.map |
||||||
|
./javascript/blocks/wpsi-menu/src/editor.scss |
||||||
|
./javascript/blocks/wpsi-menu/src/save.js |
||||||
|
./javascript/blocks/wpsi-menu/src/index.js |
||||||
|
./javascript/blocks/wpsi-menu/src/style.scss |
||||||
|
./javascript/blocks/wpsi-menu/src/style.css |
||||||
|
./javascript/blocks/wpsi-menu/src/render.php |
||||||
|
./javascript/blocks/wpsi-menu/src/editor.css.map |
||||||
|
./javascript/wp-social-icons-admin.js |
||||||
|
./fonts/.DS_Store |
||||||
|
./fonts/wp-social-icons/.DS_Store |
||||||
|
./fonts/wp-social-icons/style.css |
||||||
|
./fonts/wp-social-icons/selection.json |
||||||
|
./fonts/wp-social-icons/fonts/.DS_Store |
||||||
|
./fonts/wp-social-icons/fonts/WP-Social-Icons.ttf |
||||||
|
./fonts/wp-social-icons/fonts/WP-Social-Icons.svg |
||||||
|
./fonts/wp-social-icons/fonts/WP-Social-Icons.woff |
||||||
|
./views/settings.html |
||||||
|
./src/Blocks.php |
||||||
|
./src/Settings.php |
||||||
|
./src/Plugin.php |
||||||
|
./src/Backend.php |
||||||
|
./src/Template.php |
||||||
|
./src/Frontend.php |
||||||
|
./wp-social-icons.php |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<section class=wrap> |
||||||
|
<h1>WP Social Icons</h1> |
||||||
|
<p> |
||||||
|
Just add the corresponding URL to your social media account to the |
||||||
|
field below the service you want to activate. |
||||||
|
</p> |
||||||
|
<section class="wpsi-icons"> |
||||||
|
{{icons}} |
||||||
|
</section> |
||||||
|
</section> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<?php |
||||||
|
/* |
||||||
|
* Plugin Name: WP Social Icons |
||||||
|
* Description: A plugin for displaying social media links with icons on your WordPress website |
||||||
|
* Author: Mike Ochmann <miko@massivedynamic.eu> |
||||||
|
* Author URI: https://mike-ochmann.de |
||||||
|
* License: MIT |
||||||
|
* Text Domain: wpsocialicons |
||||||
|
* Domain Path: /lang |
||||||
|
* Version: 0.0.1 |
||||||
|
*/ |
||||||
|
|
||||||
|
require_once("src/Plugin.php"); |
||||||
|
|
||||||
|
use wpsocialicons\Plugin; |
||||||
|
|
||||||
|
new Plugin; |
||||||
Loading…
Reference in new issue