├── dist
├── blocks.editor.build.css
├── blocks.style.build.css
└── blocks.build.js
├── .gitattributes
├── icon.png
├── .DS_Store
├── src
├── blocks.js
├── block-attributes
│ ├── editor.scss
│ ├── block-index.js
│ ├── block-glossary.js
│ ├── block-info.js
│ ├── attribute.js
│ ├── index.js
│ ├── style.scss
│ └── render.php
├── common.scss
└── init.php
├── icon-128x128.png
├── icon-256x256.png
├── .eslintignore
├── package.json
├── README.md
├── .editorconfig
├── plugin.php
├── Makefile
├── .gitignore
├── icon.svg
└── .eslintrc.json
/dist/blocks.editor.build.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OIT-Design/block-attributes-glossary/HEAD/icon.png
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OIT-Design/block-attributes-glossary/HEAD/.DS_Store
--------------------------------------------------------------------------------
/src/blocks.js:
--------------------------------------------------------------------------------
1 | /**
2 | * All Regsitered Blocks
3 | */
4 |
5 | import './block-attributes';
6 |
--------------------------------------------------------------------------------
/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OIT-Design/block-attributes-glossary/HEAD/icon-128x128.png
--------------------------------------------------------------------------------
/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OIT-Design/block-attributes-glossary/HEAD/icon-256x256.png
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*.min.js
2 | **/*.build.js
3 | **/node_modules/**
4 | **/vendor/**
5 | build
6 | coverage
7 | cypress
8 | node_modules
9 | vendor
10 |
--------------------------------------------------------------------------------
/src/block-attributes/editor.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * #.# Editor Styles
3 | *
4 | * CSS for just Backend enqueued after style.scss
5 | * which makes it higher in priority.
6 | */
7 |
8 |
--------------------------------------------------------------------------------
/src/common.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * #.# Common SCSS
3 | *
4 | * Can include things like variables and mixins
5 | * that are used across the project.
6 | */
7 |
8 | // Colors.
9 | $black: rgb(41, 41, 41);
10 | $white: #f4f4f4;
11 | $gray: #dedede;
12 | $green: #bada55;
13 | $red: orangered;
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "block-attributes",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "cgb-scripts start",
7 | "build": "cgb-scripts build",
8 | "eject": "cgb-scripts eject"
9 | },
10 | "dependencies": {
11 | "cgb-scripts": "1.14.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Block Attributes Glossary
2 |
3 | Create a block that will generate a glossary of all the blocks registered on your site with their available attributes. Very helpful when you are working with block templates.
4 |
5 | ## `npm build` to build
6 |
7 | This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block)
--------------------------------------------------------------------------------
/src/block-attributes/block-index.js:
--------------------------------------------------------------------------------
1 | export const BlockIndex = ( { blocks } ) => {
2 | return (
3 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/block-attributes/block-glossary.js:
--------------------------------------------------------------------------------
1 | import { BlockIndex } from './block-index';
2 | import { BlockInfo } from './block-info';
3 |
4 | export const BlockGlossary = ( { blocks } ) => {
5 | return (
6 |
7 |
All Blocks
8 |
9 | { blocks.map( ( e, i ) => ) }
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 |
4 | # WordPress Coding Standards
5 | # https://make.wordpress.org/core/handbook/coding-standards/
6 |
7 | root = true
8 |
9 | [*]
10 | charset = utf-8
11 | end_of_line = lf
12 | insert_final_newline = true
13 | trim_trailing_whitespace = true
14 | indent_style = tab
15 |
16 | [*.yml]
17 | indent_style = space
18 | indent_size = 2
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/plugin.php:
--------------------------------------------------------------------------------
1 | {
5 | return (
6 |
7 |
8 |
9 |
{ title }
10 |
{ name }
11 |
12 |
Attributes
13 |
14 | { attributes && Object.keys( attributes ).map( ( e, i ) => ) }
15 |
16 |
{ name }:
30 |
31 | { Object.keys( data ).map( ( e, i ) => {
32 | return (
33 |
34 | );
35 | } ) }
36 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/block-attributes/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * BLOCK: block-attributes
3 | *
4 | * Registering a basic block with Gutenberg.
5 | * Simple block, renders and saves the same content without any interactivity.
6 | */
7 |
8 | // Import CSS.
9 | import './style.scss';
10 | import './editor.scss';
11 | import { BlockGlossary } from './block-glossary';
12 |
13 | const { __ } = wp.i18n;
14 | const { registerBlockType, getBlockTypes } = wp.blocks;
15 |
16 | let update = false;
17 |
18 | /**
19 | * Register: aa Gutenberg Block.
20 | *
21 | * Registers a new block provided a unique name and an object defining its
22 | * behavior. Once registered, the block is made editor as an option to any
23 | * editor interface where blocks are implemented.
24 | *
25 | * @link https://wordpress.org/gutenberg/handbook/block-api/
26 | * @param {string} name Block name.
27 | * @param {Object} settings Block settings.
28 | * @return {?WPBlock} The block, if it has been successfully
29 | * registered; otherwise `undefined`.
30 | */
31 | registerBlockType( 'ncsu-blocks/block-attributes', {
32 | title: __( 'Block Attributes' ), // Block title.
33 | icon: 'list-view',
34 | category: 'common',
35 | keywords: [
36 | __( 'info' ),
37 | __( 'help' ),
38 | __( 'attributes' ),
39 |
40 | ],
41 |
42 | attributes: {
43 | blocks: {
44 | type: 'array',
45 | default: [],
46 | },
47 | },
48 |
49 | edit: function( props ) {
50 | const blocks = getBlockTypes();
51 | if ( ! update ) {
52 | update = true;
53 | const blockInfo = blocks.map( ( { title, name, attributes, icon, category, keywords } ) => ( {
54 | title, name, attributes, icon, category, keywords,
55 | } ) );
56 | props.setAttributes( { blocks: blockInfo } );
57 | }
58 | console.log( props.attributes.blocks );
59 | return (
60 |
61 |
62 |
63 | );
64 | },
65 |
66 | save: function( props ) {
67 | return null;
68 | },
69 | } );
70 |
--------------------------------------------------------------------------------
/src/block-attributes/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * #.# Styles
3 | *
4 | * CSS for both Frontend+Backend.
5 | */
6 |
7 | .blocks-heading {
8 | position:absolute;
9 | left:-10000px;
10 | top:auto;
11 | width:1px;
12 | height:1px;
13 | overflow:hidden;
14 | }
15 |
16 | .block {
17 | background-color: #333;
18 | width: 100%;
19 | margin-top: 1em;
20 | padding-top: 1em;
21 | color: white;
22 | &-name {
23 | margin-bottom: 0;
24 | font-weight: normal;
25 | }
26 | & > h4 {
27 | padding: 1em 1em 0;
28 | margin: 0;
29 | color: #000;
30 | background-color: #f2f2f2;
31 | font-size: 1.2em;
32 | display: none;
33 | }
34 | & > svg {
35 | float: left;
36 | margin-top: .2em;
37 | margin-left: 1em;
38 | height: 2em;
39 | width: 2em;
40 | fill: #fff;
41 | }
42 | &-title {
43 | margin: 0;
44 | padding: 0;
45 | color: #fff;
46 | }
47 | &-headline {
48 | display: inline-block;
49 | padding-left: 1em;
50 | }
51 | &-index {
52 | & > ul {
53 | display: grid;
54 | grid-template-columns: repeat( auto-fit, minmax(15em, 1fr) );
55 | }
56 | }
57 | &-icon {
58 | font-size: 2em;
59 | margin-left: 0.5em;
60 | margin-top: 0.1em;
61 | }
62 |
63 | }
64 |
65 | .attributes {
66 | list-style-type: none;
67 | color: #000;
68 | background-color: #f2f2f2;
69 | display: grid;
70 | grid-template-columns: repeat( auto-fit, minmax(15em, 1fr) );
71 | margin-bottom: 0;
72 | }
73 |
74 | .attribute {
75 | padding: 1em;
76 | &:before {
77 | content: "";
78 | display: none;
79 | }
80 | & > ul {
81 | padding-left: 0;
82 | }
83 | &-name {
84 | font-family: Verdana, Geneva, Tahoma, sans-serif;
85 | text-transform: initial;
86 | overflow-wrap: break-word;
87 | font-weight: normal;
88 | }
89 | &-property {
90 | &:before {
91 | content: "";
92 | display: none;
93 | }
94 | &-name {
95 | color: #666;
96 | }
97 | &-value {
98 | font-style: italic;
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/init.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
48 |
--------------------------------------------------------------------------------
/dist/blocks.build.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(1)},function(e,t,n){"use strict";var r=n(2),a=(n.n(r),n(3)),l=(n.n(a),n(4)),c=wp.i18n.__,u=wp.blocks,o=u.registerBlockType,i=u.getBlockTypes,s=!1;o("ncsu-blocks/block-attributes",{title:c("Block Attributes"),icon:"list-view",category:"common",keywords:[c("info"),c("help"),c("attributes")],attributes:{blocks:{type:"array",default:[]}},edit:function(e){var t=i();if(!s){s=!0;var n=t.map(function(e){return{title:e.title,name:e.name,attributes:e.attributes,icon:e.icon,category:e.category,keywords:e.keywords}});e.setAttributes({blocks:n})}return console.log(e.attributes.blocks),wp.element.createElement("div",{className:e.className},wp.element.createElement(l.a,{blocks:t}))},save:function(e){return null}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";n.d(t,"a",function(){return c});var r=n(5),a=n(6),l=Object.assign||function(e){for(var t=1;t%4$s',
16 | $children['props']['d'] ? 'path' : 'g',
17 | $children['props']['d'],
18 | $children['props']['fill'] ? 'fill="' . $child['props']['fill'] . '"' : '',
19 | $children['props']['children'] ? $this->render_svg_children($child['props']['children']) : '');
20 | return $return;
21 | }
22 | foreach($children as $child) {
23 | $return .= sprintf('<%1$s d="%2$s" %3$s>%4$s',
24 | $child['props']['d'] ? 'path' : 'g',
25 | $child['props']['d'],
26 | $child['props']['fill'] ? 'fill="' . $child['props']['fill'] . '"' : '',
27 | $child['props']['children'] ? $this->render_svg_children($child['props']['children']) : ''
28 | );
29 | /* if ($child['props']) {
30 | foreach ($child['props'] as $sub_child) {
31 | //var_dump($title, $sub_child);
32 | $return .= '';
33 | }
34 | } */
35 | }
36 | return $return;
37 | }
38 |
39 | public function create_icon($icon, $title) {
40 | if ($title == 'Icon + Link') {
41 | echo '';
42 | var_dump($icon);
43 | echo '
';
44 | }
45 | if (!$icon) return '';
46 | if (is_string($icon['src'])) return '';
47 |
48 |
49 |
50 | return sprintf('
51 |
54 | ',
55 | $icon['src']['props']['viewBox'],
56 | $this->render_svg_children($icon['src']['props']['children'])
57 | );
58 |
59 | }
60 |
61 | public function block_index($blocks) {
62 | $blocks_list = '';
63 | foreach($blocks as $block) {
64 | $blocks_list .= sprintf('
65 |
66 |
67 | %s
68 |
69 | ',
70 | $this->get_block_slug($block['name']),
71 | $block['title']
72 | );
73 | }
74 | return sprintf('', $blocks_list);
80 | }
81 |
82 | public function block_info($block) {
83 | $attributes = $this->render_block_attributes($block['attributes']);
84 | return sprintf('
85 | %s
86 |
87 |
%s - %s
88 |
%s
89 |
90 |
Attributes
91 |
94 |
%s:
120 |
123 | ',
124 | $name,
125 | $this->render_block_attribute_properties($attribute)
126 | );
127 | }
128 |
129 | public function render_block_attribute_properties($properties) {
130 | if (!$properties) {
131 | return '';
132 | }
133 | $rendered = '';
134 | foreach ($properties as $name => $value) {
135 | $rendered .= $this->block_attribute_property($value, $name);
136 | }
137 | return $rendered;
138 | }
139 |
140 | public function block_attribute_property($value, $name) {
141 | return sprintf('
142 | %s:
143 | %s
144 | ',
145 | $name,
146 | $this->get_display_value($value, $name));
147 | }
148 |
149 | public function get_display_value( $value, $name = '') {
150 | if ( is_bool($value) ) {
151 | return $value ? 'true' : 'false';
152 | } else if ( is_array($value) ) {
153 | $vals = array();
154 | foreach ($value as $val) {
155 | $vals[] = $this->get_display_value($val);
156 | }
157 | return '[ ' . join(', ', $vals) . ' ]';
158 | } else if ( is_string($value) ) {
159 | return $name === 'default' ? '"' . $value . '"' : $value;
160 | } else if ( is_numeric($value) ) {
161 | return $value;
162 | } else if ( ! $value || $value === null ) {
163 | return 'null';
164 | }
165 | return 'Object';
166 | }
167 |
168 | public function block_glossary($blocks) {
169 | $all_block_info = '';
170 | foreach($blocks as $block) {
171 | $all_block_info .= $this->block_info($block);
172 | }
173 | return sprintf('
174 |
All Blocks
175 | %s
176 | %s
177 | ',
178 | $this->block_index($blocks),
179 | $all_block_info
180 | );
181 |
182 | }
183 |
184 | public function render($attributes) {
185 | return $this->block_glossary($attributes['blocks']);
186 | }
187 | }
188 |
189 | $ncsu_blocks_block_attributes = new NCSU_Blocks_Block_Attributes();
190 |
191 | register_block_type( 'ncsu-blocks/block-attributes', array(
192 | 'render_callback' => array($ncsu_blocks_block_attributes, 'render'),
193 | ) );
194 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "babel-eslint",
4 | "extends": [
5 | "wordpress",
6 | "plugin:react/recommended",
7 | "plugin:jsx-a11y/recommended",
8 | "plugin:jest/recommended"
9 | ],
10 | "env": {
11 | "browser": false,
12 | "es6": true,
13 | "node": true,
14 | "mocha": true,
15 | "jest/globals": true
16 | },
17 | "parserOptions": {
18 | "sourceType": "module",
19 | "ecmaFeatures": {
20 | "jsx": true
21 | }
22 | },
23 | "globals": {
24 | "wp": true,
25 | "wpApiSettings": true,
26 | "window": true,
27 | "document": true
28 | },
29 | "plugins": ["react", "jsx-a11y", "jest"],
30 | "settings": {
31 | "react": {
32 | "pragma": "wp"
33 | }
34 | },
35 | "rules": {
36 | "array-bracket-spacing": ["error", "always"],
37 | "brace-style": ["error", "1tbs"],
38 | "camelcase": ["error", { "properties": "never" }],
39 | "comma-dangle": ["error", "always-multiline"],
40 | "comma-spacing": "error",
41 | "comma-style": "error",
42 | "computed-property-spacing": ["error", "always"],
43 | "constructor-super": "error",
44 | "dot-notation": "error",
45 | "eol-last": "error",
46 | "eqeqeq": "error",
47 | "func-call-spacing": "error",
48 | "indent": ["error", "tab", { "SwitchCase": 1 }],
49 | "jsx-a11y/label-has-for": [
50 | "error",
51 | {
52 | "required": "id"
53 | }
54 | ],
55 | "jsx-a11y/media-has-caption": "off",
56 | "jsx-a11y/no-noninteractive-tabindex": "off",
57 | "jsx-a11y/role-has-required-aria-props": "off",
58 | "jsx-quotes": "error",
59 | "key-spacing": "error",
60 | "keyword-spacing": "error",
61 | "lines-around-comment": "off",
62 | "no-alert": "error",
63 | "no-bitwise": "error",
64 | "no-caller": "error",
65 | "no-console": "error",
66 | "no-const-assign": "error",
67 | "no-debugger": "error",
68 | "no-dupe-args": "error",
69 | "no-dupe-class-members": "error",
70 | "no-dupe-keys": "error",
71 | "no-duplicate-case": "error",
72 | "no-duplicate-imports": "error",
73 | "no-else-return": "error",
74 | "no-eval": "error",
75 | "no-extra-semi": "error",
76 | "no-fallthrough": "error",
77 | "no-lonely-if": "error",
78 | "no-mixed-operators": "error",
79 | "no-mixed-spaces-and-tabs": "error",
80 | "no-multiple-empty-lines": ["error", { "max": 1 }],
81 | "no-multi-spaces": "error",
82 | "no-multi-str": "off",
83 | "no-negated-in-lhs": "error",
84 | "no-nested-ternary": "error",
85 | "no-redeclare": "error",
86 | "no-restricted-syntax": [
87 | "error",
88 | {
89 | "selector":
90 | "ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]",
91 | "message": "Path access on WordPress dependencies is not allowed."
92 | },
93 | {
94 | "selector": "ImportDeclaration[source.value=/^blocks$/]",
95 | "message": "Use @wordpress/blocks as import path instead."
96 | },
97 | {
98 | "selector": "ImportDeclaration[source.value=/^components$/]",
99 | "message": "Use @wordpress/components as import path instead."
100 | },
101 | {
102 | "selector": "ImportDeclaration[source.value=/^date$/]",
103 | "message": "Use @wordpress/date as import path instead."
104 | },
105 | {
106 | "selector": "ImportDeclaration[source.value=/^editor$/]",
107 | "message": "Use @wordpress/editor as import path instead."
108 | },
109 | {
110 | "selector": "ImportDeclaration[source.value=/^element$/]",
111 | "message": "Use @wordpress/element as import path instead."
112 | },
113 | {
114 | "selector": "ImportDeclaration[source.value=/^i18n$/]",
115 | "message": "Use @wordpress/i18n as import path instead."
116 | },
117 | {
118 | "selector": "ImportDeclaration[source.value=/^data$/]",
119 | "message": "Use @wordpress/data as import path instead."
120 | },
121 | {
122 | "selector": "ImportDeclaration[source.value=/^utils$/]",
123 | "message": "Use @wordpress/utils as import path instead."
124 | },
125 | {
126 | "selector":
127 | "CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])",
128 | "message": "Translate function arguments must be string literals."
129 | },
130 | {
131 | "selector":
132 | "CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])",
133 | "message": "Translate function arguments must be string literals."
134 | },
135 | {
136 | "selector":
137 | "CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])",
138 | "message": "Translate function arguments must be string literals."
139 | }
140 | ],
141 | "no-shadow": "error",
142 | "no-undef": "error",
143 | "no-undef-init": "error",
144 | "no-unreachable": "error",
145 | "no-unsafe-negation": "error",
146 | "no-unused-expressions": "error",
147 | "no-unused-vars": "error",
148 | "no-useless-computed-key": "error",
149 | "no-useless-constructor": "error",
150 | "no-useless-return": "error",
151 | "no-var": "error",
152 | "no-whitespace-before-property": "error",
153 | "object-curly-spacing": ["error", "always"],
154 | "padded-blocks": ["error", "never"],
155 | "prefer-const": "error",
156 | "quote-props": ["error", "as-needed"],
157 | "react/display-name": "off",
158 | "react/jsx-curly-spacing": [
159 | "error",
160 | {
161 | "when": "always",
162 | "children": true
163 | }
164 | ],
165 | "react/jsx-equals-spacing": "error",
166 | "react/jsx-indent": ["error", "tab"],
167 | "react/jsx-indent-props": ["error", "tab"],
168 | "react/jsx-key": "error",
169 | "react/jsx-tag-spacing": "error",
170 | "react/no-children-prop": "off",
171 | "react/no-find-dom-node": "warn",
172 | "react/prop-types": "off",
173 | "semi": "error",
174 | "semi-spacing": "error",
175 | "space-before-blocks": ["error", "always"],
176 | "space-before-function-paren": ["error", "never"],
177 | "space-in-parens": ["error", "always"],
178 | "space-infix-ops": ["error", { "int32Hint": false }],
179 | "space-unary-ops": [
180 | "error",
181 | {
182 | "overrides": {
183 | "!": true
184 | }
185 | }
186 | ],
187 | "template-curly-spacing": ["error", "always"],
188 | "valid-typeof": "error",
189 | "yoda": "off"
190 | }
191 | }
192 |
--------------------------------------------------------------------------------