Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optional modal for editor fields #93

Merged
merged 29 commits into from
Sep 10, 2021
Merged
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
d7dbfe5
Initial POC of the editor modal
kienstra Aug 23, 2021
c731c4a
Merge in develop, resolve conflict
kienstra Aug 31, 2021
bc9961e
In composer.json, add a lint and lint-fix script
kienstra Aug 31, 2021
2a1ba28
Access isSelected from blockProps
kienstra Aug 31, 2021
ef4ff50
Remove needless brackets and return statements
kienstra Aug 31, 2021
446f7c4
Simplify the <EditorForm> rendering
kienstra Aug 31, 2021
4a76b10
Do npm run packages-update for WP packages
kienstra Aug 31, 2021
066dfd0
Update more packages to work on getting Jest tests to pass
kienstra Aug 31, 2021
8967ec8
Revert changes to package-lock.json and package.json
kienstra Aug 31, 2021
e84633f
Add a checkbox to display in the modal
kienstra Aug 31, 2021
11132c5
Remove 2 extra spaces in composer.json
kienstra Aug 31, 2021
02704ee
Inline the handleChange() function in the onChange prop
kienstra Aug 31, 2021
52239d8
Remove some needless patterns from .gitignore
kienstra Aug 31, 2021
254add0
Add Jest tests for the modal
kienstra Sep 1, 2021
ad8a33d
Add an ESLint rule for the textdomain in i18n functions
kienstra Sep 1, 2021
25e8c7a
Change the styling to only look for .block-form, not other wrapping s…
kienstra Sep 1, 2021
6e9f837
Remove default values from <MediaUpload> and <FormFileUpload>
kienstra Sep 1, 2021
f026292
Possible solution to bug, though it takes too long
kienstra Sep 3, 2021
259c00f
Revert "Possible solution to bug, though it takes too long"
kienstra Sep 3, 2021
6d63f9d
Fix an issue with a <MediaUpload> inside the <Modal>
kienstra Sep 6, 2021
142fb4b
Add an assertion that displayModal is false
kienstra Sep 6, 2021
e4b2fe1
Fix the styling in the Inspector
kienstra Sep 6, 2021
3244538
Fix an issue where the Color control had missing styling
kienstra Sep 7, 2021
2a64981
Add Inner Blocks and File field to README.md
kienstra Sep 7, 2021
16faf33
Use Phil's idea for <label> text for the checkbox
kienstra Sep 7, 2021
71b9aba
Add a correct title for the <Modal>
kienstra Sep 7, 2021
ed3c4f1
Ensure that the slug is lower case
kienstra Sep 7, 2021
41e347d
Allow multiple block titles, as it's now in the <Modal> header
kienstra Sep 7, 2021
d07a86b
Don't call toBeInTheDocument() in test
kienstra Sep 7, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@
],
"rules": {
"@wordpress/dependency-group": "error",
"@wordpress/i18n-text-domain": [
"error",
{
"allowedTextDomain": "genesis-custom-blocks"
}
],
"@wordpress/no-unused-vars-before-return": "off",
"@wordpress/react-no-unsafe-timeout": "error",
"comma-dangle": [
Expand Down
20 changes: 0 additions & 20 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
# IDEA Ignores #
################
*.iml
*.ipr
*.iws
.idea/
out/
local.properties

# Sublime Text #
##############
*.sublime-project
*.sublime-workspace

# Packages #
############
Expand Down Expand Up @@ -92,16 +82,6 @@ node_modules
#######
*.sass-cache

# Vagrant #
##########
.vagrant

# Ansible
*.retry

# ack
.ackrc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR, but some of these ignores aren't needed.

# Composer
vendor

Expand Down
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
save-exact = true
engine-strict = true
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ Let the plugin do the heavy lifting so you can use the built-in editor, or famil
As an alternative to the built-in editor, there are simple functions, ready to render and work with the data stored through your custom block fields.

## Currently available block fields ##
* Inner Blocks field
* File Field
* Text Field
* Image Field
* URL Field
Expand Down
6 changes: 6 additions & 0 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
}
},
"scripts": {
"lint": [
"phpcs"
],
"lint-fix": [
"phpcbf"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might as well run phpcbf and phpcs from within Composer, instead of running them like ./vendor/bin/phpcbf

],
"test": [
"phpunit"
]
Expand Down
127 changes: 62 additions & 65 deletions css/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,8 @@ $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans
box-shadow: none;
}

