Skip to content

Commit b743e77

Browse files
vedanshujainvedanshujain
committed
Blocks: Speakers: Update to use the newly added common components.
Note that this is condensation of multiple commits. Original pull request: #33 props coreymckrill, iandunn, vedjain
1 parent 1dd1309 commit b743e77

File tree

11 files changed

+257
-464
lines changed

11 files changed

+257
-464
lines changed

‎public_html/wp-content/mu-plugins/blocks/assets/src/blocks.js

+4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@ const { registerBlockType } = wp.blocks;
66
/**
77
* Internal dependencies
88
*/
9+
import * as sessions from './sessions/';
910
import * as speakers from './speakers/';
11+
import * as sponsors from './sponsors/';
1012

1113
[
14+
sessions,
1215
speakers,
16+
sponsors,
1317
].forEach( ( { name, settings } ) => {
1418
registerBlockType( name, settings );
1519
} );

‎public_html/wp-content/mu-plugins/blocks/assets/src/speakers/block-content.js

+86-96
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,103 @@ import classnames from 'classnames';
88
* WordPress dependencies
99
*/
1010
const { Disabled } = wp.components;
11-
const { Component, Fragment, RawHTML } = wp.element;
11+
const { Component, Fragment } = wp.element;
1212
const { decodeEntities } = wp.htmlEntities;
13-
const { __, _n, sprintf } = wp.i18n;
13+
const { __, _n } = wp.i18n;
1414

1515
/**
1616
* Internal dependencies
1717
*/
1818
import AvatarImage from '../shared/avatar';
19+
import { ItemTitle, ItemHTMLContent } from '../shared/block-content';
20+
import { tokenSplit, arrayTokenReplace } from '../shared/i18n';
21+
import GridContentLayout from '../shared/grid-layout/block-content';
1922
import './block-content.scss';
2023

