Skip to content

Commit

Permalink
Huge commit - sorry
Browse files Browse the repository at this point in the history 
This adds a Gutenberg-first (not utilizing the shortcode) dynamic block. And likely renders the legacy block from #104 useless because I added the "Staff Loop Template" for a layout option.

It contains 3 layout options:
- image left, content right
- content left, image right
- image top, content bottom

You can control the fields that are shown on each Single Staff Member block via toggle switches in the `Content Options` panel. **TODO: make these filterable? Would allow users/plugin developers to add their own custom fields.**

All functions that handle the layouts, and all block field render functions are pluggable in that a user can add a function with the same name to their theme and it will be used instead of the function contained in Simple Staff List.
  • Loading branch information
@brettshumaker
brettshumaker committed Mar 16, 2021
1 parent 70ed491 commit 2945af5
Show file tree
Hide file tree
Showing 10 changed files with 593 additions and 944 deletions.
9 changes: 1 addition & 8 deletions trunk/admin/css/blocks.editor.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
.wp-block-simple-staff-list-static .sorry.warning {
background: #7668ce;
color: white;
font-size: 1.2rem; }
.wp-block-simple-staff-list-static .sorry.warning {
background: #7668ce;
color: white;
font-size: 1.2rem; }
.wp-block-simple-staff-list-static .sorry.warning{background:#7668ce;color:white;font-size:1.2rem}
821 changes: 1 addition & 820 deletions trunk/admin/js/editor.blocks.js
View file

Large diffs are not rendered by default.

8 changes: 0 additions & 8 deletions trunk/blocks/single-staff-member/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
.wp-block-simple-staff-list-static {

.sorry.warning {
background: rgb(118, 104, 206);
color: white;
font-size: 1.2rem;
}

}
140 changes: 80 additions & 60 deletions trunk/blocks/single-staff-member/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,62 @@ const { InspectorControls } = wp.editor;
const { decodeEntities } = wp.htmlEntities;
const { apiFetch } = wp;
const {
ServerSideRender,
PanelBody,
PanelRow,
SelectControl,
ToggleControl
} = wp.components;

const renderAdminStaffMember = props => {
const { id, layout } = props.attributes;
const { id, layout, content, className } = props.attributes;

if ( ! id )
return <p>Please select a Staff Member.</p>;

return <p>Staff ID: {id}, Layout: {layout}</p>;
return (
<ServerSideRender
block="simple-staff-list/single-staff-member"
attributes={{
id: id,
layout: layout,
content: content,
}}
/>
);
}

const maybeShowContentOptions = ( layout, content ) => {

if ( 'staff-loop-template' !== layout ) {
return(
<PanelBody
title={__("Content Options", "simple-staff-list")}
initialOpen={false}
>
<p>Turn specific fields on or off.</p>
{content.map( (option, i) => {
// console.log(option);
return(
<ToggleControl
key={i}
label={__(option.label, "simple-staff-list")}
checked={content[i].value}
onChange={newValue => {
const newContent = content.map(a => ({...a}));
newContent[i].value = newValue;
setAttributes({
content: newContent
})
}}
/>
)
})}
</PanelBody>
)
}

return ''
}

/**
Expand All @@ -55,7 +98,7 @@ export default registerBlockType(
layout: {
type: 'string',
// TODO: This needs to be dynamic
default: 'sslp-left-1'
default: 'layout-1'
},
content: {
type: 'array',
Expand All @@ -72,14 +115,14 @@ export default registerBlockType(
value: true,
},
{
name: 'bio',
label: __('Bio', 'simple-staff-list'),
name: 'position',
label: __('Position', 'simple-staff-list'),
value: true,
},
{
name: 'position',
label: __('Position', 'simple-staff-list'),
value: false,
name: 'bio',
label: __('Bio', 'simple-staff-list'),
value: true,
},
{
name: 'email',
Expand All @@ -105,30 +148,30 @@ export default registerBlockType(
}
},
edit: props => {
const { attributes: { id, layout, content },
const { attributes: { id, layout, content, staffData },
className, setAttributes } = props;

console.log('content', content);

// Fetch the staff data if we have a staff ID but no staffData. This covers the scenario of opening a post with an existing Single Staff Member block.
if ( props.attributes.id && ! props.attributes.staffData ) {
if ( id && ! staffData ) {
apiFetch({
path: `/wp/v2/staff-member/${id}?_embed`
}).then(response => {
const fullpost = {
title: decodeEntities(response.title.rendered),
id: response.id,
excerpt: decodeEntities(response.excerpt.rendered),
url: response.link,
date: response.date,
type: response.type,
status: response.status,
media: response._embedded && response._embedded['wp:featuredmedia'] ? response._embedded['wp:featuredmedia'][0] : null
};
// send data to the block;
setAttributes({
staffData: fullpost
});
const fullpost = {
title: decodeEntities(response.title.rendered),
id: response.id,
url: response.link,
media: response._embedded && response._embedded['wp:featuredmedia'] ? response._embedded['wp:featuredmedia'][0] : null,
position: response.staffData.title,
bio: response.staffData.bio,
phone: response.staffData.phone,
email: response.staffData.email,
fb: response.staffData.fb,
tw: response.staffData.tw,
};
// send data to the block;
setAttributes({
staffData: fullpost
});
});
}

Expand All @@ -146,7 +189,7 @@ export default registerBlockType(
}}
inputPlaceholder='Type to search Staff Members'
hideInputOnLimit={true}
posts={ props.attributes.staffData ? [props.attributes.staffData] : [] }
posts={ staffData ? [staffData] : [] }
onChange={newValue => {
const newStaffData = newValue.length === 0 ? undefined : newValue;
setAttributes({
Expand All @@ -163,52 +206,29 @@ export default registerBlockType(
label={__("Choose Layout", "simple-staff-list")}
value={layout}
options={[
{ value: "il-cr", label: __("Image Left, Content Right", "simple-staff-list") },
{ value: "cl-ir", label: __("Content Left, Image Right", "simple-staff-list") },
{ value: "it-cb", label: __("Image Top, Content Bottom", "simple-staff-list") }
{ value: "staff-loop-template", label: __("Staff Loop Template", "simple-staff-list") },
{ value: "layout-1", label: __("Image Left, Content Right", "simple-staff-list") },
{ value: "layout-2", label: __("Content Left, Image Right", "simple-staff-list") },
{ value: "layout-3", label: __("Image Top, Content Bottom", "simple-staff-list") }
]}
onChange={layout => setAttributes({ layout })}
/>
</PanelRow>
</PanelBody>
<PanelBody
title={__("Content Options", "simple-staff-list")}
initialOpen={false}
>
<p>Turn specific fields on or off.</p>
{content.map( (option, i) => {
console.log(option);
return(
<ToggleControl
label={__(option.label, "simple-staff-list")}
checked={content[i].value}
onChange={newValue => {
content[i].value = newValue;
setAttributes({
content: content
})
}}
/>
)
})}
</PanelBody>
{
maybeShowContentOptions( layout, content )
}
</InspectorControls>
<div className={`sslp-layout-${props.attributes.layout}`}>
<div className={`sslp-layout_${layout}`}>
{
renderAdminStaffMember(props)
! staffData ? <p>Select a Staff Member</p> : renderAdminStaffMember(props)
}
</div>
</div>
);
},
save: props => {
return (
<div className={`sslp-layout-${props.attributes.layout}`}>
{
renderAdminStaffMember(props)
}
</div>
)
return null;
},
},
);
56 changes: 40 additions & 16 deletions trunk/blocks/single-staff-member/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,46 @@
$black: #222;
$dark: #f7b733;
$light: rgba(254, 243, 224, 0.52);
.wp-block-simple-staff-list-single-staff-member {

&.layout-1, &.layout-2 {
display: grid;
grid-column-gap: 20px;
}

@media screen and (min-width: 600px) {
&.layout-1 {
grid-template-columns: 35%;
img {
grid-column-start: 1;
}

.staff-member-content {
grid-column-start: 2;
}
}

&.layout-2 {
grid-template-columns: auto 35%;
img {
grid-column-start: 2;
}

.entry-content .wp-block-jsforwpblocks-static,
.wp-block-jsforwpblocks-static {
.staff-member-content {
grid-column-start: 1;
grid-row-start: 1;
}
}
}

background: $light;
border: 5px $dark solid;
padding: 1rem;
&.layout-1, &.layout-2, &.layout-3 {
.contact-link {
display: block;
}

h2 {
color: $black;
font-size: 2rem;
margin: 1rem 0;
}
.social-icon:not(:last-child) {
margin-right: .5em;
}

p {
font-size: 1.4rem;
.staff-member-photo {
float: none;
}
}

}
17 changes: 15 additions & 2 deletions trunk/includes/class-simple-staff-list.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,17 @@ private function load_dependencies() {
/**
* Templating hooks.
*/
require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/sslp-template-hooks.php';
require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/sslp-template-hooks.php';

/**
* Pluggable render functions for Staff Member fields in Gutenberg Blocks
*/
require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/sslp-gutenberg-block-field-render-functions.php';

/**
* Pluggable render functions for Staff Member Gutenberg Blocks layouts
*/
require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/sslp-gutenberg-block-layout-render-functions.php';

/**
* The class responsible for orchestrating the actions and filters of the
Expand Down Expand Up @@ -206,7 +216,10 @@ private function define_public_hooks() {
$this->loader->add_action( 'init', $plugin_public, 'maybe_flush_rewrite_rules', 20 );

// Allow Authenticated Requests to the Staff Member API endpoint
$this->loader->add_filter( 'rest_dispatch_request', $plugin_public, 'rest_dispatch_request', 10, 4 );
$this->loader->add_filter( 'rest_dispatch_request', $plugin_public, 'rest_dispatch_request', 10, 4 );

// Add custom meta data to Staff Member REST API response
$this->loader->add_action( 'rest_api_init', $plugin_public, 'add_staff_custom_to_api' );

// Add Gutenberg dynamic blocks
$this->loader->add_action( 'plugins_loaded', $plugin_public, 'register_dynamic_blocks' );
Expand Down
Loading

0 comments on commit 2945af5

Please sign in to comment.