/* Block form in editor & sidebar */
div[class^="wp-block-genesis-custom-blocks-"],
.edit-post-settings-sidebar__panel-block .components-panel__body,
.gcb-editor {
.gcb-editor-form,
.gcb-inspector-form {

:required:invalid {
border-color: #c00000;
Expand Down Expand Up @@ -116,84 +114,83 @@ div[class^="wp-block-genesis-custom-blocks-"],
div[class^="wp-block-genesis-custom-blocks-"],
.gcb-editor {
margin: 0;
}

.block-form {
border-left: none;
background: $dark-opacity-light-200;
padding: 22px 0 22px 22px;
font-size: 0.8125rem;
display: flex;
flex-wrap: wrap;

h3 {
color: #111;
font-size: 1rem;
margin: 0;
flex: 1 1 100%;

svg {
position: relative;
top: 6px;
margin-right: 4px;
}
.gcb-editor-form {
border-left: none;
background: $dark-opacity-light-200;
padding: 22px 0 22px 22px;
font-size: 0.8125rem;
display: flex;
flex-wrap: wrap;

h3 {
color: #111;
font-size: 1rem;
margin: 0;
flex: 1 1 100%;

svg {
position: relative;
top: 6px;
margin-right: 4px;
}
}

p {
font-size: 1rem;
font-family: $font-family;
}
p {
font-size: 1rem;
font-family: $font-family;
}

.genesis-custom-blocks-control {
flex-basis: 100%;
padding-right: 22px;
.genesis-custom-blocks-control {
flex-basis: 100%;
padding-right: 22px;

&.width-25 {
flex-basis: 25%;
}
&.width-50 {
flex-basis: 50%;
}
&.width-75 {
flex-basis: 75%;
}
&.width-25 {
flex-basis: 25%;
}

@media screen and (max-width: 782px) {
.genesis-custom-blocks-control.width-25,
.genesis-custom-blocks-control.width-50,
.genesis-custom-blocks-control.width-75 {
flex-basis: 100%;
}
&.width-50 {
flex-basis: 50%;
}
&.width-75 {
flex-basis: 75%;
}
}

.components-base-control {
font-family: $font-family;
@media screen and (max-width: 782px) {
.genesis-custom-blocks-control.width-25,
.genesis-custom-blocks-control.width-50,
.genesis-custom-blocks-control.width-75 {
flex-basis: 100%;
}
}

.components-base-control__field {
margin: 1em 0 0;
.components-base-control {
font-family: $font-family;
}

.components-base-control__label {
display: block;
font-weight: 600;
}
}
.components-base-control__field {
margin: 1em 0 0;

.components-base-control__help {
margin: 0 0 1em 0.5em;
font-size: 1em;
color: rgba(0, 0, 0, 0.8);
.components-base-control__label {
display: block;
font-weight: 600;
}
}

/* Override a max-width: 25rem style rule in Core that can prevent displaying at the selected with, like 75% */
.components-select-control__input {
max-width: unset;
}
.components-base-control__help {
margin: 0 0 1em 0.5em;
font-size: 1em;
color: rgba(0, 0, 0, 0.8);
}

/* Override a max-width: 25rem style rule in Core that can prevent displaying at the selected with, like 75% */
.components-select-control__input {
max-width: unset;
}
}

/* Block form in sidebar */
.edit-post-settings-sidebar__panel-block .components-panel__body {
.gcb-inspector-form {
/* Media Upload Component */
.genesis-custom-blocks-media-controls {
.components-spinner {
Expand Down
Loading