Disclaimer: very happy with the direction here and thanks for all the work so far as there’s a lot of power in the new system. Just need to make sure we keep some equivalent capabilities? … [image]Upcoming topic-list changes - how to prepare themes and plugins :sos: What about other customizations? If your customization cannot be achieved using the new APIs we’ve introduced, please let us know by creating a new #dev topic to discuss. In my Component, TLP, I’m currently setting the style attribute of the Topic List Item outer tag dynamically: setting the background: colour to a unique RGB value to match the dominant colour of the image. This should ideally be done in Ember loop. I’m also setting setting grid-row-end to very quickly determine the size of the masonry element. This is very fast and efficient and avoids a lot of Javascript. However, for this I’m using Javascript as depends on the final sizes in the DOM. Currently these co-exist happily. [image] These are both critical customisations to the Theme Component and without them, it would not be supportable. This first amendment to style is currently achieved with a direct style attribute binding with modifyClass, which I understand is a deprecated method. javascripts/discourse/initializers/preview-edits.js.es6 2e7dadadc ), thumbnailFirstXRows: alias("parentView.thumbnailFirstXRows"), category: alias("parentView.category"), thumbnails: alias("topic.thumbnails"), hasThumbnail: false, averageIntensity: null, thumbnailIsLoaded: false, background: null, backgroundGradient: null, attributeBindings: ["style"], style: alias("background"), likeCount: 0, hasLiked: false, canUnlike: true, @discourseComputed("averageIntensity") whiteText() { if (this.averageIntensity > 127) { return false; } else { return this.averageIntensity; Would it be possible to have an API in the new world for this please? Or perhaps I’ve missed an existing way to swing this? However this is not something I believe can be achieved with classes.

[image] Robert: would it be possible to hook into Glimmer events such as didInsert, didUpdate, willDestroy via the new API? We could introduce specific transformers in certain places. But I don’t see us adding a general API which would allow you to attach to any element/component. As for the style= attribute discussion, I made this PR. Will try to get it reviewed/merged: https://github.com/discourse/discourse/pull/30727

[image] Robert: which I understand is a deprecated method. Is it? :confused: It’s not just require to update to the native class syntax? [image] Using modifyClass to change core behavior Developer Guides For advanced themes and plugins, Discourse offers the modifyClass system. This allows you to extend and override functionality in many of core’s javascript classes. When to use modifyClass modifyClass should be a last resort, when your customization cannot be made via Discourse’s more stable customization APIs (e.g. plugin-api methods, plugin outlets, transformers). Core’s code can change at any time. And therefore, customizations made via modifyClass could break at any time. When using this A…

[image]Upcoming topic-list changes - how to prepare themes and plugins Upgrades will also be required if you use modifyClass on component:topic-list or component:topic-list-item. If your site has any of these incompatible customizations, I’m going by this

Oh, I see. I thought that meant this upgrade. [image] Don: It’s not just require to update to the native class syntax?

It would be good to get clarity. So is modifyClass still valid? (Just updated syntax - might be good if so to reference that guide) Can I still use that to access the style attribute of the enclosing tag? Classic Components are different in that they historically provided access to enclosing tag level attributes outside of the template so they were straightforward to modify dynamically in code.

Ah, you’re right. There is a deprecated notice in console. Deprecation notice: Modifying ‘component:topic-list-item’ with ‘modifyClass’ is deprecated. Use the value transformer ‘topic-list-columns’ and other new topic-list plugin APIs instead.

modifyClass itself is not deprecated. It’s a risky customization method, and you should take precautions when using it (as described in the doc @don linked), but we don’t have any imminent plans to remove it. The reason we’re printing a deprecation message for component:topic-list and component:topic-list-items is that those components are the legacy implementation of the topic list, and are not used when the glimmer topic list is enabled. Now, we have a set of glimmer components like components/topic-list/item. So, technically, you could use modifyClass on those new components. But, because they’re glimmer components, you won’t be able to modify the style tag via the JS class, so it won’t help with the problem in the OP. [image] Robert: Or perhaps I’ve missed an existing way to swing this? However this is not something I believe can be achieved with classes. We have a similar ‘masonry’ mode in the official d-topic-thumbnails theme component, so it’s worth looking at how that’s implemented. We add a unique class to each ‘row’ of the topic list: javascripts/discourse/initializers/topic-thumbnails-init.gjs 4e4fc54ac api.registerValueTransformer( "topic-list-item-class", ({ value, context: { index } }) => { if (ttService.displayMasonry) { value.push(`masonry-${index}`); } return value; } ); Then we render a dynamic tag in a separate plugin-outlet, which targets those class names: javascripts/discourse/connectors/before-topic-list-body/topic-list-masonry-styles.gjs 4e4fc54ac {{#if this.topicThumbnails.displayMasonry}} {{! template-lint-disable no-forbidden-elements }} {{this.masonryStyle}} {{/if}} That said… it is a little convoluted, so perhaps we should look at adding a specific valueTransformer to allow changing the style= attribute. It’s a little tricky because of Ember’s xss/htmlSafe protections on that attribute… but I’m sure we could get something working.

Thanks for considering this David, that would be great!

David, I have another one, would it be possible to hook into Glimmer events such as didInsert, didUpdate, willDestroy via the new API? I want to run some additional javascript on didInsert, for example, which is currently handled by @on and modifyClass. javascripts/discourse/initializers/preview-edits.js.es6 2e7dadadc hasActions: readOnly("topicListPreviewsService.displayActions"), listChanged: false, wideFormat: false, listAreaSizeObserver: null, @discourseComputed("listChanged") wideFormat() { return settings.topic_list_tiles_wide_format }, @on("init") setup() { let listAreaSizeObserver; let listArea = document.querySelector("#list-area"); if (listArea) { listAreaSizeObserver = new ResizeObserver(resizeAllGridItems).observe(listArea); } this.set("listAreaSizeObserver", listAreaSizeObserver); const suggestedList = this.get("suggestedList"); if (suggestedList) { const category = this.get( (happy to make this a new Topic btw) I’ll try your technique here for now: javascripts/discourse/connectors/before-topic-list-body/topic-list-masonry-styles.gjs 4e4fc54ac import Component from "@glimmer/component"; import { service } from "@ember/service"; import { modifier } from "ember-modifier"; import MasonryCalculator from "../../lib/masonry-calculator"; export default class TopicListMasonryStyles extends Component { @service topicThumbnails; attachResizeObserver = modifier((element) => { const topicList = element.closest(".topic-list"); if (!topicList) { // eslint-disable-next-line no-console console.error( "topic-list-thumbnails resize-observer must be inside a topic-list" );

Works like a charm, thanks again! :rocket:

Modifying style attribute dynamically on Topic List Item

Development

merefield (Robert) January 30, 2025, 5:05pm 11

Thanks. So far so good with your current technique, I’ve tailored it for TLP and it appears to function well. I’ll revert if I find any more potential gaps.

Awesome! I should be ready for it by the time that’s merged, looking forward to it! thanks David!

Topic		Replies	Views
Using modifyClass to change core behavior Developer Guides	6	2787	March 4, 2026
Upcoming topic-list changes - how to prepare themes and plugins Development dev-news	35	2728	April 14, 2025
Modernizing our Topic List HTML - preparing themes, components and plugins Announcements new-feature	8	1853	January 17, 2023
Modify Ember model class using Theme Component Development	1	790	October 28, 2020
Following on from Adding Unique Class Names Feature	19	4942	January 15, 2016

Modifying style attribute dynamically on Topic List Item

Related topics