Changeset 2517259
- Timestamp:
- 04/18/2021 11:49:01 PM (5 years ago)
- Location:
- magic-block/trunk
- Files:
-
- 5 edited
-
css/magicblock.css (modified) (4 diffs)
-
js/magicblock-jsx.js (modified) (6 diffs)
-
js/magicblock.build.js (modified) (9 diffs)
-
magicblock.php (modified) (1 diff)
-
readme.txt (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
magic-block/trunk/css/magicblock.css
r2230023 r2517259 1 1 2 .magicblock-editor > .editor-inner-blocks { 3 border-top-left-radius: 0px; 4 padding: 0 1em; 5 border: 1px solid rgb(215, 215, 215); 2 .magicblock-editor { 3 padding: .2em .25em; 6 4 } 7 5 8 .magicblock-editor .editor-block-list__block-edit { 9 margin-top: 5px; 10 margin-bottom: 5px; 6 .wp-block[data-type="magicblock/magicblock"] { 7 border: 1px solid rgb(215, 215, 215); 8 background: white; 9 } 10 11 .wp-block[data-type="magicblock/magicblock"] .block-editor-inner-blocks { 12 padding-left: .5em; 13 padding-right: .5em; 11 14 } 12 15 … … 16 19 font-family: 'Courier New', Courier, monospace; 17 20 background: white; 18 display: inline-block; 19 border: 1px solid rgb(215, 215, 215); 20 border-bottom: none; 21 border-bottom: 1px solid rgb(215, 215, 215); 21 22 transform: translateY(1px); 22 23 max-width: 100%; … … 24 25 } 25 26 26 .editor-plain-text.magicblock-plaintext {27 font-family: Menlo,Consolas,monaco,monospace;28 font-size: 14px;29 color: #23282d;30 padding: .8em 1em;31 border: 1px solid rgb(135, 135, 135);32 border-radius: 4px;33 }34 27 35 28 .magicblock-class-span, .magicblock-id-span { … … 53 46 } 54 47 55 .edit-post-settings-sidebar__panel-block .components-panel__body .magicblock-newtab .components-base-control {56 margin-bottom: .3em;57 }58 48 59 49 .magicblock-custom-attr-pair { 60 50 margin-bottom: 10px; 61 51 padding: 1em; 62 border-radius: 5px;52 border-radius: 2px; 63 53 border: solid 1px grey; 64 54 } 65 55 66 .magicblock-custom-attr-pair > div {67 margin-bottom: 1em;68 }69 70 .magicblock-custom-attr-key-field {71 display: flex;72 align-items: center;73 }74 75 .magicblock-custom-attr-key-field-prefix {76 margin-right: .5em;77 }78 79 .magicblock-custom-attr-label {80 font-weight: 600;81 margin-bottom: .5em;82 }83 56 84 57 .magic-block-right-align { -
magic-block/trunk/js/magicblock-jsx.js
r2230023 r2517259 2 2 3 3 const { registerBlockType } = wp.blocks; 4 const { InspectorControls, InnerBlocks, PlainText} = wp.editor;4 const {InnerBlocks, InspectorControls } = wp.blockEditor; 5 5 const { Fragment } = wp.element; 6 const { PanelBody, SelectControl, CheckboxControl, Button} = wp.components; 6 const { PanelBody, SelectControl, CheckboxControl, Button, TextControl} = wp.components; 7 7 8 8 9 const icon = () => { … … 28 29 selector: '.wp-block-magicblock-magicblock', 29 30 attribute: 'style', 30 }, 31 default: '' 32 }, 31 33 href: { 32 34 type: 'string', … … 34 36 selector: '.wp-block-magicblock-magicblock', 35 37 attribute: 'href', 38 default: '' 36 39 }, 37 40 customAttrs: { … … 58 61 59 62 const { 60 inlineS ytle,63 inlineStyle, 61 64 elemTag, 62 65 elemId, … … 136 139 137 140 const linkPanels = ( 138 <PanelBody title=" Href">139 < PlainText onChange={onChangeHref} value={href} className="magicblock-plaintext"/>141 <PanelBody title="Link Attributes"> 142 <TextControl label="Href" onChange={onChangeHref} value={href}/> 140 143 <div className="magicblock-flex magicblock-newtab"> 141 144 <CheckboxControl … … 173 176 </PanelBody> 174 177 { elemTag === "a" ? linkPanels : null } 175 <PanelBody title="ID"> 176 <PlainText onChange={onChangeID} value={elemId} className="magicblock-plaintext"/> 177 </PanelBody> 178 <PanelBody title="Class(es)"> 179 <PlainText onChange={onChangeClass} value={elemClass} className="magicblock-plaintext"/> 180 </PanelBody> 181 <PanelBody title="Inline CSS"> 182 <PlainText onChange={onChangeInlineStyle} value={inlineSytle} className="magicblock-plaintext"/> 178 <PanelBody title="Standard Attributes"> 179 <TextControl label="ID" value={ elemId } onChange={onChangeID} /> 180 <TextControl label="Classname (space-seperated)"onChange={onChangeClass} value={elemClass}/> 181 <TextControl label="Inline Style" onChange={onChangeInlineStyle} value={inlineStyle}/> 183 182 </PanelBody> 184 183 <PanelBody title="Custom Attributes"> 185 184 {customAttrs && customAttrs.map((attr, index) => ( 186 185 <div className="magicblock-custom-attr-pair"> 187 <div> 188 <div className="magicblock-custom-attr-label">Name</div> 189 <div className="magicblock-custom-attr-key-field"> 190 <PlainText onChange={newKey => setKeyForCustomAttrs(index, newKey)} value={attr.key} className="magicblock-plaintext"/> 191 </div> 192 </div> 193 <div> 194 <div className="magicblock-custom-attr-label">Value</div> 195 <PlainText onChange={newValue => setValueForCustomAttrs(index, newValue)} value={attr.value} className="magicblock-plaintext"/> 196 </div> 197 <Button isSmall={true} onClick={() => deleteCustomAttr(index)}>Delete</Button> 186 <TextControl label="Name" onChange={newKey => setKeyForCustomAttrs(index, newKey)} value={attr.key} /> 187 <TextControl label="Value" onChange={newValue => setValueForCustomAttrs(index, newValue)} value={attr.value} /> 188 <Button isDestructive={true} onClick={() => deleteCustomAttr(index)}>Delete</Button> 198 189 </div> 199 190 ))} 200 <div class="magic-block-right-align"><Button isS mall={true} onClick={addNewCustomAttr}>New Attribute</Button></div>191 <div class="magic-block-right-align"><Button isSecondary={true} onClick={addNewCustomAttr}>New Attribute</Button></div> 201 192 </PanelBody> 202 193 </InspectorControls> -
magic-block/trunk/js/magicblock.build.js
r2230023 r2517259 75 75 76 76 var registerBlockType = wp.blocks.registerBlockType; 77 var _wp$editor = wp.editor, 78 InspectorControls = _wp$editor.InspectorControls, 79 InnerBlocks = _wp$editor.InnerBlocks, 80 PlainText = _wp$editor.PlainText; 77 var _wp$blockEditor = wp.blockEditor, 78 InnerBlocks = _wp$blockEditor.InnerBlocks, 79 InspectorControls = _wp$blockEditor.InspectorControls; 81 80 var Fragment = wp.element.Fragment; 82 81 var _wp$components = wp.components, … … 84 83 SelectControl = _wp$components.SelectControl, 85 84 CheckboxControl = _wp$components.CheckboxControl, 86 Button = _wp$components.Button; 85 Button = _wp$components.Button, 86 TextControl = _wp$components.TextControl; 87 87 88 88 … … 110 110 source: 'attribute', 111 111 selector: '.wp-block-magicblock-magicblock', 112 attribute: 'style' 112 attribute: 'style', 113 default: '' 113 114 }, 114 115 href: { … … 116 117 source: 'attribute', 117 118 selector: '.wp-block-magicblock-magicblock', 118 attribute: 'href' 119 attribute: 'href', 120 default: '' 119 121 }, 120 122 customAttrs: { … … 140 142 edit: function edit(props) { 141 143 var _props$attributes = props.attributes, 142 inlineS ytle = _props$attributes.inlineSytle,144 inlineStyle = _props$attributes.inlineStyle, 143 145 elemTag = _props$attributes.elemTag, 144 146 elemId = _props$attributes.elemId, … … 213 215 var linkPanels = wp.element.createElement( 214 216 PanelBody, 215 { title: " Href" },216 wp.element.createElement( PlainText, { onChange: onChangeHref, value: href, className: "magicblock-plaintext"}),217 { title: "Link Attributes" }, 218 wp.element.createElement(TextControl, { label: "Href", onChange: onChangeHref, value: href }), 217 219 wp.element.createElement( 218 220 "div", … … 257 259 wp.element.createElement( 258 260 PanelBody, 259 { title: "ID" }, 260 wp.element.createElement(PlainText, { onChange: onChangeID, value: elemId, className: "magicblock-plaintext" }) 261 ), 262 wp.element.createElement( 263 PanelBody, 264 { title: "Class(es)" }, 265 wp.element.createElement(PlainText, { onChange: onChangeClass, value: elemClass, className: "magicblock-plaintext" }) 266 ), 267 wp.element.createElement( 268 PanelBody, 269 { title: "Inline CSS" }, 270 wp.element.createElement(PlainText, { onChange: onChangeInlineStyle, value: inlineSytle, className: "magicblock-plaintext" }) 261 { title: "Standard Attributes" }, 262 wp.element.createElement(TextControl, { label: "ID", value: elemId, onChange: onChangeID }), 263 wp.element.createElement(TextControl, { label: "Classname (space-seperated)", onChange: onChangeClass, value: elemClass }), 264 wp.element.createElement(TextControl, { label: "Inline Style", onChange: onChangeInlineStyle, value: inlineStyle }) 271 265 ), 272 266 wp.element.createElement( … … 277 271 "div", 278 272 { className: "magicblock-custom-attr-pair" }, 279 wp.element.createElement( 280 "div", 281 null, 282 wp.element.createElement( 283 "div", 284 { className: "magicblock-custom-attr-label" }, 285 "Name" 286 ), 287 wp.element.createElement( 288 "div", 289 { className: "magicblock-custom-attr-key-field" }, 290 wp.element.createElement(PlainText, { onChange: function onChange(newKey) { 291 return setKeyForCustomAttrs(index, newKey); 292 }, value: attr.key, className: "magicblock-plaintext" }) 293 ) 294 ), 295 wp.element.createElement( 296 "div", 297 null, 298 wp.element.createElement( 299 "div", 300 { className: "magicblock-custom-attr-label" }, 301 "Value" 302 ), 303 wp.element.createElement(PlainText, { onChange: function onChange(newValue) { 304 return setValueForCustomAttrs(index, newValue); 305 }, value: attr.value, className: "magicblock-plaintext" }) 306 ), 273 wp.element.createElement(TextControl, { label: "Name", onChange: function onChange(newKey) { 274 return setKeyForCustomAttrs(index, newKey); 275 }, value: attr.key }), 276 wp.element.createElement(TextControl, { label: "Value", onChange: function onChange(newValue) { 277 return setValueForCustomAttrs(index, newValue); 278 }, value: attr.value }), 307 279 wp.element.createElement( 308 280 Button, 309 { is Small: true, onClick: function onClick() {281 { isDestructive: true, onClick: function onClick() { 310 282 return deleteCustomAttr(index); 311 283 } }, … … 319 291 wp.element.createElement( 320 292 Button, 321 { isS mall: true, onClick: addNewCustomAttr },293 { isSecondary: true, onClick: addNewCustomAttr }, 322 294 "New Attribute" 323 295 ) -
magic-block/trunk/magicblock.php
r2230023 r2517259 3 3 Plugin Name: Magic Block 4 4 Description: Registers a container block. It has settings for element, ID, classname, style, and any other attribute. 5 Version: 1. 2.25 Version: 1.3.0 6 6 Author: Will Delphia 7 7 License: GPL2 -
magic-block/trunk/readme.txt
r2230023 r2517259 3 3 Tags: block, container block, html element, data attributes, div, section, flexbox, css grid, tag, nesting, child blocks, parent blocks 4 4 Requires at least: 5.0 5 Tested up to: 5. 3.25 Tested up to: 5.7.1 6 6 Requires PHP: 5.2.4 7 7 License: GPL2
Note: See TracChangeset
for help on using the changeset viewer.