Developing Discourse Plugins - Part 2 - Connect to a plugin outlet

[merefield (Robert)]

@pfaffman

I think you can probably hide those with CSS.

Yes, and presumably you can apply to every available Theme so this can’t be switched off? (to address @sarahann concern about this approach).

[sarahann (Sarah)]

@sarahann

Using css display: none; isn’t an option.

I could use display: none but it might now be as secure as we need it to be. And I figured it would be helpful to have a discussion on how to remove / change Discourse UI templates.

[eviltrout (Robin Ward)]

It’s tricky to do properly, unfortunately. For a big customer of ours who needs functionality removed, my approach has been to hide the elements with CSS and remove the controller side actions by using add_to_class to overwrite the methods with an error in plugin.rb.

[sivert]

@sarahann

/users-list-show.hbs
/users-list.hbs

My changes never showed up. So I thought this plugin outlet topic could help

I have a same problem. I’m working on plugin with topic, and I have to change the html structures but it’s impossible with only CSS. So I was tried to overwrite template but changes never applied.
So do you have find any solution for that?

[eviltrout (Robin Ward)]

You can override any template in the application if you like (although outlets are always preferred!). How were you doing it? did you confirm the name is exactly the same as the template you are replacing?

[sivert]

I tried to override the “list/topic-list-item.raw.hbs” template, but even though I removed all of the content in template, the topic items still appearing as original, any changing in override template never worked.
Please help me what I was wrong.

[sam (Sam Saffron)]

See: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub for an example of how it is done.

[claudiawiese]

Hello,
When I run the command git grep “plugin-outlet” – “*.hbs” in my Linux Terminal, nothing shows up. Any ideas why? Thanks for your help!

[pfaffman (Jay Pfaffman)]

Caveat: This is a sysadmin answer, not a plugin developer answer, and I can’t guess what you might have done before you did your git command.

Did you add it to git? What about

 grep -r plugin-outlet .

[merefield (Robert)]

Building on Jay’s shoulders here, you can of course focus on the specific file type:

grep -r "plugin-outlet" --include \*.hbs

[weallwegot (juicecounty.prodigy)]

@eviltrout

For example, if your handlebars template has:

{{plugin-outlet name="evil-trout"}}

Is there anything you need to consider differently if the plugin outlet looks like this?

{{plugin-outlet name="users-top" connectorTagName="div" args=(hash model=model)}}

do the connectorTagName and args attributes mean that plugin developers have particular constraints or extra accesses when using these outlets?

[eviltrout (Robin Ward)]

Yes you are meant to work with the API that the outlets establish.

In the users-top you are passed a model which you can use, and the connector will be rendered with a div in this case.

[hocine (Hocine Mahmoudi)]

I haven’t found {{plugin-outlet}}. I found some components with the same name. Are they the same?

[Canapin (Coin-coin le Canapin)]

I think Discourse’s code changed and that the guide may be outdated.

Looking for this example:

@eviltrout

If you browse the discourse handlebars templates, you’ll often see the following markup:

{{plugin-outlet name="edit-topic"}}

I found this instead:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic.hbs#L80

And using this amazing theme component (deprecated) Plugin outlet locations theme component I can see this outlet where it should be:

To answer your question, my guess is it’s the same, but with a new syntax.

[hocine (Hocine Mahmoudi)]

I’ve also found this tag. Could someone confirm that they all the same?

{{~raw-plugin-outlet name="topic-list-after-title"}}

[david (David Taylor)]

The most up-to-date reference on plug-in outlets is here:

Using Plugin Outlet Connectors from a Theme or Plugin

Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “<PluginOutlet”, or use the plugin outlet locations theme component. (e.g. topic-above-posts). Wrapper outlets Some outlets in core look like <PluginOutlet @name="foo" />. These allow you…

I’ll try and get the OP here updated in the next few days

[david (David Taylor)]

OP updated with the new syntax, and a link to the full documentation

[j127]

@Discourse

If you want to see some of the places where plugin outlets exist, you can run the following command if you’re on OSX or Linux:

git grep "<PluginOutlet" -- "*.hbs"

I think the command should be updated to:

git grep "<PluginOutlet" -- "*.gjs"

@Discourse

@RGJ has also written a theme component to show their locations.

That link says “deprecated”.

Edit: I found the link to make a PR under the top post, so I made a PR.

[merefield (Robert)]

@j127

That link says “deprecated”.

Replaced by:

Introducing Discourse developer toolbar

When running the latest version of Discourse core in a development environment, you’ll notice a new toolbar on the left-hand-side of the screen: [Developer Tools] This provides one-click access to commonly-needed developer tools. So far, we have: Plugin Outlet Debug This shows all plugin outlets, with tooltips showing realtime values of all of the available @outletArgs. This was inspired by the popular plugin outlet locations theme component, and the plugin before it. But un…