24+
function SpeakerSessions( { speaker, tracks } ) {
25+
const sessions = get( speaker, '_embedded.sessions', [] );
26+
27+
let output = ( <Fragment>{ null }</Fragment> );
28+
29+
if ( sessions.length ) {
30+
output = (
31+
<div className={ classnames( 'wordcamp-item-meta', 'wordcamp-speaker-sessions' ) }>
32+
<h4 className="wordcamp-speaker-sessions-heading">
33+
{ _n( 'Session', 'Sessions', sessions.length, 'wordcamporg' ) }
34+
</h4>
35+
36+
<ul className="wordcamp-speaker-sessions-list">
37+
{ sessions.map( ( session ) =>
38+
<li
39+
key={ session.slug }
40+
className="wordcamp-speaker-session-content"
41+
>
42+
<Disabled>
43+
<a
44+
className="wordcamp-speaker-session-link"
45+
href={ session.link }
46+
>
47+
{ decodeEntities( session.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
48+
</a>
49+
<span className="wordcamp-speaker-session-info">
50+
{ session.session_track.length &&
51+
arrayTokenReplace(
52+
/* translators: 1: A date; 2: A time; 3: A location; */
53+
tokenSplit( __( '%1$s at %2$s in %3$s', 'wordcamporg' ) ),
54+
decodeEntities( session.session_date_time.date ),
55+
decodeEntities( session.session_date_time.time ),
56+
get( tracks.find( ( value ) => {
57+
const [ firstTrackId ] = session.session_track;
58+
return parseInt( value.id ) === firstTrackId;
59+
} ), 'name' )
60+
)
61+
}
62+
{ ! session.session_track.length &&
63+
arrayTokenReplace(
64+
/* translators: 1: A date; 2: A time; */
65+
tokenSplit( __( '%1$s at %2$s', 'wordcamporg' ), ),
66+
decodeEntities( session.session_date_time.date ),
67+
decodeEntities( session.session_date_time.time )
68+
)
69+
}
70+
</span>
71+
</Disabled>
72+
</li>
73+
) }
74+
</ul>
75+
</div>
76+
);
77+
}
78+
79+
return output;
80+
}
81+
2182
class SpeakersBlockContent extends Component {
2283
render() {
2384
const { attributes, speakerPosts, tracks } = this.props;
2485
const {
25-
layout, grid_columns, className,
2686
show_avatars, avatar_size, avatar_align,
2787
content, excerpt_more, show_session,
2888
} = attributes;
2989

30-
const containerClasses = [
31-
'wordcamp-speakers-block',
32-
'layout-' + layout,
33-
className,
34-
];
35-
36-
if ( 'grid' === layout ) {
37-
containerClasses.push( 'grid-columns-' + Number( grid_columns ) );
38-
}
39-
4090
return (
41-
<ul className={ classnames( containerClasses ) }>
91+
<GridContentLayout
92+
{ ...this.props }
93+
>
4294
{ speakerPosts.map( ( post ) =>
43-
<li
95+
<div
4496
key={ post.slug }
4597
className={ classnames(
4698
'wordcamp-speaker',
4799
'wordcamp-speaker-' + decodeEntities( post.slug ),
48-
'wordcamp-clearfix'
49100
) }
50101
>
51-
<h3 className="wordcamp-speaker-name-heading">
52-
<Disabled>
53-
<a href={ post.link }>
54-
{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
55-
</a>
56-
</Disabled>
57-
</h3>
102+
<ItemTitle
103+
className="wordcamp-speaker-title"
104+
headingLevel={ 3 }
105+
title={ post.title.rendered.trim() }
106+
link={ post.link }
107+
/>
58108

59109
{ show_avatars &&
60110
<div className={ classnames( 'wordcamp-speaker-avatar-container', 'align-' + decodeEntities( avatar_align ) ) }>
@@ -72,83 +122,23 @@ class SpeakersBlockContent extends Component {
72122
}
73123

74124
{ ( 'none' !== content ) &&
75-
<div className={ classnames( 'wordcamp-speaker-content', 'wordcamp-speaker-content-' + decodeEntities( content ) ) }>
76-
{ 'full' === content &&
77-
<Disabled>
78-
<RawHTML children={ post.content.rendered.trim() } />
79-
<p className="wordcamp-speaker-permalink">
80-
<a href={ post.link }>
81-
{ __( 'Visit speaker page', 'wordcamporg' ) }
82-
</a>
83-
</p>
84-
</Disabled>
85-
}
86-
{ 'excerpt' === content &&
87-
<Disabled>
88-
<RawHTML children={ post.excerpt.rendered.trim() } />
89-
{ excerpt_more &&
90-
<p className="wordcamp-speaker-permalink">
91-
<a href={ post.link }>
92-
{ __( 'Read more', 'wordcamporg' ) }
93-
</a>
94-
</p>
95-
}
96-
</Disabled>
97-
}
98-
</div>
125+
<ItemHTMLContent
126+
className={ classnames( 'wordcamp-speaker-content-' + decodeEntities( content ) ) }
127+
content={ 'full' === content ? post.content.rendered.trim() : post.excerpt.rendered.trim() }
128+
link={ ( 'full' === content || excerpt_more ) ? post.link : null }
129+
linkText={ 'full' === content ? __( 'Visit session page', 'wordcamporg' ) : __( 'Read more', 'wordcamporg' ) }
130+
/>
99131
}
100132

101-
{ true === show_session && post._embedded.sessions &&
102-
<Fragment>
103-
<h4 className="wordcamp-speaker-session-heading">
104-
{ _n( 'Session', 'Sessions', post._embedded.sessions.length, 'wordcamporg' ) }
105-
</h4>
106-
107-
<ul className="wordcamp-speaker-session-list">
108-
{ post._embedded.sessions.map( ( session ) =>
109-
<li
110-
key={ session.slug }
111-
className="wordcamp-speaker-session-content"
112-
>
113-
<Disabled>
114-
<a
115-
className="wordcamp-speaker-session-link"
116-
href={ session.link }
117-
>
118-
{ decodeEntities( session.title.rendered.trim() ) || __( '(Untitled)', 'wordcamporg' ) }
119-
</a>
120-
<br />
121-
<span className="wordcamp-speaker-session-info">
122-
{ session.session_track.length &&
123-
sprintf(
124-
/* translators: 1: A date; 2: A time; 3: A location; */
125-
__( '%1$s at %2$s in %3$s', 'wordcamporg' ),
126-
session.session_date_time.date,
127-
session.session_date_time.time,
128-
get( tracks.find( ( value ) => {
129-
const [ firstTrackId ] = session.session_track;
130-
return parseInt( value.id ) === firstTrackId;
131-
} ), 'name' )
132-
)
133-
}
134-
{ ! session.session_track.length &&
135-
sprintf(
136-
/* translators: 1: A date; 2: A time; */
137-
__( '%1$s at %2$s', 'wordcamporg' ),
138-
session.session_date_time.date,
139-
session.session_date_time.time
140-
)
141-
}
142-
</span>
143-
</Disabled>
144-
</li>
145-
) }
146-
</ul>
147-
</Fragment>
133+
{ true === show_session &&
134+
<SpeakerSessions
135+
speaker={ post }
136+
tracks={ tracks }
137+
/>
148138
}
149-
</li>,
139+
</div>,
150140
) }
151-
</ul>
141+
</GridContentLayout>
152142
);
153143
}
154144
}

‎public_html/wp-content/mu-plugins/blocks/assets/src/speakers/block-content.scss

-53
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,3 @@
1-
.wordcamp-clearfix:after {
2-
content: "";
3-
display: table;
4-
clear: both;
5-
}
6-
7-
.wordcamp-speakers-block {
8-
/* The double-ampersand defeats an overzealous ul rule in Core's editor-blocks.css. */
9-
/* https://css-tricks.com/the-sass-ampersand/#article-header-id-11 */
10-
&#{&},
11-
.block-editor &#{&} {
12-
list-style: none;
13-
margin: 0 0 1em 0;
14-
}
15-
16-
&.layout-list > li {
17-
margin-bottom: 1em;
18-
&:last-child {
19-
margin-bottom: 0;
20-
}
21-
}
22-
23-
@media ( min-width: 400px ) {
24-
&.layout-grid {
25-
display: grid;
26-
grid-template-columns: repeat( 2, 1fr );
27-
grid-column-gap: 1em;
28-
grid-row-gap: 1em;
29-
30-
/* Ensure columns maintain equal widths. */
31-
/* https://stackoverflow.com/a/43312314 */
32-
min-height: 0;
33-
min-width: 0;
34-
& .wordcamp-speaker {
35-
overflow: hidden;
36-
min-width: 0;
37-
}
38-
}
39-
}
40-
41-
@media ( min-width: 600px ) {
42-
&.layout-grid.grid-columns-3 {
43-
grid-template-columns: repeat( 3, 1fr );
44-
}
45-
}
46-
47-
@media ( min-width: 800px ) {
48-
&.layout-grid.grid-columns-4 {
49-
grid-template-columns: repeat( 4, 1fr );
50-
}
51-
}
52-
}
53-
541
.wordcamp-speaker-session-list {
552
/* See note above about the double-ampersand. */
563
ul#{&},

0 commit comments

Comments
 (0)