Skip to content

Commit f3b0ecd

Browse files
kabeatykabeaty
authored
Merge pull request #25 from coralproject/feat/CORL-3018-update-settings-docs
[CORL-3018]: Update settings, docs, AMP support and bump to 1.0.0
2 parents dd88083 + bb96027 commit f3b0ecd

File tree

6 files changed

+242
-42
lines changed

6 files changed

+242
-42
lines changed

‎README.md‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
# Coral WP Plugin
22

3-
This plugin replaces standard WordPress commenting with [Coral by Vox Media](https://coralproject.net). The open-source commenting platform that rethinks
4-
how moderation, comment display, and conversation function, creating the
5-
opportunity for safer, smarter discussions.
3+
This plugin replaces standard WordPress commenting with [Coral by Vox Media](https://coralproject.net). Coral is an open-source commenting platform that rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions.
64

75
## Setup
86

9-
First, you'll need a server running your own instance of Coral. See the [Coral Docs](https://docs.coralproject.net/talk/) for more info about that.
7+
First, you'll need a server running your own instance of Coral. See the [Coral Docs](https://docs.coralproject.net/) for more info about that.
108

11-
Then...
9+
Then you will need to:
1210

1311
1. Add the hostname of your WordPress site to the whitelist in the settings of your Coral instance.
1412
1. Install and activate this plugin as you would any other WordPress plugin.
1513
1. Go to `https://mysite.com/wp-admin/options-general.php?page=talk-settings`
16-
1. Enter the URL of your Coral instance and click Save.
14+
1. Add the URL of your Coral instance to `Server Base URL` in Settings and click Save.
15+
1. Review and complete any further Settings and click Save.
16+
17+
## Story settings
18+
19+
The plugin supports enabling canonical URLs for a Wordpress post to be passed through to the Coral stream embed as the story URL.
20+
21+
The plugin also supports setting a story mode and sending it through to the Coral stream embed. To use, you can add a custom field in Wordpress called `coralStoryMode` and then set it to a valid story mode.
1722

1823
## HTTPS and Dev Mode
1924

2025
Your site must be served over `https` in order to integrate with Coral **unless** Coral is set to dev mode.
2126

22-
If you're installing Coral with Docker, you can do that by adding `NODE_ENV=dev` to the environment variables in your [`docker-compose.yml`](https://docs.coralproject.net/talk/installation-from-docker/). Otherwise, any method of setting `process.env.NODE_ENV = 'dev'` will do the trick.
27+
If you're installing Coral with Docker, you can do that by adding `NODE_ENV=development` to the environment variables in your [`docker-compose.yml`](https://docs.coralproject.net/environment-variables#node_env). Otherwise, any method of setting `NODE_ENV=development` will do the trick.
2328

2429
## Theme usage
2530

@@ -48,8 +53,9 @@ Coral v4.9.0+ comes with AMP support. This plugin automatically integrates with
4853
If you are building a custom theme, you can use `coral_talk_comments_amp_template()` to add the Coral AMP Iframe.
4954

5055
## Version
56+
5157
Coral version <= `v3.9.1` use plugin version `v0.0.6`
5258

5359
Coral version >= `4.0.0` use plugin version `v0.1.0`
5460

55-
Coral version >= `5.0.0` use plugin version `v0.2.1`
61+
Coral version >= `5.0.0` use plugin version `v1.0.0`

‎inc/class-talk-settings-page.php‎

Lines changed: 195 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,13 @@ function() {
6969
) );
7070

7171
add_settings_field(
72-
'coral_talk_container_classes',
73-
__( 'Embed Container CSS Classes', 'coral-project-talk' ),
74-
array( $this, 'render_container_classes_field' ),
72+
'coral_container_class_name',
73+
__( 'Embed Container CSS Class', 'coral-project-talk' ),
74+
array( $this, 'render_container_class_name_field' ),
7575
'talk-settings',
7676
'about-talk'
7777
);
78-
register_setting( 'talk-settings', 'coral_talk_container_classes' );
78+
register_setting( 'talk-settings', 'coral_container_class_name' );
7979

8080
add_settings_field(
8181
'coral_talk_version',
@@ -85,6 +85,57 @@ function() {
8585
'about-talk'
8686
);
8787
register_setting( 'talk-settings', 'coral_talk_version' );
88+
89+
add_settings_field(
90+
'coral_custom_css_url',
91+
__( 'Custom CSS URL', 'coral-project-talk' ),
92+
array( $this, 'render_custom_css_url_field' ),
93+
'talk-settings',
94+
'about-talk'
95+
);
96+
register_setting( 'talk-settings', 'coral_custom_css_url', array(
97+
'type' => 'string',
98+
'sanitize_callback' => array( $this, 'sanitize_url' ),
99+
) );
100+
101+
add_settings_field(
102+
'coral_custom_fonts_css_url',
103+
__( 'Custom Fonts CSS URL', 'coral-project-talk' ),
104+
array( $this, 'render_custom_fonts_css_url_field' ),
105+
'talk-settings',
106+
'about-talk'
107+
);
108+
register_setting( 'talk-settings', 'coral_custom_fonts_css_url', array(
109+
'type' => 'string',
110+
'sanitize_callback' => array( $this, 'sanitize_url' ),
111+
) );
112+
113+
add_settings_field(
114+
'coral_disable_default_fonts',
115+
__( 'Disable default fonts', 'coral-project-talk' ),
116+
array( $this, 'render_disable_default_fonts_field' ),
117+
'talk-settings',
118+
'about-talk'
119+
);
120+
register_setting( 'talk-settings', 'coral_disable_default_fonts');
121+
122+
add_settings_field(
123+
'coral_custom_scroll_container',
124+
__( 'Custom scroll container', 'coral-project-talk' ),
125+
array( $this, 'render_custom_scroll_container_field' ),
126+
'talk-settings',
127+
'about-talk'
128+
);
129+
register_setting( 'talk-settings', 'coral_custom_scroll_container' );
130+
131+
add_settings_field(
132+
'coral_enable_canonical_story_urls',
133+
__( 'Enable canonical story urls', 'coral-project-talk' ),
134+
array( $this, 'render_enable_canonical_story_urls_field' ),
135+
'talk-settings',
136+
'about-talk'
137+
);
138+
register_setting( 'talk-settings', 'coral_enable_canonical_story_urls' );
88139
}
89140

90141
/**
@@ -99,7 +150,7 @@ public function sanitize_url( $url ) {
99150
}
100151

101152
/**
102-
* Prints input field for settings.
153+
* Prints input field for base URL setting.
103154
*
104155
* @since 0.0.1
105156
*/
@@ -113,7 +164,7 @@ public function render_base_url_field() {
113164
type="url"
114165
value="<?php echo esc_url( get_option( 'coral_talk_base_url' ) ); ?>"
115166
/>
116-
<p class="description">The root url of the installed Coral application. This is the same value as <a href="<?php echo esc_url( 'https://docs.coralproject.net/talk/configuration/#talk-root-url' ); ?>">ROOT_URL</a> defined in the Coral application configuration.</p>
167+
<p class="description"><span style="font-weight: bold;">* Required.</span> The root url of the installed Coral application.</p>
117168
<?php
118169
}
119170

@@ -127,30 +178,160 @@ public function render_static_url_field() {
127178
<input
128179
style="width: 600px; height: 40px;"
129180
name="coral_talk_static_url"
130-
placeholder="https://cdn.talk-assets.com"
181+
placeholder="https://cdn.coral-assets.com"
131182
id="coral_talk_static_url"
132183
type="url"
133184
value="<?php echo esc_url( get_option( 'coral_talk_static_url' ) ); ?>"
134185
/>
135-
<p class="description">The root url where static Coral assets should be served from. This is the same value as <a href="<?php echo esc_url( 'https://docs.coralproject.net/talk/advanced-configuration/#talk-static-uri' ); ?>">STATIC_URI</a> defined in the Coral application configuration.</p>
186+
<p class="description">The root url where static Coral assets should be served from. This is the same value as defined by the <a href="<?php echo esc_url( 'https://docs.coralproject.net/environment-variables#static_uri' ); ?>">STATIC_URI</a> environment variable.</p>
136187
<?php
137188
}
138189

139190
/**
140-
* Prints input field for settings.
191+
* Prints input field for custom CSS url setting.
141192
*
142-
* @since 0.0.3
193+
* @since 1.0.0
194+
*/
195+
public function render_custom_css_url_field() {
196+
?>
197+
<input
198+
style="width: 600px; height: 40px;"
199+
name="coral_custom_css_url"
200+
placeholder="https://cdn.coral-assets.com/coral_custom.css"
201+
id="coral_custom_css_url"
202+
type="url"
203+
value="<?php echo esc_url( get_option( 'coral_custom_css_url' ) ); ?>"
204+
/>
205+
<p class="description">URL for a custom stylesheet to be included to style this Coral stream. To configure a custom stylesheet for all streams, see advanced configuration options in the admin.</p>
206+
<?php
207+
}
208+
209+
/**
210+
* Prints input field for custom fonts CSS url setting.
211+
*
212+
* @since 1.0.0
143213
*/
144-
public function render_container_classes_field() {
214+
public function render_custom_fonts_css_url_field() {
215+
?>
216+
<input
217+
style="width: 600px; height: 40px;"
218+
name="coral_custom_fonts_css_url"
219+
placeholder="https://cdn.coral-assets.com/coral_custom_fonts.css"
220+
id="coral_custom_fonts_css_url"
221+
type="url"
222+
value="<?php echo esc_url( get_option( 'coral_custom_fonts_css_url' ) ); ?>"
223+
/>
224+
<p class="description">URL for a custom stylesheet with font-face definitions to be included to style this Coral stream. To configure a custom stylesheet for all streams, see advanced configuration options in the admin.</p>
225+
<?php
226+
}
227+
228+
/**
229+
* Prints input field for Coral container class name setting.
230+
*
231+
* @since 1.0.0
232+
*/
233+
public function render_container_class_name_field() {
145234
?>
146235
<input
147236
style="width: 600px; height: 40px;"
148-
name="coral_talk_container_classes"
237+
name="coral_container_class_name"
149238
placeholder=""
150-
id="coral_talk_container_classes"
239+
id="coral_container_class_name"
151240
type="text"
152-
value="<?php echo esc_attr( get_option( 'coral_talk_container_classes' ) ); ?>"
241+
value="<?php echo esc_attr( get_option( 'coral_container_class_name' ) ); ?>"
153242
/>
243+
<p class="description">HTML class name to add to the container of the stream embed for CSS targeting.</p>
244+
<?php
245+
}
246+
247+
/**
248+
* Prints input field for custom scroll container setting.
249+
*
250+
* @since 1.0.0
251+
*/
252+
public function render_custom_scroll_container_field() {
253+
?>
254+
<input
255+
style="width: 600px; height: 40px;"
256+
name="coral_custom_scroll_container"
257+
placeholder="myElementId"
258+
id="coral_custom_scroll_container"
259+
type="text"
260+
value="<?php echo esc_attr( get_option( 'coral_custom_scroll_container' ) ); ?>"
261+
/>
262+
<p class="description">Supports a custom scroll container element if Coral is rendered outside of the render window. Add the element id you wish to use, and Coral will find it if it's in the document and send it through.</p>
263+
<?php
264+
}
265+
266+
/**
267+
* Prints input field for disable default fonts setting.
268+
*
269+
* @since 1.0.0
270+
*/
271+
public function render_disable_default_fonts_field() {
272+
$default_fonts = esc_attr( get_option( 'coral_disable_default_fonts' ) )
273+
?>
274+
<select
275+
style="width: 600px; height: 40px;"
276+
name="coral_disable_default_fonts"
277+
placeholder=""
278+
id="coral_disable_default_fonts"
279+
type="select"
280+
>
281+
<option value="false"
282+
<?php
283+
if ($default_fonts === "false")
284+
echo "selected=\"selected\""
285+
?>
286+
>
287+
false
288+
</option>
289+
<option value="true"
290+
<?php
291+
if ($default_fonts === "true")
292+
echo "selected=\"selected\""
293+
?>
294+
>
295+
true
296+
</option>
297+
</select>
298+
<p class="description">Disable default fonts will turn off font-face loading of Coral's default fonts.</p>
299+
<?php
300+
}
301+
302+
/**
303+
* Prints input field for disable default fonts setting.
304+
*
305+
* @since 1.0.0
306+
*/
307+
public function render_enable_canonical_story_urls_field() {
308+
$default_fonts = esc_attr( get_option( 'coral_enable_canonical_story_urls' ) )
309+
?>
310+
<select
311+
style="width: 600px; height: 40px;"
312+
name="coral_enable_canonical_story_urls"
313+
placeholder=""
314+
id="coral_enable_canonical_story_urls"
315+
type="select"
316+
>
317+
<option value="true"
318+
<?php
319+
if ($default_fonts === "true")
320+
echo "selected=\"selected\""
321+
?>
322+
>
323+
true
324+
</option>
325+
<option value="false"
326+
<?php
327+
if ($default_fonts === "false")
328+
echo "selected=\"selected\""
329+
?>
330+
>
331+
false
332+
</option>
333+
</select>
334+
<p class="description">When enabled, the canonical story URL will be passed through to the Coral stream embed.</p>
154335
<?php
155336
}
156337

‎inc/comments-amp-template.php‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
*
55
* @package Talk_Plugin
66
* @since 0.2.0
7+
* @since 1.0.0 Added support for sending through root url in iframe source.
8+
* Updated Read more button styles so it can be seen.
79
*/
810

911
$talk_url = get_option( 'coral_talk_base_url' );
@@ -14,8 +16,8 @@ class="talk-amp-iframe"
1416
layout="responsive"
1517
sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
1618
resizable
17-
src="<?php echo esc_url( $talk_url ); ?>/embed/amp#asset_url=<?php echo urlencode(wp_get_canonical_url()); ?>">
19+
src="<?php echo esc_url( $talk_url ); ?>/embed/stream/amp?storyURL=<?php echo urlencode(wp_get_canonical_url()); ?>">
1820
<div placeholder></div>
19-
<div overflow tabindex=0 role=button aria-label="Read more">Read more</div>
21+
<div overflow tabindex=0 role=button aria-label="Read more" style="position: relative; padding: 0.5rem; background: #CBD1D2; bottom: 0.5rem;">Read more</div>
2022
</amp-iframe>
2123
<?php endif;

‎inc/comments-template.php‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,22 @@
66
*
77
* @package Talk_Plugin
88
* @since 0.0.3 Added support for talk container class and removed id
9+
* @since 1.0.0 Added support for custom CSS url, custom fonts CSS url,
10+
* disable default fonts, custom scroll container, canonical story url, and story mode. Also
11+
* updated support for container class name.
912
*/
1013

1114
$talk_url = get_option( 'coral_talk_base_url' );
1215
$static_url = get_option( 'coral_talk_static_url', $talk_url );
13-
$talk_container_classes = get_option( 'coral_talk_container_classes' );
1416
$talk_version = get_option( 'coral_talk_version' );
17+
$coral_custom_css_url = get_option( 'coral_custom_css_url', null );
18+
$coral_custom_fonts_css_url = get_option( 'coral_custom_fonts_css_url', null );
19+
$coral_container_class_name = get_option( 'coral_container_class_name', null);
20+
$coral_disable_default_fonts = get_option( 'coral_disable_default_fonts' );
21+
$coral_custom_scroll_container = get_option( 'coral_custom_scroll_container', null );
22+
$enable_canonical_url = get_option( 'coral_enable_canonical_story_urls' );
23+
$canonical_url = wp_get_canonical_url();
24+
$storyMode = $post->coralStoryMode;
1525

1626
$div_id = 'coral_talk_' . absint( rand() );
1727

@@ -20,16 +30,26 @@
2030
endif;
2131

2232
if ( $talk_version == "5" ) : ?>
23-
<div class="<?php echo esc_attr( $talk_container_classes ); ?>" id="coral_thread"></div>
33+
<div id="coral_thread"></div>
2434
<script type="text/javascript">
2535
(function() {
2636
var d = document, s = d.createElement('script');
37+
const disableDefaultFonts = "<?php echo esc_attr( $coral_disable_default_fonts ); ?>" === "true";
38+
const storyURL = "<?php echo esc_attr( $enable_canonical_url ); ?>" === "true" ? "<?php echo esc_url( $canonical_url ); ?>" : undefined;
2739
s.src = "<?php echo esc_url( $talk_url . '/assets/js/embed.js' ); ?>"
2840
s.onload = function() {
41+
const customScrollContainer = document.getElementById("<?php echo esc_attr( $coral_custom_scroll_container ); ?>") || undefined;
2942
Coral.createStreamEmbed({
3043
id: "coral_thread",
3144
autoRender: true,
32-
rootURL: "<?php echo esc_url( $talk_url ); ?>"
45+
rootURL: "<?php echo esc_url( $talk_url ); ?>",
46+
containerClassName: "<?php echo esc_attr( $coral_container_class_name ); ?>",
47+
customCSSURL: "<?php echo esc_url( $coral_custom_css_url ); ?>",
48+
customFontsCSSURL: "<?php echo esc_url( $coral_custom_fonts_css_url ); ?>",
49+
disableDefaultFonts: disableDefaultFonts,
50+
customScrollContainer: customScrollContainer,
51+
storyURL: storyURL,
52+
storyMode: "<?php echo esc_attr( $storyMode ); ?>",
3353
});
3454
};
3555
(d.head || d.body).appendChild(s);

0 commit comments

Comments
 (0)